From 82a7368e9e6501791d82c7d3a8c7555e1d409f0d Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 31 Jul 2025 14:28:40 -0700
Subject: [PATCH 1/4] fix: support collapse behavior when customizing S2 tab
 layout

---
 packages/@react-spectrum/s2/src/Tabs.tsx      | 57 ++++++++++++++-----
 .../s2/stories/Tabs.stories.tsx               | 56 +++++++++++++++++-
 2 files changed, 99 insertions(+), 14 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 733013b49a3..1f5f7d1baf0 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -82,7 +82,16 @@ const InternalTabsContext = createContext<Partial<TabsProps> & {
   prevRef?: RefObject<DOMRect | null>,
   selectedKey?: Key | null
 }>({});
-const CollapseContext = createContext({
+
+interface CollapseContextType {
+  showTabs: boolean;
+  menuId: string;
+  valueId: string;
+  tabs?: Array<Node<any>> | undefined;
+  listRef?: RefObject<HTMLDivElement | null>;
+}
+
+const CollapseContext = createContext<CollapseContextType>({
   showTabs: true,
   menuId: '',
   valueId: ''
@@ -199,22 +208,42 @@ const tablist = style({
 });
 
 export function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {
-  let {showTabs} = useContext(CollapseContext) ?? {};
+  let {showTabs, tabs, listRef} = useContext(CollapseContext) ?? {};
+  let {density, orientation, labelBehavior} = useContext(InternalTabsContext);
 
   if (showTabs) {
-    return <TabListInner {...props} />;
+    return (
+      <>
+        <TabListInner {...props} />
+      </>);
   }
-  return null;
+  
+  return (
+    <div className={style({flexGrow: 1, position: 'relative'})}>
+      <div className={tablist({orientation, labelBehavior, density})}>
+        <HiddenTabs items={tabs} density={density} listRef={listRef} />
+      </div>
+      <TabsMenu
+        // id={menuId}
+        // valueId={valueId}
+        items={tabs}
+        // onSelectionChange={onSelectionChange}
+        aria-label={props['aria-label']}
+        aria-describedby={props['aria-labelledby']} />
+    </div>
+  );
 }
 
 function TabListInner<T extends object>(props: TabListProps<T>) {
   let {
     tablistRef,
+    orientation,
     density,
     labelBehavior,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   } = useContext(InternalTabsContext) ?? {};
+  let {showTabs, tabs, listRef} = useContext(CollapseContext) ?? {};
 
   return (
     <div
@@ -227,6 +256,9 @@ function TabListInner<T extends object>(props: TabListProps<T>) {
           flexShrink: 0,
           minWidth: 'min'
         }, getAllowedOverrides())(null, props.styles)}>
+      <div className={tablist({orientation, labelBehavior, density})}>
+        <HiddenTabs items={tabs} density={density} listRef={listRef} />
+      </div>
       <RACTabList
         {...props}
         aria-label={ariaLabel}
@@ -519,7 +551,7 @@ let HiddenTabs = function (props: {
   size?: string,
   density?: 'compact' | 'regular'
 }) {
-  let {listRef, items, size, density} = props;
+  let {listRef, items = [], size, density} = props;
 
   return (
     <div
@@ -672,6 +704,7 @@ let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collect
   let valueId = useId();
 
   let contents: ReactNode;
+
   if (showItems) {
     contents = (
       <RACTabs
@@ -683,28 +716,26 @@ let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collect
   } else {
     contents = (
       <>
-        <TabsMenu
+        {/* <TabsMenu
           id={menuId}
           valueId={valueId}
           items={children}
           onSelectionChange={onSelectionChange}
           aria-label={props['aria-label']}
-          aria-describedby={props['aria-labelledby']} />
-        <CollapseContext.Provider value={{showTabs: false, menuId, valueId}}>
+          aria-describedby={props['aria-labelledby']} /> */}
+        <CollapseContext.Provider value={{showTabs: false, tabs: children, menuId, valueId, listRef: listRef}}>
           {props.children}
         </CollapseContext.Provider>
       </>
     );
   }
 
+  // console.log(children)
   return (
     <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>
-      <div className={tablist({orientation, labelBehavior, density})}>
-        <HiddenTabs items={children} density={density} listRef={listRef} />
-      </div>
-      <CollapseContext.Provider value={{showTabs: true, menuId, valueId}}>
+      <CollapseContext.Provider value={{showTabs: true, menuId, valueId, tabs: children, listRef: listRef}}>
         {contents}
       </CollapseContext.Provider>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index 2e68ba5d3e7..1d4b15e6907 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -18,7 +18,9 @@ import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import {ReactElement} from 'react';
 import {style} from '../style' with { type: 'macro' };
-import {Tab, TabList, TabPanel, Tabs, TabsProps} from '../src';
+import {Button, Tab, TabList, TabPanel, Tabs, TabsProps} from '../src';
+import React from 'react';
+import { tab } from '@testing-library/user-event/dist/cjs/setup/directApi.js';
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs,
@@ -148,3 +150,55 @@ export const Dynamic: Story = {
     </div>
   )
 };
+
+function ExampleTest(props) {
+  let [tabs, setTabs] = React.useState([
+    {id: 1, title: 'Tab 1', content: 'Tab body 1'},
+    {id: 2, title: 'Tab 2', content: 'Tab body 2'},
+    {id: 3, title: 'Tab 3', content: 'Tab body 3'}
+  ]);
+
+  let addTab = () => {
+    setTabs(tabs => [
+      ...tabs,
+      {
+        id: tabs.length + 1,
+        title: `Tab ${tabs.length + 1}`,
+        content: `Tab body ${tabs.length + 1}`
+      }
+    ]);
+  };
+
+  let removeTab = () => {
+    if (tabs.length > 1) {
+      setTabs(tabs => tabs.slice(0, -1));
+    }
+  };
+
+  return (
+    <div className={style({width: 600})}>
+      <Tabs {...props} aria-label="Tabs">
+        <div className={style({display: 'flex', alginSelf: 'stretch'})}>
+          <TabList items={tabs} styles={style({flexShrink: 1, flexGrow: 1, flexBasis: 'auto'})}>
+            {tab => <Tab id={tab.id}>{tab.title}</Tab>}
+          </TabList>
+          <div className={style({display: 'flex', alignItems: 'center', flexShrink: 0, flexGrow: 0, flexBasis: 'auto'})}>
+            <Button onPress={addTab}>Add tab</Button>
+            <Button onPress={removeTab}>Remove tab</Button>
+          </div>
+        </div>
+        <Collection items={tabs}>
+            {tab => (
+              <TabPanel id={tab.id}>
+                {tab.content}
+              </TabPanel>
+          )}
+          </Collection>
+      </Tabs>
+    </div>
+  )
+}
+
+export const AddRemoveTabs: Story = {
+  render: (args) => <ExampleTest {...args} />
+}

From 417954c4e2f1108d8d19b3c9aaf7f87b61ad94f6 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Fri, 1 Aug 2025 15:16:35 -0700
Subject: [PATCH 2/4] fix bugs

---
 packages/@react-spectrum/s2/src/Tabs.tsx      | 59 ++++++++++---------
 .../s2/stories/Tabs.stories.tsx               | 20 +++----
 2 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 1f5f7d1baf0..8c83f9aaad5 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -84,17 +84,22 @@ const InternalTabsContext = createContext<Partial<TabsProps> & {
 }>({});
 
 interface CollapseContextType {
-  showTabs: boolean;
-  menuId: string;
-  valueId: string;
-  tabs?: Array<Node<any>> | undefined;
-  listRef?: RefObject<HTMLDivElement | null>;
+  showTabs: boolean,
+  menuId: string,
+  valueId: string,
+  ariaLabel?: string | undefined,
+  ariaDescribedBy?: string | undefined,
+  tabs: Array<Node<any>>,
+  listRef: RefObject<HTMLDivElement | null>,
+  onSelectionChange?: (key: Key) => void
 }
 
 const CollapseContext = createContext<CollapseContextType>({
   showTabs: true,
   menuId: '',
-  valueId: ''
+  valueId: '',
+  tabs: [],
+  listRef: {current: null}
 });
 
 const tabs = style({
@@ -207,29 +212,33 @@ const tablist = style({
   minWidth: 'min'
 });
 
+const tablistWrapper = style({
+  position: 'relative',
+  minWidth: 'min',
+  flexShrink: 0,
+  flexGrow: 0
+}, getAllowedOverrides());
+
 export function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {
-  let {showTabs, tabs, listRef} = useContext(CollapseContext) ?? {};
+  let {showTabs, menuId, valueId, tabs, listRef, onSelectionChange, ariaLabel, ariaDescribedBy} = useContext(CollapseContext) ?? {};
   let {density, orientation, labelBehavior} = useContext(InternalTabsContext);
 
   if (showTabs) {
-    return (
-      <>
-        <TabListInner {...props} />
-      </>);
+    return <TabListInner {...props} />;
   }
   
   return (
-    <div className={style({flexGrow: 1, position: 'relative'})}>
+    <div className={tablistWrapper(null, props.styles)}>
       <div className={tablist({orientation, labelBehavior, density})}>
         <HiddenTabs items={tabs} density={density} listRef={listRef} />
       </div>
       <TabsMenu
-        // id={menuId}
-        // valueId={valueId}
+        id={menuId}
+        valueId={valueId}
         items={tabs}
-        // onSelectionChange={onSelectionChange}
-        aria-label={props['aria-label']}
-        aria-describedby={props['aria-labelledby']} />
+        onSelectionChange={onSelectionChange}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy} />
     </div>
   );
 }
@@ -243,19 +252,14 @@ function TabListInner<T extends object>(props: TabListProps<T>) {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   } = useContext(InternalTabsContext) ?? {};
-  let {showTabs, tabs, listRef} = useContext(CollapseContext) ?? {};
+  let {tabs, listRef} = useContext(CollapseContext) ?? {};
 
   return (
     <div
       style={props.UNSAFE_style}
       className={
         (props.UNSAFE_className || '') +
-        style({
-          position: 'relative',
-          flexGrow: 0,
-          flexShrink: 0,
-          minWidth: 'min'
-        }, getAllowedOverrides())(null, props.styles)}>
+        tablistWrapper(null, props.styles)}>
       <div className={tablist({orientation, labelBehavior, density})}>
         <HiddenTabs items={tabs} density={density} listRef={listRef} />
       </div>
@@ -644,7 +648,7 @@ let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionCha
 };
 
 let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {
-  let {density = 'regular', orientation = 'horizontal', labelBehavior = 'show', onSelectionChange} = props;
+  let {orientation = 'horizontal', onSelectionChange} = props;
   let [showItems, _setShowItems] = useState(true);
   showItems = orientation === 'vertical' ? true : showItems;
   let setShowItems = useCallback((value: boolean) => {
@@ -723,14 +727,13 @@ let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collect
           onSelectionChange={onSelectionChange}
           aria-label={props['aria-label']}
           aria-describedby={props['aria-labelledby']} /> */}
-        <CollapseContext.Provider value={{showTabs: false, tabs: children, menuId, valueId, listRef: listRef}}>
+        <CollapseContext.Provider value={{showTabs: false, tabs: children, menuId, valueId, listRef: listRef, onSelectionChange, ariaLabel: props['aria-label'], ariaDescribedBy: props['aria-labelledby']}}>
           {props.children}
         </CollapseContext.Provider>
       </>
     );
   }
 
-  // console.log(children)
   return (
     <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>
       <CollapseContext.Provider value={{showTabs: true, menuId, valueId, tabs: children, listRef: listRef}}>
@@ -738,4 +741,4 @@ let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collect
       </CollapseContext.Provider>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index 1d4b15e6907..f151c4067b9 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -11,16 +11,14 @@
  */
 
 import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg';
+import {Button, Tab, TabList, TabPanel, Tabs, TabsProps} from '../src';
 import {Collection, Text} from '@react-spectrum/s2';
 import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
 import {fn} from '@storybook/test';
 import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
-import {ReactElement} from 'react';
+import React, {ReactElement} from 'react';
 import {style} from '../style' with { type: 'macro' };
-import {Button, Tab, TabList, TabPanel, Tabs, TabsProps} from '../src';
-import React from 'react';
-import { tab } from '@testing-library/user-event/dist/cjs/setup/directApi.js';
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs,
@@ -188,17 +186,17 @@ function ExampleTest(props) {
           </div>
         </div>
         <Collection items={tabs}>
-            {tab => (
-              <TabPanel id={tab.id}>
-                {tab.content}
-              </TabPanel>
+          {tab => (
+            <TabPanel id={tab.id}>
+              {tab.content}
+            </TabPanel>
           )}
-          </Collection>
+        </Collection>
       </Tabs>
     </div>
-  )
+  );
 }
 
 export const AddRemoveTabs: Story = {
   render: (args) => <ExampleTest {...args} />
-}
+};

From c01f829683c99ed2a4bb40ba3fc8710a184b7304 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Fri, 1 Aug 2025 16:58:42 -0700
Subject: [PATCH 3/4] cleanup

---
 packages/@react-spectrum/s2/src/Tabs.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 8c83f9aaad5..b63f5c519d9 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -708,7 +708,6 @@ let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collect
   let valueId = useId();
 
   let contents: ReactNode;
-
   if (showItems) {
     contents = (
       <RACTabs
@@ -720,13 +719,6 @@ let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collect
   } else {
     contents = (
       <>
-        {/* <TabsMenu
-          id={menuId}
-          valueId={valueId}
-          items={children}
-          onSelectionChange={onSelectionChange}
-          aria-label={props['aria-label']}
-          aria-describedby={props['aria-labelledby']} /> */}
         <CollapseContext.Provider value={{showTabs: false, tabs: children, menuId, valueId, listRef: listRef, onSelectionChange, ariaLabel: props['aria-label'], ariaDescribedBy: props['aria-labelledby']}}>
           {props.children}
         </CollapseContext.Provider>

From a28fcd65032267df9db1c0d5bc4aad72a79f4dcb Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 5 Aug 2025 16:14:04 -0700
Subject: [PATCH 4/4] update types, add chromatic

---
 .../s2/chromatic/Tabs.stories.tsx             | 64 ++++++++++++++++++-
 packages/@react-spectrum/s2/src/Tabs.tsx      | 13 ++--
 .../s2/stories/Tabs.stories.tsx               | 15 +++--
 3 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
index 4850028a80c..163ae081cc3 100644
--- a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
@@ -11,13 +11,14 @@
  */
 
 import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg';
+import {Button, Tab, TabList, TabPanel, Tabs} from '../src';
+import {Collection, Text} from '@react-spectrum/s2';
 import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
 import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
-import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs';
-import {Text} from '@react-spectrum/s2';
 import {userEvent} from '@storybook/test';
+import {useState} from 'react';
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs,
@@ -186,3 +187,62 @@ export const Collasped = {
     await userEvent.keyboard('{Enter}');
   }
 };
+
+function AddRemoveExample(props) {
+  let [tabs, setTabs] = useState([
+    {id: 1, title: 'Tab 1', content: 'Tab body 1'},
+    {id: 2, title: 'Tab 2', content: 'Tab body 2'},
+    {id: 3, title: 'Tab 3', content: 'Tab body 3'}, 
+    {id: 4, title: 'Tab 4', content: 'Tab body 4'},
+    {id: 5, title: 'Tab 5', content: 'Tab body 5'},
+    {id: 6, title: 'Tab 6', content: 'Tab body 6'},
+    {id: 7, title: 'Tab 7', content: 'Tab body 7'},
+    {id: 8, title: 'Tab 8', content: 'Tab body 8'},
+    {id: 9, title: 'Tab 9', content: 'Tab body 9'}
+  ]);
+
+  let addTab = () => {
+    setTabs(tabs => [
+      ...tabs,
+      {
+        id: tabs.length + 1,
+        title: `Tab ${tabs.length + 1}`,
+        content: `Tab body ${tabs.length + 1}`
+      }
+    ]);
+  };
+
+  let removeTab = () => {
+    if (tabs.length > 1) {
+      setTabs(tabs => tabs.slice(0, -1));
+    }
+  };
+
+  return (
+    <div className={style({width: 600})}>
+      <Tabs {...props} aria-label="Tabs">
+        <div className={style({display: 'flex', alginSelf: 'stretch'})}>
+          <TabList items={tabs} styles={style({flexShrink: 1, flexGrow: 1, flexBasis: 'auto'})}>
+            {tab => <Tab id={tab.id}>{tab.title}</Tab>}
+          </TabList>
+          <div className={style({display: 'flex', alignItems: 'center', flexShrink: 0, flexGrow: 0, flexBasis: 'auto'})}>
+            <Button onPress={addTab}>Add tab</Button>
+            <Button onPress={removeTab}>Remove tab</Button>
+          </div>
+        </div>
+        <Collection items={tabs}>
+          {tab => (
+            <TabPanel id={tab.id}>
+              {tab.content}
+            </TabPanel>
+          )}
+        </Collection>
+      </Tabs>
+    </div>
+  );
+}
+
+export const CustomizedLayout = {
+  render: (args: any) => (<AddRemoveExample {...args} />
+  )
+};
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index b63f5c519d9..992bd15cac4 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -90,7 +90,7 @@ interface CollapseContextType {
   ariaLabel?: string | undefined,
   ariaDescribedBy?: string | undefined,
   tabs: Array<Node<any>>,
-  listRef: RefObject<HTMLDivElement | null>,
+  listRef?: RefObject<HTMLDivElement | null>,
   onSelectionChange?: (key: Key) => void
 }
 
@@ -98,8 +98,7 @@ const CollapseContext = createContext<CollapseContextType>({
   showTabs: true,
   menuId: '',
   valueId: '',
-  tabs: [],
-  listRef: {current: null}
+  tabs: []
 });
 
 const tabs = style({
@@ -229,9 +228,9 @@ export function TabList<T extends object>(props: TabListProps<T>): ReactNode | n
   
   return (
     <div className={tablistWrapper(null, props.styles)}>
-      <div className={tablist({orientation, labelBehavior, density})}>
+      {listRef && <div className={tablist({orientation, labelBehavior, density})}>
         <HiddenTabs items={tabs} density={density} listRef={listRef} />
-      </div>
+      </div>}
       <TabsMenu
         id={menuId}
         valueId={valueId}
@@ -260,9 +259,9 @@ function TabListInner<T extends object>(props: TabListProps<T>) {
       className={
         (props.UNSAFE_className || '') +
         tablistWrapper(null, props.styles)}>
-      <div className={tablist({orientation, labelBehavior, density})}>
+      {listRef && <div className={tablist({orientation, labelBehavior, density})}>
         <HiddenTabs items={tabs} density={density} listRef={listRef} />
-      </div>
+      </div>}
       <RACTabList
         {...props}
         aria-label={ariaLabel}
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index f151c4067b9..da54f4b77b2 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -149,11 +149,17 @@ export const Dynamic: Story = {
   )
 };
 
-function ExampleTest(props) {
+function AddRemoveTabsExample(props) {
   let [tabs, setTabs] = React.useState([
     {id: 1, title: 'Tab 1', content: 'Tab body 1'},
     {id: 2, title: 'Tab 2', content: 'Tab body 2'},
-    {id: 3, title: 'Tab 3', content: 'Tab body 3'}
+    {id: 3, title: 'Tab 3', content: 'Tab body 3'}, 
+    {id: 4, title: 'Tab 4', content: 'Tab body 4'},
+    {id: 5, title: 'Tab 5', content: 'Tab body 5'},
+    {id: 6, title: 'Tab 6', content: 'Tab body 6'},
+    {id: 7, title: 'Tab 7', content: 'Tab body 7'},
+    {id: 8, title: 'Tab 8', content: 'Tab body 8'},
+    {id: 9, title: 'Tab 9', content: 'Tab body 9'}
   ]);
 
   let addTab = () => {
@@ -197,6 +203,7 @@ function ExampleTest(props) {
   );
 }
 
-export const AddRemoveTabs: Story = {
-  render: (args) => <ExampleTest {...args} />
+export const CustomizedLayout: Story = {
+  render: (args) => <AddRemoveTabsExample {...args} />,
+  tags: ['!autodocs']
 };