feat(tabs): set possible to disable panels (#436)

Author: iNeoO

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) => (
                         <li key={tabIndex} role="presentation">
                             <button
                                 ref={button => (buttonRefs.current[tabIndex] = button)}
@@ -171,6 +173,7 @@ export const Tabs = memo(
                                 aria-selected={tabIndex === selectedTabIndex}
                                 aria-controls={getPanelId(tabIndex)}
                                 onClick={onTabClickFactory(tabIndex)}
+                                disabled={disabled}
                             >
                                 {label}
                             </button>

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: <p>Content of tab1</p> },
         { label: "Tab 2", iconId: "fr-icon-ball-pen-fill", isDefault: true, content: <p>Content of tab2</p> },
-        { label: "Tab 3", content: <p>Content of tab3</p> }
+        { label: "Tab 3", content: <p>Content of tab3</p> },
+        { 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": <p>Content of tab2</p>
         },
-        { "label": "Tab 3", "content": <p>Content of tab3</p> }
+        { "label": "Tab 3", "content": <p>Content of tab3</p> },
+        { "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": <p>Content of tab2</p>
         },
-        { "label": "Tab 3", "content": <p>Content of tab3</p> }
+        { "label": "Tab 3", "content": <p>Content of tab3</p> },
+        { "label": "Tab 4", "content": null, "disabled": true }
     ],
     "label": "Name of the tabs system",
     ...logCallbacks(["onTabChange"])