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
digdir · Sep 18, 2024 · ed179a1 · ed179a1
1 parent 7dceadd
commit ed179a1
Show file tree

Hide file tree

Showing 17 changed files with 248 additions and 284 deletions.
diff --git a/.changeset/gold-chairs-jog.md b/.changeset/gold-chairs-jog.md
@@ -0,0 +1,8 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Tabs:
+- Renames `Tabs.Root` to `Tabs`
+- Renames `Tabs.Content` to `Tabs.Panel`
diff --git a/apps/theme/components/Previews/Components/Components.tsx b/apps/theme/components/Previews/Components/Components.tsx
@@ -309,13 +309,13 @@ export const Components = () => {
         />
       </div>
       <div className={cl(classes.card, classes.tabs)}>
-        <Tabs.Root defaultValue='value1' size='sm'>
+        <Tabs defaultValue='value1' size='sm'>
           <Tabs.List>
             <Tabs.Tab value='value1'>Min profil</Tabs.Tab>
             <Tabs.Tab value='value2'>Tjenester</Tabs.Tab>
             <Tabs.Tab value='value3'>Innstillinger</Tabs.Tab>
           </Tabs.List>
-        </Tabs.Root>
+        </Tabs>
         <Paragraph size='sm'>
           For å kunne bli registrert i{' '}
           <Link href='#' color='neutral'>

diff --git a/packages/css/tabs.css b/packages/css/tabs.css
@@ -17,7 +17,7 @@
   }
 }
 
-.ds-tabs__content {
+.ds-tabs__panel {
   padding: var(--dsc-tabs-content-padding);
   color: var(--dsc-tabs-content-color);
 }

diff --git a/packages/react/src/components/Badge/Badge.stories.tsx b/packages/react/src/components/Badge/Badge.stories.tsx
@@ -134,7 +134,7 @@ export const Status: Story = (args) => (
 );
 
 export const InTabs: Story = (args) => (
-  <Tabs.Root defaultValue='value1' size='md'>
+  <Tabs defaultValue='value1' size='md'>
     <Tabs.List>
       <Tabs.Tab value='value1'>
         <HeartFillIcon fontSize='1.75rem' />
@@ -148,10 +148,10 @@ export const InTabs: Story = (args) => (
         <Badge count={2} color='neutral' />
       </Tabs.Tab>
     </Tabs.List>
-    <Tabs.Content value='value1'>content 1</Tabs.Content>
-    <Tabs.Content value='value2'>content 2</Tabs.Content>
-    <Tabs.Content value='value3'>content 3</Tabs.Content>
-  </Tabs.Root>
+    <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+    <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+    <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+  </Tabs>
 );
 
 export const InButton: Story = (args) => (

diff --git a/packages/react/src/components/Tabs/Tab.tsx b/packages/react/src/components/Tabs/Tab.tsx
diff --git a/packages/react/src/components/Tabs/TabList.tsx b/packages/react/src/components/Tabs/TabList.tsx
diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx
@@ -1,8 +1,8 @@
 import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/blocks';
 
-import { TabsRoot } from './TabsRoot';
-import { Tab } from './Tab';
-import { TabContent } from './TabContent';
+import { Tabs } from './Tabs';
+import { TabsTab } from './TabsTab';
+import { TabsPanel } from './TabsPanel';
 import * as TabsStories from './Tabs.stories';
 
 <Meta of={TabsStories} />
@@ -19,16 +19,16 @@ Tabs lar brukerne navigere mellom relaterte deler av innholdet, der én del vise
 ```tsx
 import { Tabs } from '@digdir/designsystemet-react';
 
-<Tabs.Root defaultValue='value1'>
+<Tabs defaultValue='value1'>
   <Tabs.List>
     <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
     <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
     <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
   </Tabs.List>
-  <Tabs.Content value='value1'>content 1</Tabs.Content>
-  <Tabs.Content value='value2'>content 2</Tabs.Content>
-  <Tabs.Content value='value3'>content 3</Tabs.Content>
-</Tabs.Root>;
+  <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+  <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+  <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+</Tabs>;
 ```
 
 ## Icons only
@@ -41,17 +41,17 @@ import { Tabs } from '@digdir/designsystemet-react';
 
 ### Props
 
-#### `Tabs.Root`
+#### `Tabs`
 
-<ArgTypes of={TabsRoot} />
+<ArgTypes of={Tabs} />
 
 #### `Tabs.Tab`
 
-<ArgTypes of={Tab} />
+<ArgTypes of={TabsTab} />
 
-#### `Tabs.Content`
+#### `Tabs.Panel`
 
-<ArgTypes of={TabContent} />
+<ArgTypes of={TabsPanel} />
 
 ### Størrelse på ikon
 

diff --git a/packages/react/src/components/Tabs/Tabs.stories.tsx b/packages/react/src/components/Tabs/Tabs.stories.tsx
@@ -14,20 +14,20 @@ import { Tabs } from '.';
 
 export default {
   title: 'Komponenter/Tabs',
-  component: Tabs.Root,
+  component: Tabs,
 } as Meta;
 
-export const Preview: StoryFn<typeof Tabs.Root> = (args) => (
-  <Tabs.Root {...args}>
+export const Preview: StoryFn<typeof Tabs> = (args) => (
+  <Tabs {...args}>
     <Tabs.List>
       <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
       <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
       <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
     </Tabs.List>
-    <Tabs.Content value='value1'>content 1</Tabs.Content>
-    <Tabs.Content value='value2'>content 2</Tabs.Content>
-    <Tabs.Content value='value3'>content 3</Tabs.Content>
-  </Tabs.Root>
+    <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+    <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+    <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+  </Tabs>
 );
 
 Preview.args = {
@@ -36,7 +36,7 @@ Preview.args = {
 };
 
 export const IconsOnly: StoryFn<typeof Tabs> = () => (
-  <Tabs.Root defaultValue='value1'>
+  <Tabs defaultValue='value1'>
     <Tabs.List>
       <Tabs.Tab value='value1'>
         <AirplaneIcon title='Airplane' fontSize='1.75rem' />
@@ -48,10 +48,10 @@ export const IconsOnly: StoryFn<typeof Tabs> = () => (
         <DogIcon title='Dog' fontSize='1.75rem' />
       </Tabs.Tab>
     </Tabs.List>
-    <Tabs.Content value='value1'>content 1</Tabs.Content>
-    <Tabs.Content value='value2'>content 2</Tabs.Content>
-    <Tabs.Content value='value3'>content 3</Tabs.Content>
-  </Tabs.Root>
+    <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+    <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+    <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+  </Tabs>
 );
 
 export const Controlled: StoryFn<typeof Tabs> = () => {
@@ -63,7 +63,7 @@ export const Controlled: StoryFn<typeof Tabs> = () => {
         Choose Tab 3
       </Button>
       <br />
-      <Tabs.Root value={value} onChange={setValue}>
+      <Tabs value={value} onChange={setValue}>
         <Tabs.List>
           <Tabs.Tab value='value1'>
             <BellIcon fontSize='1.75rem' />
@@ -78,10 +78,10 @@ export const Controlled: StoryFn<typeof Tabs> = () => {
             Tab 3
           </Tabs.Tab>
         </Tabs.List>
-        <Tabs.Content value='value1'>content 1</Tabs.Content>
-        <Tabs.Content value='value2'>content 2</Tabs.Content>
-        <Tabs.Content value='value3'>content 3</Tabs.Content>
-      </Tabs.Root>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
     </>
   );
 };
diff --git a/packages/react/src/components/Tabs/Tabs.test.tsx b/packages/react/src/components/Tabs/Tabs.test.tsx
@@ -8,14 +8,14 @@ const user = userEvent.setup();
 describe('Tabs', () => {
   test('can navigate tabs with keyboard', async () => {
     render(
-      <Tabs.Root>
+      <Tabs>
         <Tabs.List>
           <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
           <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
         </Tabs.List>
-        <Tabs.Content value='value1'>content 1</Tabs.Content>
-        <Tabs.Content value='value2'>content 2</Tabs.Content>
-      </Tabs.Root>,
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+      </Tabs>,
     );
 
     const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
@@ -30,14 +30,14 @@ describe('Tabs', () => {
 
   test('renders content based on value', async () => {
     render(
-      <Tabs.Root defaultValue='value1'>
+      <Tabs defaultValue='value1'>
         <Tabs.List>
           <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
           <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
         </Tabs.List>
-        <Tabs.Content value='value1'>content 1</Tabs.Content>
-        <Tabs.Content value='value2'>content 2</Tabs.Content>
-      </Tabs.Root>,
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+      </Tabs>,
     );
 
     expect(screen.queryByText('content 1')).toBeVisible();
@@ -49,12 +49,12 @@ describe('Tabs', () => {
 
   test('item renders with correct aria attributes', async () => {
     render(
-      <Tabs.Root defaultValue='value1'>
+      <Tabs defaultValue='value1'>
         <Tabs.List>
           <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
           <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
         </Tabs.List>
-      </Tabs.Root>,
+      </Tabs>,
     );
 
     const tab = screen.getByRole('tab', { name: 'Tab 2' });
@@ -63,13 +63,13 @@ describe('Tabs', () => {
     expect(tab).toHaveAttribute('aria-selected', 'true');
   });
 
-  test('renders ReactNodes as children when TabContents value is selected', () => {
+  test('renders ReactNodes as children when TabsPanels value is selected', () => {
     render(
-      <Tabs.Root defaultValue='value1'>
-        <Tabs.Content value='value1'>
+      <Tabs defaultValue='value1'>
+        <Tabs.Panel value='value1'>
           <div>content 1</div>
-        </Tabs.Content>
-      </Tabs.Root>,
+        </Tabs.Panel>
+      </Tabs>,
     );
 
     const content = screen.queryByText('content 1');