Skip to content

✨ feat: add declarative items to Tabs and derive the active trigger state - #720

Open
futjesus wants to merge 1 commit into
mainfrom
feat/tabs-items
Open

futjesus wants to merge 1 commit into
mainfrom
feat/tabs-items

Conversation

@futjesus

@futjesus futjesus commented Sep 3, 2026

Copy link
Copy Markdown
Member

Summary

  • Tabs.Trigger without isActive: when omitted, the active styles are derived from Radix's data-state through a named group, so consumers stop mirroring the active value into every trigger. Compute (detail Tabs), kubernetes (cpu/gpu Tabs), settings and billing pages all repeat isActive={activeTab === tab}. Passing isActive still works.
  • items: declarative API that renders the list, triggers and contents from an array (value, label, content, optional class names, listClassName). Uncontrolled by default: starts on the first item (or defaultValue) and falls back to the first item when the active one disappears, which compute SizeTabs and kubernetes node pool Tabs implemented locally with useState + useEffect. Passing value keeps the tabs controlled.

Existing children-based usage is unchanged.

Test plan

  • New tests: derived active state, items render/switch/onValueChange, defaultValue, fallback when the active item disappears, controlled value, axe
  • npx vitest run lib/components/Tabs, lint, types, prettier
  • Storybook: Tabs/Light and DarkDeclarativeItems

…tate

`Tabs.Trigger` no longer requires `isActive`: when omitted, the active
styles come from Radix's `data-state` through a named group, so consumers
stop mirroring the active value into every trigger (compute detail Tabs,
kubernetes cpu/gpu Tabs, settings and billing pages all did this).

`items` renders the list, triggers and contents from an array. It is
uncontrolled by default, starts on the first item and falls back to it
when the active item disappears, which compute's SizeTabs and kubernetes'
node pool Tabs implemented locally with useState + useEffect. Passing
`value` keeps the tabs controlled as before.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant