From 1694f8ecc3e28ef13e703416dc4f602c120cd56e Mon Sep 17 00:00:00 2001
From: Pranay Kothapalli <pranaykothapalli@gmail.com>
Date: Sun, 3 Nov 2024 10:41:48 +0530
Subject: [PATCH] Refactor TabTrigger component useContext usage

---
 .../ui/Tabs/fragments/TabTrigger.tsx          |  3 +-
 .../ui/Tabs/stories/Tabs.stories.js           | 30 +++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/Tabs/fragments/TabTrigger.tsx b/src/components/ui/Tabs/fragments/TabTrigger.tsx
index 5cc9f401..5f481930 100644
--- a/src/components/ui/Tabs/fragments/TabTrigger.tsx
+++ b/src/components/ui/Tabs/fragments/TabTrigger.tsx
@@ -17,7 +17,7 @@ export type TabTriggerProps = {
 
 const TabTrigger = ({ tab, className = '', ...props }: TabTriggerProps) => {
     // use context
-    const { tabs, previousTab, nextTab, activeTab, setActiveTab, rootClass } = useContext(TabsRootContext);
+    const { previousTab, nextTab, activeTab, setActiveTab, rootClass } = useContext(TabsRootContext);
     const ref = useRef<HTMLButtonElement>(null);
 
     const isActive = activeTab === tab.value;
@@ -54,6 +54,7 @@ const TabTrigger = ({ tab, className = '', ...props }: TabTriggerProps) => {
             onFocus={() => handleFocus(tab)}
             tabIndex={isActive ? 0 : -1}
             data-rad-ui-batch-element
+
         >
             {tab.label}
         </button>
diff --git a/src/components/ui/Tabs/stories/Tabs.stories.js b/src/components/ui/Tabs/stories/Tabs.stories.js
index 78680584..23a5dfea 100644
--- a/src/components/ui/Tabs/stories/Tabs.stories.js
+++ b/src/components/ui/Tabs/stories/Tabs.stories.js
@@ -1,6 +1,8 @@
 import Tabs from '../Tabs';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
+import Button from '~/components/ui/Button/Button';
+
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
     title: 'WIP/Tabs',
@@ -37,3 +39,31 @@ export const All = {
         ]
     }
 };
+
+const TabInTabOutTemplate = (args) => {
+    return <SandboxEditor>
+        <Button>Click me</Button>
+        <Tabs {...args} />
+        <Button>Click me</Button>
+    </SandboxEditor>;
+};
+
+export const TabInTabOut = TabInTabOutTemplate.bind({});
+TabInTabOut.args = {
+    tabs: [{
+        label: 'Tabbing In',
+        value: 'tab_in_1',
+        content: 'Focus on the first button, press tab to move to the Tab component, it tabs into the selected tab. '
+
+    },
+    {
+        label: <div className='flex items-center space-x-2'>  <span>Tab Out</span> <ArrowIcon/></div>,
+        value: 'tab_out_2',
+        content: <div className='text-gray-1000'>
+            Once you tab out of the Tab component, you will be focused on the second button.
+        </div>
+    }
+
+    ]
+
+};