add disabled state to Tabs (#569)

* u

* Create lemon-dogs-lie.md

* f

.changeset/lemon-dogs-lie.md

@@ -0,0 +1,5 @@
+---
+"@status-im/components": patch
+---
+
+draft: add disabled state to Tabs

packages/components/src/tabs/tabs.stories.tsx

@@ -32,7 +32,7 @@ export const Grey: StoryObj<TabsProps> = {
           <Tabs.Trigger type="default" value="2">
             Tab 2
           </Tabs.Trigger>
-          <Tabs.Trigger type="default" value="3">
+          <Tabs.Trigger type="default" value="3" disabled>
             Tab 3
           </Tabs.Trigger>
         </Tabs.List>
@@ -64,7 +64,7 @@ export const GreyBlur: StoryObj<TabsProps> = {
           <Tabs.Trigger type="default" value="2">
             Tab 2
           </Tabs.Trigger>
-          <Tabs.Trigger type="default" value="3">
+          <Tabs.Trigger type="default" value="3" disabled>
             Tab 3
           </Tabs.Trigger>
         </Tabs.List>
@@ -96,7 +96,7 @@ export const DarkGrey: StoryObj<TabsProps> = {
           <Tabs.Trigger type="default" value="2">
             Tab 2
           </Tabs.Trigger>
-          <Tabs.Trigger type="default" value="3">
+          <Tabs.Trigger type="default" value="3" disabled>
             Tab 3
           </Tabs.Trigger>
         </Tabs.List>
@@ -132,7 +132,7 @@ export const DarkGreyBlur: StoryObj<TabsProps> = {
           <Tabs.Trigger type="default" value="2">
             Tab 2
           </Tabs.Trigger>
-          <Tabs.Trigger type="default" value="3">
+          <Tabs.Trigger type="default" value="3" disabled>
             Tab 3
           </Tabs.Trigger>
         </Tabs.List>
@@ -176,6 +176,7 @@ export const Icon: StoryObj<TabsProps> = {
             type="icon"
             value="3"
             icon={<PlaceholderIcon size={16} />}
+            disabled
           >
             Tab 3
           </Tabs.Trigger>
@@ -208,7 +209,7 @@ export const Counter: StoryObj<TabsProps> = {
           <Tabs.Trigger type="counter" value="2" count={10}>
             Tab 2
           </Tabs.Trigger>
-          <Tabs.Trigger type="counter" value="3" count={100}>
+          <Tabs.Trigger type="counter" value="3" count={100} disabled>
             Tab 3
           </Tabs.Trigger>
         </Tabs.List>
@@ -240,7 +241,7 @@ export const Step: StoryObj<TabsProps> = {
           <Tabs.Trigger type="step" value="2" step={10}>
             Tab 2
           </Tabs.Trigger>
-          <Tabs.Trigger type="step" value="3" step={999}>
+          <Tabs.Trigger type="step" value="3" step={999} disabled>
             Tab 3
           </Tabs.Trigger>
         </Tabs.List>

packages/components/src/tabs/tabs.tsx

@@ -65,19 +65,28 @@ type TriggerProps =
       type: 'default'
       value: string
       children: string
+      disabled?: boolean
     }
   | {
       type: 'icon'
       value: string
       children: string
       icon: React.ReactElement
+      disabled?: boolean
+    }
+  | {
+      type: 'counter'
+      value: string
+      children: string
+      count: number
+      disabled?: boolean
     }
-  | { type: 'counter'; value: string; children: string; count: number }
   | {
       type: 'step'
       value: string
       children: string
       step: number
+      disabled?: boolean
     }
 
 const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
@@ -87,10 +96,11 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
   const providedProps = props as TriggerProps & {
     size: 24 | 32
     'aria-selected': boolean
+    disabled: boolean
     variant: Variants['variant']
   }
 
-  const { size, 'aria-selected': selected, variant } = providedProps
+  const { size, 'aria-selected': selected, disabled, variant } = providedProps
 
   const { color, pressableProps } = usePressableColors(
     {
@@ -112,6 +122,7 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
       size={size}
       variant={variant}
       active={selected}
+      disabled={disabled}
     >
       {props.type === 'icon' &&
         cloneElement(props.icon, {
@@ -230,6 +241,12 @@ const TriggerBase = styled(View, {
         }
       },
     },
+    disabled: {
+      true: {
+        opacity: 0.3,
+        cursor: 'default',
+      },
+    },
   } as const,
 })