Merge branch 'main' of github.com:adobe/react-spectrum into spectrum-2

alecmev · Jul 29, 2024 · c795330 · c795330
2 parents 41be55b + 14f324f
commit c795330
Showing 1 changed file with 49 additions and 0 deletions.
diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx
@@ -402,6 +402,55 @@ Links.story = {
   }
 };
 
+export const Nested = (props) => {
+  return (
+    <Tabs aria-label="Some tabs" width={'500px'} {...props} >
+      <TabList>
+        <Item key="one">Tab 1</Item>
+        <Item key="two">Tab 2</Item>
+        <Item key="three">Tab 3</Item>
+        <Item key="four">Tab 4</Item>
+        <Item key="five">Tab 5</Item>
+      </TabList>
+      <TabPanels>
+        <Item key="one">
+          <Heading>Nested</Heading>
+          <Tabs {...props}>
+            <TabList>
+              <Item>Tab 1</Item>
+              <Item>Tab 2</Item>
+            </TabList>
+            <TabPanels>
+              <Item>
+                <TextField label="Tab 1" />
+              </Item>
+              <Item>
+                <TextField label="Tab 2" />
+              </Item>
+            </TabPanels>
+          </Tabs>
+        </Item>
+        <Item key="two">
+          <Heading>Bar</Heading>
+          <Text>To bar or not to bar.</Text>
+        </Item>
+        <Item key="three">
+          <Heading>Foobar</Heading>
+          <Text>That is the foobar.</Text>
+        </Item>
+        <Item key="four">
+          <Heading>Foofoo</Heading>
+          <Text>Once more foo upon the foo.</Text>
+        </Item>
+        <Item key="five">
+          <Heading>Barfoo</Heading>
+          <Text>What's he that barfoos so?</Text>
+        </Item>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
 function render(props = {}) {
   return (
     <Tabs