diff --git a/src/Tabs.tsx b/src/Tabs.tsx index bcfa7233..e8f2eea9 100644 --- a/src/Tabs.tsx +++ b/src/Tabs.tsx @@ -35,6 +35,7 @@ export namespace TabsProps { iconId?: FrIconClassName | RiIconClassName; content: ReactNode; isDefault?: boolean; + disabled?: boolean; }[]; selectedTabId?: undefined; onTabChange?: (params: { tabIndex: number; tab: Uncontrolled["tabs"][number] }) => void; @@ -46,6 +47,7 @@ export namespace TabsProps { tabId: string; label: ReactNode; iconId?: FrIconClassName | RiIconClassName; + disabled?: boolean; }[]; selectedTabId: string; onTabChange: (tabId: string) => void; @@ -156,7 +158,7 @@ export const Tabs = memo( aria-label={label} onKeyDownCapture={e => onKeyboardNavigation(e)} > - {tabs.map(({ label, iconId }, tabIndex) => ( + {tabs.map(({ label, iconId, disabled }, tabIndex) => (
  • diff --git a/stories/Tabs.stories.tsx b/stories/Tabs.stories.tsx index b35e754b..03a1e6e7 100644 --- a/stories/Tabs.stories.tsx +++ b/stories/Tabs.stories.tsx @@ -18,7 +18,8 @@ In this mode the \`Tab\` component is in charge for swapping the panel content. tabs={[ { label: "Tab 1", iconId: "fr-icon-add-line", content:

    Content of tab1

    }, { label: "Tab 2", iconId: "fr-icon-ball-pen-fill", isDefault: true, content:

    Content of tab2

    }, - { label: "Tab 3", content:

    Content of tab3

    } + { label: "Tab 3", content:

    Content of tab3

    }, + { label: "Tab 4", content: null, disabled: true } ]} /> \`\`\` @@ -40,6 +41,7 @@ function ControlledTabs() { { tabId: "tab1", label: "Tab 1", iconId: "fr-icon-add-line" }, { tabId: "tab2", label: "Tab 2", iconId: "fr-icon-ball-pen-fill" }, { tabId: "tab3", label: "Tab 3" }, + { tabId: "tab4", label: "Tab 4", disabled: true }, ]} onTabChange={setSelectedTabId} > @@ -64,7 +66,8 @@ export const Default = getStory({ "iconId": "fr-icon-ball-pen-fill", "content":

    Content of tab2

    }, - { "label": "Tab 3", "content":

    Content of tab3

    } + { "label": "Tab 3", "content":

    Content of tab3

    }, + { "label": "Tab 4", "content": null, disabled: true } ], "label": "Name of the tabs system", ...logCallbacks(["onTabChange"]) @@ -79,7 +82,8 @@ export const WithTab2OpenedByDefault = getStory({ "isDefault": true, "content":

    Content of tab2

    }, - { "label": "Tab 3", "content":

    Content of tab3

    } + { "label": "Tab 3", "content":

    Content of tab3

    }, + { "label": "Tab 4", "content": null, "disabled": true } ], "label": "Name of the tabs system", ...logCallbacks(["onTabChange"])