From 2d7da473ad202deb59dc99f1ef1123f861801fc9 Mon Sep 17 00:00:00 2001
From: tarzen-chugh <tarzen.chugh@vimeo.com>
Date: Mon, 12 Jun 2023 20:52:34 +0530
Subject: [PATCH 1/2] Adding data-id to tab component

---
 src/components/Button/Button.tsx         | 1 +
 src/components/Tabs/Tabs.props.story.tsx | 3 +++
 src/components/Tabs/Tabs.tsx             | 1 +
 src/utils/HOCs/IrisProps.ts              | 1 +
 4 files changed, 6 insertions(+)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index f59ba2754..2f52c4da2 100755
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -82,6 +82,7 @@ function ButtonComponent({
       theme={theme}
       type={type}
       variant={variant}
+      data-id={props.dataId}
       onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
         //Safari Button Focus Fix
         buttonRef?.current?.focus();
diff --git a/src/components/Tabs/Tabs.props.story.tsx b/src/components/Tabs/Tabs.props.story.tsx
index 2115cd4d6..1f210d36a 100644
--- a/src/components/Tabs/Tabs.props.story.tsx
+++ b/src/components/Tabs/Tabs.props.story.tsx
@@ -20,6 +20,7 @@ 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>
@@ -27,6 +28,7 @@ export function Format({ args }) {
       </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
index 371b069f3..a0447abec 100755
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -61,6 +61,7 @@ function TabsComponent({
         format={format}
         index={i}
         label={props.label}
+        dataId={props.dataId}
         selected={activeTab === i}
         variant={variant}
         pill={pill}
diff --git a/src/utils/HOCs/IrisProps.ts b/src/utils/HOCs/IrisProps.ts
index fada6dfa4..0d398832a 100644
--- a/src/utils/HOCs/IrisProps.ts
+++ b/src/utils/HOCs/IrisProps.ts
@@ -35,6 +35,7 @@ type IrisElementProps<DOMElement = HTMLDivElement> = {
   children?: ReactNode;
   className?: string;
   data?: string;
+  dataId?: string;
   debug?: boolean;
   disabled?: boolean;
   forwardRef?: Ref<DOMElement>;

From 3851a30f668282121d7f38bc4889cac1d05164d2 Mon Sep 17 00:00:00 2001
From: tarzen-chugh <tarzen.chugh@vimeo.com>
Date: Thu, 15 Jun 2023 20:35:32 +0530
Subject: [PATCH 2/2] Adding data-id to li element

---
 src/components/Button/Button.tsx  | 1 -
 src/components/Tabs/Tabs.tsx      | 2 +-
 src/components/Tabs/Tabs.types.ts | 1 +
 src/utils/HOCs/IrisProps.ts       | 1 -
 4 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 2f52c4da2..f59ba2754 100755
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -82,7 +82,6 @@ function ButtonComponent({
       theme={theme}
       type={type}
       variant={variant}
-      data-id={props.dataId}
       onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
         //Safari Button Focus Fix
         buttonRef?.current?.focus();
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index a0447abec..e728cf019 100755
--- 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
@@ -61,7 +62,6 @@ function TabsComponent({
         format={format}
         index={i}
         label={props.label}
-        dataId={props.dataId}
         selected={activeTab === i}
         variant={variant}
         pill={pill}
diff --git a/src/components/Tabs/Tabs.types.ts b/src/components/Tabs/Tabs.types.ts
index 033d9df28..80f51115e 100644
--- 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
diff --git a/src/utils/HOCs/IrisProps.ts b/src/utils/HOCs/IrisProps.ts
index 0d398832a..fada6dfa4 100644
--- a/src/utils/HOCs/IrisProps.ts
+++ b/src/utils/HOCs/IrisProps.ts
@@ -35,7 +35,6 @@ type IrisElementProps<DOMElement = HTMLDivElement> = {
   children?: ReactNode;
   className?: string;
   data?: string;
-  dataId?: string;
   debug?: boolean;
   disabled?: boolean;
   forwardRef?: Ref<DOMElement>;