Align Tabs and TabList APIs#3691
Closed
missating wants to merge 22 commits into
Closed
Conversation
* drop support for node 22 * drop support for node 22 * add node 26 to the matrix
* feat: remove placeholder color from body and compack component * add changeset * remove placeholdr color from numeral component * update changeset file
* removed legacy tooltip component * removed legacy inline elements component * add changesets
* remove deprecated props * add changeset files * update changeset
* remnove role prop from ActionMenu * remove default alt prop from avatar * remove deprecated italic prop * update changeset files * remove role prop from action menu * fix lint errors * Update .changeset/curvy-snakes-heal.md Co-authored-by: sirineJ <112706079+sirineJ@users.noreply.github.com> * Update packages/circuit-ui/components/ActionMenu/ActionMenu.tsx Co-authored-by: sirineJ <112706079+sirineJ@users.noreply.github.com> * remove unused div block --------- Co-authored-by: sirineJ <112706079+sirineJ@users.noreply.github.com>
* remove h4 from listitem label * add changeset
* makr autocomplete input as stable * add changeset * Update .changeset/young-otters-walk.md Co-authored-by: sirineJ <112706079+sirineJ@users.noreply.github.com> * update changeset * Update .changeset/young-otters-walk.md Co-authored-by: sirineJ <112706079+sirineJ@users.noreply.github.com> * Update .changeset/bumpy-tools-fall.md Co-authored-by: sirineJ <112706079+sirineJ@users.noreply.github.com> * clean up changeset --------- Co-authored-by: sirineJ <112706079+sirineJ@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 7a38c80 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
Size Change: +168 B (+0.02%) Total Size: 827 kB 📦 View Changed
ℹ️ View Unchanged
|
* drop support for react 18 * remove forward ref from form input components * remove forwardref from layout components * remove forwardref from navigation component * remove forwardref from state component * remove wrapper element from popover and actionmenu * fix lint errors * fix failing test * update popover ref logic * add changeset * update changeset * update button ref to any * update react types overrides * remove ref from component
missating
force-pushed
the
DSYS-1672-web-align-tabs-and-tab-list-ap-is
branch
from
44e69b7 to
d851deb
Compare
sirineJ
reviewed
Jun 15, 2026
| {item.tab} | ||
| </Tab> | ||
| )) | ||
| : children} |
Contributor
There was a problem hiding this comment.
do we want to keep children here ?
Contributor
Author
There was a problem hiding this comment.
children here is kept to support as="navigation" mode, where links are passed directly as children rather than via the tabs prop. Removing it would break that pattern since navigation links don't map to the tabs prop shape. I wasn't sure if we wanted to change that here, so I left it in.
Contributor
There was a problem hiding this comment.
I don't think we should distinguish the two cases here. I think the component should support both. Besides, If we no longer export the Tab component, developers won't be able to pass it as children.
Contributor
|
Can we exclude ref from the props table for TabList and TabPanel please ? |
Contributor
Author
|
Since |
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.
Addresses DSYS-1672
Purpose
Make
TabListresponsible for rendering and managing the tabs' state internally, similar to theTabscomponent. The existing API madeTabListunaware of the state of the tabs rendered as children, meaning it had no way to know whether the active tab changed programmatically, causing the glider to fall out of sync. This simplifies the effort from developers and reduces the risk of overlooking interactions and accessibility attributes.Approach and changes
TabList'sAPI to accept a tabs prop({ id: string; tab: ReactNode }[]),initialSelectedIndex, andonTabChange. Selection state, keyboard navigation, and ARIA attributes(aria-selected, aria-controls)are now managed internally viauseTabState.[role="tab"][aria-selected="true"]query with atabRefsref array: auseEffectwatchingselectedIndexdrives glider positioning, keeping it in sync with any state change.TabandTabPropsfrom the public exports.Tabis now an internal implementation detail ofTabList.Tabsto delegate tab rendering to the newTabListAPI.Definition of done