feat(tabs, tab): map legacy interface onto next version of components#7728
Draft
feat(tabs, tab): map legacy interface onto next version of components#7728
Conversation
edleeks87
added
Pending Review
Pending QA
DO NOT MERGE
Pending UX QA
Squad Front End
Work in progress
edleeks87
force-pushed
the
tabs-adapter
branch
from
7645d02 to
aeb805d
Compare
There was a problem hiding this comment.
Pull request overview
This PR maps the legacy Tabs and Tab component interface to the next version, facilitating migration by rendering the next version when using the legacy import. Several legacy features have been removed as they could not be maintained in the new implementation.
Changes:
- Maps legacy
TabsandTabcomponent props to the next version implementation - Replaces deprecation warnings with migration warnings
- Removes legacy internal components and styling files
Reviewed changes
Copilot reviewed 31 out of 31 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
src/components/tabs/tabs.component.tsx |
Maps legacy props to next version, renders NextTabs wrapper |
src/components/tabs/tab/tab.component.tsx |
Maps legacy Tab props to NextTab, composes label from title/siblings/customLayout |
src/components/tabs/tabs.test.tsx |
Simplified tests focusing on next version behavior |
src/components/tabs/tabs.stories.tsx |
Updated stories removing deprecated features |
src/components/tabs/__next__/tabs.component.tsx |
Added support for href, hasCustomLayout, headerWidth props |
src/components/tabs/__next__/tabs.style.ts |
Updated styled components with transient props and headerWidth support |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| border-bottom-right-radius: 0px; | ||
| border-top-left-radius: 8px; | ||
| border-top-right-radius: 0px; | ||
| max-width: ${$headerWidth ?? `${VERTICAL_TAB_WIDTH}px`}; |
There was a problem hiding this comment.
Setting both max-width and width to the same value on lines 269-270 makes max-width redundant. If the intent is to allow tabs to be narrower, only set max-width. If the intent is to enforce exact width, only set width.
Suggested change
| max-width: ${$headerWidth ?? `${VERTICAL_TAB_WIDTH}px`}; |
edleeks87
force-pushed
the
tabs-adapter
branch
from
aeb805d to
2fa8551
Compare
Maps the legacy interface to the next version of `Tabs` and `Tab`. Marks relevant props as deprecated and adds Logger warning to inform consumers of future removal etc.
edleeks87
force-pushed
the
tabs-adapter
branch
from
2fa8551 to
e6b96c8
Compare
DipperTheDan
approved these changes
Feb 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Maps the legacy interface to the next version of
TabsandTab. Marks relevant props as deprecated and adds Logger warning to inform consumers of future removal etc.Proposed behaviour
Updates legacy Tabs to map old interface to
nextversion of the component, the next versions are now rendered when importing the legacy versionsMarks relevant props on legacy interface as deprecated
Current behaviour
Legacy Tabs does not render next versions of components
Checklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions