Adding data-id to tab component (#278)

vimeo · Jun 15, 2023 · abdc5d8 · abdc5d8
1 parent 0fc808b
commit abdc5d8
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 0 deletions.
diff --git a/src/components/Tabs/Tabs.props.story.tsx b/src/components/Tabs/Tabs.props.story.tsx
@@ -20,13 +20,15 @@ export function Format({ args }) {
     <Tabs format={format} key={key} {...args}>
       <Tabs.Panel
         label="Tab 0"
+        dataId="tab-0"
         onActivate={() => console.log('Clicked Tab 0')}
       >
         <Paragraph size="2">Lorem kittsum dolor sit ameow.</Paragraph>
         <img src="http://placekitten.com/1000/400" width="100%" />
       </Tabs.Panel>
       <Tabs.Panel
         label="Tab 1"
+        dataId="tab-1"
         active
         onActivate={() => console.log('Clicked Tab 1')}
       >
@@ -35,6 +37,7 @@ export function Format({ args }) {
       </Tabs.Panel>
       <Tabs.Panel
         label="Tab 2"
+        dataId="tab-2"
         onActivate={() => console.log('Clicked Tab 2')}
       >
         <Paragraph size="2">Lorem kittsum dolor sit ameow.</Paragraph>

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -54,6 +54,7 @@ function TabsComponent({
     <li
       key={i}
       onClick={() => activeTabSet(i)}
+      data-id={props.dataId}
       style={{ flex: '1 0 0' }}
     >
       <NavItem

diff --git a/src/components/Tabs/Tabs.types.ts b/src/components/Tabs/Tabs.types.ts
@@ -27,6 +27,7 @@ export interface Minors {
 
 export interface PanelProps {
   label?: string;
+  dataId?: string;
   active?: boolean;
   /**
    * @deprecated