Skip to content

Commit ed179a1

Browse files
eirikbackereirikbacker
authored
fix(Tabs): api alignment (#2448)
- Part of #2221 - Renames `Tabs.Root` to `Tabs` - Renames `Tabs.Content` to `Tabs.Panel` as this aligns with ARIA-standard and is a more common convention
1 parent 7dceadd commit ed179a1

File tree

17 files changed

+248
-284
lines changed

17 files changed

+248
-284
lines changed

‎.changeset/gold-chairs-jog.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@digdir/designsystemet-css": patch
3+
"@digdir/designsystemet-react": patch
4+
---
5+
6+
Tabs:
7+
- Renames `Tabs.Root` to `Tabs`
8+
- Renames `Tabs.Content` to `Tabs.Panel`

‎apps/theme/components/Previews/Components/Components.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -309,13 +309,13 @@ export const Components = () => {
309309
/>
310310
</div>
311311
<div className={cl(classes.card, classes.tabs)}>
312-
<Tabs.Root defaultValue='value1' size='sm'>
312+
<Tabs defaultValue='value1' size='sm'>
313313
<Tabs.List>
314314
<Tabs.Tab value='value1'>Min profil</Tabs.Tab>
315315
<Tabs.Tab value='value2'>Tjenester</Tabs.Tab>
316316
<Tabs.Tab value='value3'>Innstillinger</Tabs.Tab>
317317
</Tabs.List>
318-
</Tabs.Root>
318+
</Tabs>
319319
<Paragraph size='sm'>
320320
For å kunne bli registrert i{' '}
321321
<Link href='#' color='neutral'>

‎packages/css/tabs.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
}
1818
}
1919

20-
.ds-tabs__content {
20+
.ds-tabs__panel {
2121
padding: var(--dsc-tabs-content-padding);
2222
color: var(--dsc-tabs-content-color);
2323
}

‎packages/react/src/components/Badge/Badge.stories.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export const Status: Story = (args) => (
134134
);
135135

136136
export const InTabs: Story = (args) => (
137-
<Tabs.Root defaultValue='value1' size='md'>
137+
<Tabs defaultValue='value1' size='md'>
138138
<Tabs.List>
139139
<Tabs.Tab value='value1'>
140140
<HeartFillIcon fontSize='1.75rem' />
@@ -148,10 +148,10 @@ export const InTabs: Story = (args) => (
148148
<Badge count={2} color='neutral' />
149149
</Tabs.Tab>
150150
</Tabs.List>
151-
<Tabs.Content value='value1'>content 1</Tabs.Content>
152-
<Tabs.Content value='value2'>content 2</Tabs.Content>
153-
<Tabs.Content value='value3'>content 3</Tabs.Content>
154-
</Tabs.Root>
151+
<Tabs.Panel value='value1'>content 1</Tabs.Panel>
152+
<Tabs.Panel value='value2'>content 2</Tabs.Panel>
153+
<Tabs.Panel value='value3'>content 3</Tabs.Panel>
154+
</Tabs>
155155
);
156156

157157
export const InButton: Story = (args) => (

‎packages/react/src/components/Tabs/Tab.tsx

-40
This file was deleted.

‎packages/react/src/components/Tabs/TabList.tsx

-39
This file was deleted.

‎packages/react/src/components/Tabs/Tabs.mdx

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/blocks';
22

3-
import { TabsRoot } from './TabsRoot';
4-
import { Tab } from './Tab';
5-
import { TabContent } from './TabContent';
3+
import { Tabs } from './Tabs';
4+
import { TabsTab } from './TabsTab';
5+
import { TabsPanel } from './TabsPanel';
66
import * as TabsStories from './Tabs.stories';
77

88
<Meta of={TabsStories} />
@@ -19,16 +19,16 @@ Tabs lar brukerne navigere mellom relaterte deler av innholdet, der én del vise
1919
```tsx
2020
import { Tabs } from '@digdir/designsystemet-react';
2121

22-
<Tabs.Root defaultValue='value1'>
22+
<Tabs defaultValue='value1'>
2323
<Tabs.List>
2424
<Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
2525
<Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
2626
<Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
2727
</Tabs.List>
28-
<Tabs.Content value='value1'>content 1</Tabs.Content>
29-
<Tabs.Content value='value2'>content 2</Tabs.Content>
30-
<Tabs.Content value='value3'>content 3</Tabs.Content>
31-
</Tabs.Root>;
28+
<Tabs.Panel value='value1'>content 1</Tabs.Panel>
29+
<Tabs.Panel value='value2'>content 2</Tabs.Panel>
30+
<Tabs.Panel value='value3'>content 3</Tabs.Panel>
31+
</Tabs>;
3232
```
3333

3434
## Icons only
@@ -41,17 +41,17 @@ import { Tabs } from '@digdir/designsystemet-react';
4141

4242
### Props
4343

44-
#### `Tabs.Root`
44+
#### `Tabs`
4545

46-
<ArgTypes of={TabsRoot} />
46+
<ArgTypes of={Tabs} />
4747

4848
#### `Tabs.Tab`
4949

50-
<ArgTypes of={Tab} />
50+
<ArgTypes of={TabsTab} />
5151

52-
#### `Tabs.Content`
52+
#### `Tabs.Panel`
5353

54-
<ArgTypes of={TabContent} />
54+
<ArgTypes of={TabsPanel} />
5555

5656
### Størrelse på ikon
5757

‎packages/react/src/components/Tabs/Tabs.stories.tsx

+17-17
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,20 @@ import { Tabs } from '.';
1414

1515
export default {
1616
title: 'Komponenter/Tabs',
17-
component: Tabs.Root,
17+
component: Tabs,
1818
} as Meta;
1919

20-
export const Preview: StoryFn<typeof Tabs.Root> = (args) => (
21-
<Tabs.Root {...args}>
20+
export const Preview: StoryFn<typeof Tabs> = (args) => (
21+
<Tabs {...args}>
2222
<Tabs.List>
2323
<Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
2424
<Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
2525
<Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
2626
</Tabs.List>
27-
<Tabs.Content value='value1'>content 1</Tabs.Content>
28-
<Tabs.Content value='value2'>content 2</Tabs.Content>
29-
<Tabs.Content value='value3'>content 3</Tabs.Content>
30-
</Tabs.Root>
27+
<Tabs.Panel value='value1'>content 1</Tabs.Panel>
28+
<Tabs.Panel value='value2'>content 2</Tabs.Panel>
29+
<Tabs.Panel value='value3'>content 3</Tabs.Panel>
30+
</Tabs>
3131
);
3232

3333
Preview.args = {
@@ -36,7 +36,7 @@ Preview.args = {
3636
};
3737

3838
export const IconsOnly: StoryFn<typeof Tabs> = () => (
39-
<Tabs.Root defaultValue='value1'>
39+
<Tabs defaultValue='value1'>
4040
<Tabs.List>
4141
<Tabs.Tab value='value1'>
4242
<AirplaneIcon title='Airplane' fontSize='1.75rem' />
@@ -48,10 +48,10 @@ export const IconsOnly: StoryFn<typeof Tabs> = () => (
4848
<DogIcon title='Dog' fontSize='1.75rem' />
4949
</Tabs.Tab>
5050
</Tabs.List>
51-
<Tabs.Content value='value1'>content 1</Tabs.Content>
52-
<Tabs.Content value='value2'>content 2</Tabs.Content>
53-
<Tabs.Content value='value3'>content 3</Tabs.Content>
54-
</Tabs.Root>
51+
<Tabs.Panel value='value1'>content 1</Tabs.Panel>
52+
<Tabs.Panel value='value2'>content 2</Tabs.Panel>
53+
<Tabs.Panel value='value3'>content 3</Tabs.Panel>
54+
</Tabs>
5555
);
5656

5757
export const Controlled: StoryFn<typeof Tabs> = () => {
@@ -63,7 +63,7 @@ export const Controlled: StoryFn<typeof Tabs> = () => {
6363
Choose Tab 3
6464
</Button>
6565
<br />
66-
<Tabs.Root value={value} onChange={setValue}>
66+
<Tabs value={value} onChange={setValue}>
6767
<Tabs.List>
6868
<Tabs.Tab value='value1'>
6969
<BellIcon fontSize='1.75rem' />
@@ -78,10 +78,10 @@ export const Controlled: StoryFn<typeof Tabs> = () => {
7878
Tab 3
7979
</Tabs.Tab>
8080
</Tabs.List>
81-
<Tabs.Content value='value1'>content 1</Tabs.Content>
82-
<Tabs.Content value='value2'>content 2</Tabs.Content>
83-
<Tabs.Content value='value3'>content 3</Tabs.Content>
84-
</Tabs.Root>
81+
<Tabs.Panel value='value1'>content 1</Tabs.Panel>
82+
<Tabs.Panel value='value2'>content 2</Tabs.Panel>
83+
<Tabs.Panel value='value3'>content 3</Tabs.Panel>
84+
</Tabs>
8585
</>
8686
);
8787
};

‎packages/react/src/components/Tabs/Tabs.test.tsx

+15-15
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@ const user = userEvent.setup();
88
describe('Tabs', () => {
99
test('can navigate tabs with keyboard', async () => {
1010
render(
11-
<Tabs.Root>
11+
<Tabs>
1212
<Tabs.List>
1313
<Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
1414
<Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
1515
</Tabs.List>
16-
<Tabs.Content value='value1'>content 1</Tabs.Content>
17-
<Tabs.Content value='value2'>content 2</Tabs.Content>
18-
</Tabs.Root>,
16+
<Tabs.Panel value='value1'>content 1</Tabs.Panel>
17+
<Tabs.Panel value='value2'>content 2</Tabs.Panel>
18+
</Tabs>,
1919
);
2020

2121
const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
@@ -30,14 +30,14 @@ describe('Tabs', () => {
3030

3131
test('renders content based on value', async () => {
3232
render(
33-
<Tabs.Root defaultValue='value1'>
33+
<Tabs defaultValue='value1'>
3434
<Tabs.List>
3535
<Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
3636
<Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
3737
</Tabs.List>
38-
<Tabs.Content value='value1'>content 1</Tabs.Content>
39-
<Tabs.Content value='value2'>content 2</Tabs.Content>
40-
</Tabs.Root>,
38+
<Tabs.Panel value='value1'>content 1</Tabs.Panel>
39+
<Tabs.Panel value='value2'>content 2</Tabs.Panel>
40+
</Tabs>,
4141
);
4242

4343
expect(screen.queryByText('content 1')).toBeVisible();
@@ -49,12 +49,12 @@ describe('Tabs', () => {
4949

5050
test('item renders with correct aria attributes', async () => {
5151
render(
52-
<Tabs.Root defaultValue='value1'>
52+
<Tabs defaultValue='value1'>
5353
<Tabs.List>
5454
<Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
5555
<Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
5656
</Tabs.List>
57-
</Tabs.Root>,
57+
</Tabs>,
5858
);
5959

6060
const tab = screen.getByRole('tab', { name: 'Tab 2' });
@@ -63,13 +63,13 @@ describe('Tabs', () => {
6363
expect(tab).toHaveAttribute('aria-selected', 'true');
6464
});
6565

66-
test('renders ReactNodes as children when TabContents value is selected', () => {
66+
test('renders ReactNodes as children when TabsPanels value is selected', () => {
6767
render(
68-
<Tabs.Root defaultValue='value1'>
69-
<Tabs.Content value='value1'>
68+
<Tabs defaultValue='value1'>
69+
<Tabs.Panel value='value1'>
7070
<div>content 1</div>
71-
</Tabs.Content>
72-
</Tabs.Root>,
71+
</Tabs.Panel>
72+
</Tabs>,
7373
);
7474

7575
const content = screen.queryByText('content 1');

0 commit comments

Comments
 (0)