@wordpress/ui: add Tabs
#74652
Merged
@wordpress/ui: add Tabs
#74652
Conversation
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
|
Size Change: 0 B Total Size: 3 MB ℹ️ View Unchanged
|
ciampo
commented
Jan 15, 2026
| /* Appearance */ | ||
| cursor: pointer; | ||
|
|
||
| /* Typography (TODO: replace with theme tokens when available) */ |
Contributor
Author
There was a problem hiding this comment.
Will follow-up in a separate PR to use typography DS tokens (maybe after updating Text)
ciampo
commented
Jan 15, 2026
| } | ||
|
|
||
| [data-orientation="horizontal"] & { | ||
| padding-inline: calc(4 * var(--wpds-dimension-base)); /* TODO: Use or create new control/interactive padding token */ |
Contributor
Author
There was a problem hiding this comment.
I thought we should wait before using dimension DS tokens to make sure we have a revised approach going forward (see #74556)
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ciampo
commented
Jan 15, 2026
|
Flaky tests detected in afcac15. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/21519447368
|
mirka
reviewed
Jan 16, 2026
ciampo
force-pushed
the
feat/wp-ui-tabs
branch
from
bc97837 to
63f19e5
Compare
aduth
reviewed
Jan 27, 2026
ciampo
force-pushed
the
feat/wp-ui-tabs
branch
from
c5ee9e7 to
36bb104
Compare
ciampo
commented
Jan 29, 2026
8 tasks
Contributor
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new Tabs primitive to @wordpress/ui, adapting behavior and patterns from @wordpress/components to the newer UI package conventions.
Changes:
- Introduces
Tabscomponents (Root,List,Tab,Panel) with styling, Storybook stories, and extensive unit tests. - Extends the shared
ComponentPropstyping to support Base UIrenderstate typing, and updates several existing primitives’ types accordingly. - Adds
@wordpress/composeas a dependency (and TS project reference) to supportuseMergeRefsusage inTabs.List.
Reviewed changes
Copilot reviewed 19 out of 20 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/tsconfig.json | Adds @wordpress/compose TS project reference for build correctness. |
| packages/ui/src/utils/types.ts | Extends ComponentProps typing to support render state. |
| packages/ui/src/tabs/types.ts | Defines public prop types for the new Tabs primitives. |
| packages/ui/src/tabs/root.tsx | Adds Tabs.Root wrapper around Base UI Tabs. |
| packages/ui/src/tabs/list.tsx | Adds Tabs.List with overflow detection, masking, indicator rendering, and render override support. |
| packages/ui/src/tabs/tab.tsx | Adds Tabs.Tab with chevron affordance and styling hooks. |
| packages/ui/src/tabs/panel.tsx | Adds Tabs.Panel wrapper and styling. |
| packages/ui/src/tabs/style.module.css | Implements visual styles, focus styles, indicator styling, and overflow masking. |
| packages/ui/src/tabs/stories/index.story.tsx | Adds Storybook stories for default/compact/vertical/overflow cases and composition examples. |
| packages/ui/src/tabs/stories/best-practices.mdx | Adds usage guidance for controlled/uncontrolled modes. |
| packages/ui/src/tabs/test/index.test.tsx | Adds comprehensive behavior/a11y/interaction tests. |
| packages/ui/src/tabs/index.ts | Exposes the Tabs subcomponents. |
| packages/ui/src/index.ts | Exports Tabs namespace from the package root. |
| packages/ui/src/form/primitives/input/types.ts | Updates typing to pass Base UI state through ComponentProps. |
| packages/ui/src/form/primitives/fieldset/types.ts | Updates typing to pass Base UI state through ComponentProps. |
| packages/ui/src/form/primitives/field/types.ts | Updates typing to pass Base UI state through ComponentProps. |
| packages/ui/src/button/types.ts | Updates typing to pass Base UI state through ComponentProps. |
| packages/ui/package.json | Adds @wordpress/compose dependency required by Tabs.List. |
| packages/ui/CHANGELOG.md | Documents the addition of the Tabs primitive. |
| package-lock.json | Updates lockfile to reflect dependency graph changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
1 task
ciampo
force-pushed
the
feat/wp-ui-tabs
branch
from
5d3c3cd to
afcac15
Compare
…e, like Base UI" This reverts commit 36bb104.
aduth
approved these changes
Jan 30, 2026
Member
aduth
left a comment
aduth
left a comment
There was a problem hiding this comment.
LGTM after latest round of updates 👍 Few minor comments.
|
|
||
| const MyUncontrolledTabs = () => ( | ||
| <Tabs.Root | ||
| onValueChange={ ( tab ) => console.log( 'New selected tab: ', tab ) } |
Member
There was a problem hiding this comment.
Aside: I feel like we're missing some documentation on our approach to onValueChange vs. onChange props, since historical components used onChange for what we're now using onValueChange (i.e. value vs. raw event).
Contributor
Author
There was a problem hiding this comment.
Good point. This feels like something to coordinate at the package level, especially related to our Form components (cc @mirka )
I guess it's up to us to decide how detailed we want our first-party documentation to be vs delagating to indivisual types docs vs linking to Base UI docs (if relevant)
ciampo
force-pushed
the
feat/wp-ui-tabs
branch
from
891e088 to
f9dc3f4
Compare
ciampo
force-pushed
the
feat/wp-ui-tabs
branch
from
f9dc3f4 to
71bb020
Compare
adamsilverstein
pushed a commit
that referenced
this pull request
Jan 31, 2026
* Initial commit * Fix imports react => @wordpress/elements import order * Add export * Adjust --wpds-color-stroke-interactive-neutral-strong * CHANGELOG * Fix stylelint errors * Add @wordpress/compose to the UI package * Unify tests, fix lint errors * Update package.json * remove cursor files (added by mistake) * Restore tooltip in stories * Move best practices file * Fix storybook mdx * Revert "Adjust --wpds-color-stroke-interactive-neutral-strong" This reverts commit 9ef48ac. * Fix docs * Remove custom focusable prop in favour of using tabIndex directly * Use Icon component instead of cloning an SVG * Fix renamed DS tokens * Use ComponentProps utility type * Support a second "State" argument in internal render prop type, like Base UI * Use underscore notation for Base UI imports * Fix unit tests * Simplify overflow measurement (remove unnecessary variables and checks) * remove stale CHANGELOG entry * Remove wrong package references * Revert "Support a second "State" argument in internal render prop type, like Base UI" This reverts commit 36bb104. * Do not forward state in the render prop * Update snippet * Fix changelog * Refactor from `density="compact"` to `variant="minimal"` * Move useState inside render function in docs code snippet * Follow Base UI renaming convention * Cleaner tabIndex fix in tests * Fix RTL edge fade when scrolling horizontally * Simplify tabIndex calculation for tablist * Do not use BEM * Simplify Storybook --- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org>
Contributor
|
Nice to see this. As a follow-up, I'd love a final answer on whether to use this component or to build a NavigationList variant in the different site editor pages, knowing that these are "links" and we kind of want them to look as tabs (according to design) |
Contributor
Author
|
First instinct is that we shouldn't use |
adamsilverstein
pushed a commit
that referenced
this pull request
Feb 3, 2026
* Initial commit * Fix imports react => @wordpress/elements import order * Add export * Adjust --wpds-color-stroke-interactive-neutral-strong * CHANGELOG * Fix stylelint errors * Add @wordpress/compose to the UI package * Unify tests, fix lint errors * Update package.json * remove cursor files (added by mistake) * Restore tooltip in stories * Move best practices file * Fix storybook mdx * Revert "Adjust --wpds-color-stroke-interactive-neutral-strong" This reverts commit 9ef48ac. * Fix docs * Remove custom focusable prop in favour of using tabIndex directly * Use Icon component instead of cloning an SVG * Fix renamed DS tokens * Use ComponentProps utility type * Support a second "State" argument in internal render prop type, like Base UI * Use underscore notation for Base UI imports * Fix unit tests * Simplify overflow measurement (remove unnecessary variables and checks) * remove stale CHANGELOG entry * Remove wrong package references * Revert "Support a second "State" argument in internal render prop type, like Base UI" This reverts commit 36bb104. * Do not forward state in the render prop * Update snippet * Fix changelog * Refactor from `density="compact"` to `variant="minimal"` * Move useState inside render function in docs code snippet * Follow Base UI renaming convention * Cleaner tabIndex fix in tests * Fix RTL edge fade when scrolling horizontally * Simplify tabIndex calculation for tablist * Do not use BEM * Simplify Storybook --- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What?
Add
Tabscomponent to@wordpress/uiWhy?
We're building a new set of UI primitives, see #71196
How?
Take the good parts of
Tabsfrom@wordpress/componentsand adapt it to the new conventions / DS tokens / etcTesting Instructions
Check code, unit tests, smoke test in Storybook
Screenshots or screencast
Next Steps
Textor DS tokens once finalized