Merge pull request #268 from dolthub/liuliu/tab-disabled-props

components: add disabled prop to Tab
dolthub · Jan 24, 2025 · 34fb19e · 34fb19e
2 parents 5b1708a + 931f881
commit 34fb19e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/packages/components/src/Tabs/Tab.tsx b/packages/components/src/Tabs/Tab.tsx
@@ -13,6 +13,7 @@ type Props = {
   hide?: boolean;
   dark?: boolean;
   small?: boolean;
+  disabled?: boolean;
 };
 
 export default function Tab(props: Props) {
@@ -36,7 +37,10 @@ export default function Tab(props: Props) {
       {props.renderOnlyChild ? (
         props.children
       ) : (
-        <Btn onClick={() => setActiveTabIndex(props.index)}>
+        <Btn
+          onClick={() => setActiveTabIndex(props.index)}
+          disabled={props.disabled}
+        >
           {props.children}
         </Btn>
       )}

diff --git a/packages/components/src/__stories__/Tabs.stories.tsx b/packages/components/src/__stories__/Tabs.stories.tsx
@@ -77,6 +77,25 @@ export const HideLastTab: Story = {
   },
 };
 
+export const DisableLastTab: Story = {
+  args: {
+    initialActiveIndex: 0,
+    children: [
+      <TabList key="tabList">
+        {tabs.map((tab, index) => (
+          <Tab key={tab} index={index}>
+            {tab}
+          </Tab>
+        ))}
+        <Tab index={2} disabled>
+          Tab 3
+        </Tab>
+      </TabList>,
+      ...panels,
+    ],
+  },
+};
+
 export const TabWithLink: Story = {
   args: {
     children: [

diff --git a/packages/components/src/__tests__/Tabs.test.tsx b/packages/components/src/__tests__/Tabs.test.tsx
@@ -5,7 +5,7 @@ import { Tab, TabList, TabPanel, Tabs } from "../Tabs";
 const mocks = [
   { tabWord: "zero", panelWord: "Cero" },
   { tabWord: "one", panelWord: "Uno" },
-  { tabWord: "two", panelWord: "Dos" },
+  { tabWord: "two", panelWord: "Dos", disabled: true },
   { tabWord: "three", panelWord: "Tres", hide: true },
 ];
 
@@ -37,6 +37,7 @@ describe("test Tabs", () => {
               key={`tab-${mock.tabWord}`}
               aria-label="tab"
               hide={mock.hide}
+              disabled={mock.disabled}
             >
               {mock.tabWord}
             </Tab>
@@ -56,6 +57,8 @@ describe("test Tabs", () => {
       if (mocks[i].hide) {
         expect(screen.queryByText(mocks[i].panelWord)).not.toBeInTheDocument();
         expect(screen.queryByText(mocks[i].tabWord)).not.toBeInTheDocument();
+      } else if (mocks[i].disabled) {
+        expect(buttons[i]).toBeDisabled();
       } else {
         if (i !== 0) {
           fireEvent.click(buttons[i]);