From 65ba2500a5cffb030b9556b8efc1fec101c0f6cd Mon Sep 17 00:00:00 2001
From: Francesca Guiducci <francesca@doist.com>
Date: Fri, 26 Jul 2024 14:42:51 +0200
Subject: [PATCH 1/3] chore: Sample story to repro Tooltip not working when
 wrapping Tab component

---
 src/tabs/tabs.stories.mdx | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/tabs/tabs.stories.mdx b/src/tabs/tabs.stories.mdx
index de8082756..910f9caec 100644
--- a/src/tabs/tabs.stories.mdx
+++ b/src/tabs/tabs.stories.mdx
@@ -3,6 +3,7 @@ import { Tabs, TabList, Tab, TabPanel, TabAwareSlot } from './tabs'
 import { Box } from '../box'
 import { Text } from '../text'
 import { Columns, Column } from '../columns'
+import { Tooltip } from '../tooltip'
 
 <Meta
     title="Design system/Tabs"
@@ -291,3 +292,41 @@ Note that when combined with the `renderMode="active"` prop, the entire tabpanel
         </Tabs>
     </Story>
 </Canvas>
+
+### Wrapped by Tooltip component
+
+This is just a sample story to show you that Tooltip outside Tab does not work, but Tooltip inside Tab works.
+
+<Canvas withToolbar>
+    <Story parameters={{ docs: { source: { type: 'code' } } }} name="Wrapped by Tooltip component">
+        <Tabs>
+            <TabList aria-label="Multiple tablist example tabs">
+                <Tooltip content={'Tooltip for Tab 1'}>
+                    <Tab id="tab1">
+                        <Box>Tab 1</Box>
+                    </Tab>
+                </Tooltip>
+
+                <Tab id="tab2">
+                    <Tooltip content={'Tooltip for Tab 2'}>
+                        <Box>Tab 2</Box>
+                    </Tooltip>
+                </Tab>
+            </TabList>
+            <TabPanel
+                id="tab1"
+                renderMode="active"
+                render={<Box paddingX="small" paddingY="xlarge" />}
+            >
+                <Text>Content of tab 1</Text>
+            </TabPanel>
+            <TabPanel
+                id="tab2"
+                renderMode="active"
+                render={<Box paddingX="small" paddingY="xlarge" />}
+            >
+                <Text>Content of tab 2</Text>
+            </TabPanel>
+        </Tabs>
+    </Story>
+</Canvas>

From 5622d77b6535b4d4ae697684af365f7fad35de2d Mon Sep 17 00:00:00 2001
From: Francesca Guiducci <francesca@doist.com>
Date: Fri, 26 Jul 2024 14:54:16 +0200
Subject: [PATCH 2/3] chore: Simplify story

---
 src/tabs/tabs.stories.mdx | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/tabs/tabs.stories.mdx b/src/tabs/tabs.stories.mdx
index 910f9caec..ec120018b 100644
--- a/src/tabs/tabs.stories.mdx
+++ b/src/tabs/tabs.stories.mdx
@@ -301,31 +301,26 @@ This is just a sample story to show you that Tooltip outside Tab does not work,
     <Story parameters={{ docs: { source: { type: 'code' } } }} name="Wrapped by Tooltip component">
         <Tabs>
             <TabList aria-label="Multiple tablist example tabs">
-                <Tooltip content={'Tooltip for Tab 1'}>
+                <Tooltip content="Tooltip outside Tab">
                     <Tab id="tab1">
                         <Box>Tab 1</Box>
                     </Tab>
                 </Tooltip>
-
                 <Tab id="tab2">
-                    <Tooltip content={'Tooltip for Tab 2'}>
+                    <Tooltip content="Tooltip inside Tab">
                         <Box>Tab 2</Box>
                     </Tooltip>
                 </Tab>
             </TabList>
-            <TabPanel
-                id="tab1"
-                renderMode="active"
-                render={<Box paddingX="small" paddingY="xlarge" />}
-            >
-                <Text>Content of tab 1</Text>
+            <TabPanel id="tab1">
+                <Box paddingX="small" paddingY="xlarge">
+                    <Text>Content of tab 1</Text>
+                </Box>
             </TabPanel>
-            <TabPanel
-                id="tab2"
-                renderMode="active"
-                render={<Box paddingX="small" paddingY="xlarge" />}
-            >
-                <Text>Content of tab 2</Text>
+            <TabPanel id="tab2">
+                <Box paddingX="small" paddingY="xlarge">
+                    <Text>Content of tab 2</Text>
+                </Box>
             </TabPanel>
         </Tabs>
     </Story>

From e2b56f8727692061c9845da51532670fd404877e Mon Sep 17 00:00:00 2001
From: Francesca Guiducci <francesca@doist.com>
Date: Fri, 26 Jul 2024 15:05:17 +0200
Subject: [PATCH 3/3] Update src/tabs/tabs.stories.mdx

---
 src/tabs/tabs.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tabs/tabs.stories.mdx b/src/tabs/tabs.stories.mdx
index ec120018b..0d7133e8d 100644
--- a/src/tabs/tabs.stories.mdx
+++ b/src/tabs/tabs.stories.mdx
@@ -300,7 +300,7 @@ This is just a sample story to show you that Tooltip outside Tab does not work,
 <Canvas withToolbar>
     <Story parameters={{ docs: { source: { type: 'code' } } }} name="Wrapped by Tooltip component">
         <Tabs>
-            <TabList aria-label="Multiple tablist example tabs">
+            <TabList aria-label="Wrapped by Tooltip component">
                 <Tooltip content="Tooltip outside Tab">
                     <Tab id="tab1">
                         <Box>Tab 1</Box>