Skip to content

feat: Animated transitions between tab panels #9077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 24, 2025
Merged

feat: Animated transitions between tab panels #9077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 105 additions & 59 deletions packages/dev/s2-docs/pages/react-aria/Tabs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,65 @@ export const tags = ['navigation'];
<ExampleSwitcher>
```tsx render docs={docs.exports.Tabs} links={docs.links} props={['orientation', 'keyboardActivation', 'isDisabled']} type="vanilla" files={["starters/docs/src/Tabs.tsx", "starters/docs/src/Tabs.css"]}
"use client";
import {Tabs, TabList, Tab, TabPanel} from 'vanilla-starter/Tabs';
import Home from '@react-spectrum/s2/illustrations/gradient/generic2/Home';
import Folder from '@react-spectrum/s2/illustrations/gradient/generic2/FolderOpen';
import Search from '@react-spectrum/s2/illustrations/gradient/generic2/Search';
import Settings from '@react-spectrum/s2/illustrations/gradient/generic1/GearSetting';
import {Tabs, TabList, Tab, TabPanels, TabPanel} from 'vanilla-starter/Tabs';
import {Form} from 'vanilla-starter/Form';
import {TextField} from 'vanilla-starter/TextField';
import {Button} from 'vanilla-starter/Button';
import {RadioGroup, Radio} from 'vanilla-starter/RadioGroup';
import {CheckboxGroup} from 'vanilla-starter/CheckboxGroup';
import {Checkbox} from 'vanilla-starter/Checkbox';

<Tabs/* PROPS */>
<TabList aria-label="Tabs">
<Tab id="home">Home</Tab>
<Tab id="files">Files</Tab>
<Tab id="search">Search</Tab>
<Tab id="settings">Settings</Tab>
<TabList aria-label="Settings">
<Tab id="general">General</Tab>
<Tab id="appearance">Appearance</Tab>
<Tab id="notifications">Notifications</Tab>
<Tab id="profile">Profile</Tab>
</TabList>
<TabPanel id="home" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Home />
</TabPanel>
<TabPanel id="files" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Folder />
</TabPanel>
<TabPanel id="search" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Search />
</TabPanel>
<TabPanel id="settings" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Settings />
</TabPanel>
<TabPanels>
<TabPanel id="general">
<Form>
<TextField label="Homepage" defaultValue="react-aria.adobe.com" />
<Checkbox defaultSelected>Show sidebar</Checkbox>
<Checkbox>Show status bar</Checkbox>
</Form>
</TabPanel>
<TabPanel id="appearance">
<Form>
<RadioGroup label="Theme" defaultValue="auto">
<Radio value="auto">Auto</Radio>
<Radio value="light">Light</Radio>
<Radio value="dark">Dark</Radio>
</RadioGroup>
<RadioGroup label="Font size" defaultValue="medium">
<Radio value="small">Small</Radio>
<Radio value="medium">Medium</Radio>
<Radio value="large">Large</Radio>
</RadioGroup>
</Form>
</TabPanel>
<TabPanel id="notifications">
<CheckboxGroup label="Notifications settings" defaultValue={['account', 'dms']}>
<Checkbox value="account">Account activity</Checkbox>
<Checkbox value="mentions">Mentions</Checkbox>
<Checkbox value="dms">Direct message</Checkbox>
<Checkbox value="marketing">Marketing emails</Checkbox>
</CheckboxGroup>
</TabPanel>
<TabPanel id="profile">
<Form>
<TextField label="Name" defaultValue="Devon Govett" />
<TextField label="Username" defaultValue="@devongovett" />
<Button>Update profile</Button>
</Form>
</TabPanel>
</TabPanels>
</Tabs>
```

```tsx render docs={docs.exports.Tabs} links={docs.links} props={['orientation', 'keyboardActivation', 'isDisabled']} type="tailwind" files={["starters/tailwind/src/Tabs.tsx"]}
"use client";
import {Tabs, TabList, Tab, TabPanel} from 'tailwind-starter/Tabs';
import {Tabs, TabList, Tab, TabPanels, TabPanel} from 'tailwind-starter/Tabs';
import Home from '@react-spectrum/s2/illustrations/gradient/generic2/Home';
import Folder from '@react-spectrum/s2/illustrations/gradient/generic2/FolderOpen';
import Search from '@react-spectrum/s2/illustrations/gradient/generic2/Search';
Expand All @@ -59,18 +87,20 @@ export const tags = ['navigation'];
<Tab id="search">Search</Tab>
<Tab id="settings">Settings</Tab>
</TabList>
<TabPanel id="home" className="flex items-center justify-center">
<Home />
</TabPanel>
<TabPanel id="files" className="flex items-center justify-center">
<Folder />
</TabPanel>
<TabPanel id="search" className="flex items-center justify-center">
<Search />
</TabPanel>
<TabPanel id="settings" className="flex items-center justify-center">
<Settings />
</TabPanel>
<TabPanels>
<TabPanel id="home" className="flex items-center justify-center">
<Home />
</TabPanel>
<TabPanel id="files" className="flex items-center justify-center">
<Folder />
</TabPanel>
<TabPanel id="search" className="flex items-center justify-center">
<Search />
</TabPanel>
<TabPanel id="settings" className="flex items-center justify-center">
<Settings />
</TabPanel>
</TabPanels>
</Tabs>
```

Expand All @@ -82,9 +112,8 @@ export const tags = ['navigation'];

```tsx render
"use client";
import {Tabs, TabList, Tab, TabPanel} from 'vanilla-starter/Tabs';
import {Tabs, TabList, Tab, TabPanels, TabPanel} from 'vanilla-starter/Tabs';
import {Button} from 'vanilla-starter/Button';
import {Collection} from 'react-aria-components';
import {useState} from 'react';

function Example() {
Expand Down Expand Up @@ -127,17 +156,17 @@ function Example() {
<Button onPress={removeTab}>Remove tab</Button>
</div>
</div>
<Collection items={tabs}>
<TabPanels items={tabs}>
{item => <TabPanel>{item.content}</TabPanel>}
</Collection>
</TabPanels>
</Tabs>
);
}
```

```css render hidden
.button-group {
border-bottom: 1px solid gray;
border-bottom: 0.5px solid var(--border-color);
display: flex;
align-items: center;
gap: 8px;
Expand All @@ -150,7 +179,7 @@ Use the `href` prop on a `<Tab>` to create a link. See the **client side routing

```tsx render
"use client";
import {Tabs, TabList, Tab, TabPanel} from 'vanilla-starter/Tabs';
import {Tabs, TabList, Tab, TabPanels, TabPanel} from 'vanilla-starter/Tabs';
import {useSyncExternalStore} from 'react';

export default function Example() {
Expand All @@ -165,9 +194,11 @@ export default function Example() {
<Tab id="#/shared" href="#/shared">Shared</Tab>
<Tab id="#/deleted" href="#/deleted">Deleted</Tab>
</TabList>
<TabPanel id="#/">Home</TabPanel>
<TabPanel id="#/shared">Shared</TabPanel>
<TabPanel id="#/deleted">Deleted</TabPanel>
<TabPanels>
<TabPanel id="#/">Home</TabPanel>
<TabPanel id="#/shared">Shared</TabPanel>
<TabPanel id="#/deleted">Deleted</TabPanel>
</TabPanels>
</Tabs>
);
}
Expand All @@ -193,7 +224,7 @@ Use the `defaultSelectedKey` or `selectedKey` prop to set the selected tab. The
```tsx render
"use client";
import type {Key} from 'react-aria-components';
import {Tabs, TabList, Tab, TabPanel} from 'vanilla-starter/Tabs';
import {Tabs, TabList, Tab, TabPanels, TabPanel} from 'vanilla-starter/Tabs';
import Home from '@react-spectrum/s2/illustrations/gradient/generic2/Home';
import Folder from '@react-spectrum/s2/illustrations/gradient/generic2/FolderOpen';
import Search from '@react-spectrum/s2/illustrations/gradient/generic2/Search';
Expand All @@ -217,18 +248,20 @@ function Example() {
<Tab id="search" isDisabled>Search</Tab>
<Tab id="settings">Settings</Tab>
</TabList>
<TabPanel id="home" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Home />
</TabPanel>
<TabPanel id="files" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Folder />
</TabPanel>
<TabPanel id="search" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Search />
</TabPanel>
<TabPanel id="settings" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Settings />
</TabPanel>
<TabPanels>
<TabPanel id="home" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Home />
</TabPanel>
<TabPanel id="files" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Folder />
</TabPanel>
<TabPanel id="search" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Search />
</TabPanel>
<TabPanel id="settings" style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Settings />
</TabPanel>
</TabPanels>
</Tabs>
<p>Selected tab: {tab}</p>
</div>
Expand All @@ -240,14 +273,16 @@ function Example() {

<Anatomy />

```tsx links={{Tabs: '#tabs', TabList: '#tablist', Tab: '#tab', TabPanel: '#tabpanel', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
```tsx links={{Tabs: '#tabs', TabList: '#tablist', Tab: '#tab', TabPanels: '#tabpanels', TabPanel: '#tabpanel', SelectionIndicator: 'selection.html#animated-selectionindicator'}}
<Tabs>
<TabList>
<Tab>
<SelectionIndicator />
</Tab>
</TabList>
<TabPanel />
<TabPanels>
<TabPanel />
</TabPanels>
</Tabs>
```

Expand All @@ -263,6 +298,17 @@ function Example() {

<PropTable component={docs.exports.Tab} links={docs.links} showDescription />

### TabPanels

<PropTable
component={docs.exports.TabPanels}
links={docs.links}
showDescription
cssVariables={{
'--tab-panel-width': 'The width of the active tab panel in pixels. Useful for animations.',
'--tab-panel-height': 'The height of the active tab panel in pixels. Useful for animations.'
}} />

### TabPanel

<PropTable component={docs.exports.TabPanel} links={docs.links} showDescription />
8 changes: 4 additions & 4 deletions packages/dev/s2-docs/src/PropTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import {Code, styles as codeStyles} from './Code';
import {CSSVariables, StateTable} from './StateTable';
import {DisclosureRow} from './DisclosureRow';
import React from 'react';
import {renderHTMLfromMarkdown, setLinks, TComponent, TInterface, TType, Type} from './types';
import {StateTable} from './StateTable';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from './Table';

Expand Down Expand Up @@ -104,9 +104,9 @@ export function PropTable({component, links, showDescription, hideRenderProps, s
style={!defaultClassName ? {marginTop: 16} : undefined}
properties={renderProps.properties}
showOptional={showOptionalRenderProps}
hideSelector={hideSelector}
cssVariables={cssVariables} />
) : null}
hideSelector={hideSelector} />
) : null}
{cssVariables && <CSSVariables cssVariables={cssVariables} />}
</>
);
}
Expand Down
52 changes: 29 additions & 23 deletions packages/dev/s2-docs/src/StateTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,32 +61,38 @@ export function StateTable({properties, links, showOptional, hideSelector, cssVa
table = (
<>
{table}
<Table style={{marginTop: 16}}>
<TableHeader>
<TableRow>
<TableColumn role="columnheader">CSS Variable</TableColumn>
</TableRow>
</TableHeader>
<TableBody>
{Object.entries(cssVariables).map(([name, description]) => (
<Fragment key={name}>
<TableRow>
<TableCell role="rowheader" hideBorder>
<code className={codeStyle}>
<span className={codeStyles.property}>{name}</span>
</code>
</TableCell>
</TableRow>
<TableRow>
<TableCell>{renderHTMLfromMarkdown(description, {forceInline: true})}</TableCell>
</TableRow>
</Fragment>
))}
</TableBody>
</Table>
<CSSVariables cssVariables={cssVariables} />
</>
);
}

return table;
}

export function CSSVariables({cssVariables}: {cssVariables: {[name: string]: string}}) {
return (
<Table style={{marginTop: 16}}>
<TableHeader>
<TableRow>
<TableColumn role="columnheader">CSS Variable</TableColumn>
</TableRow>
</TableHeader>
<TableBody>
{Object.entries(cssVariables).map(([name, description]) => (
<Fragment key={name}>
<TableRow>
<TableCell role="rowheader" hideBorder>
<code className={codeStyle}>
<span className={codeStyles.property}>{name}</span>
</code>
</TableCell>
</TableRow>
<TableRow>
<TableCell>{renderHTMLfromMarkdown(description, {forceInline: true})}</TableCell>
</TableRow>
</Fragment>
))}
</TableBody>
</Table>
);
}
Loading