Add tabs variants and remove blur (#501)

* remove backdrop filter

* add tabs variants

* fix usage

* Create cold-jars-return.md

* f

.changeset/cold-jars-return.md

@@ -0,0 +1,6 @@
+---
+"@status-im/components": patch
+---
+
+- Add tabs variants
+- Remove `backdrop-filter` 

packages/components/src/button/button.tsx

@@ -240,23 +240,12 @@ const Base = styled(View, {
         backgroundColor: '$neutral-80/5',
         hoverStyle: { backgroundColor: '$neutral-80/10' },
         pressStyle: { backgroundColor: '$neutral-80/20' },
-        '$platform-web': {
-          backdropFilter: 'blur(20px)',
-          // Tamagui does not accept this property even though it is valid (and works)
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as unknown as any,
       },
       blur_outline: {
         borderWidth: 1,
         borderColor: '$neutral-80/10',
         hoverStyle: { borderColor: '$neutral-80/20' },
         pressStyle: { borderColor: '$neutral-80/30' },
-
-        '$platform-web': {
-          backdropFilter: 'blur(20px)',
-          // Tamagui does not accept this property even though it is valid (and works)
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as unknown as any,
       },
     },
 

packages/components/src/messages/components/reactions-dialog.tsx

@@ -63,7 +63,7 @@ export const ReactionsDialog = (props: Props) => {
     <Dialog.Content width={352} borderRadius="$12">
       <Tabs defaultValue={initialReactionType}>
         <Stack padding={16}>
-          <Tabs.List size={24}>
+          <Tabs.List variant="grey" size={24}>
             {Object.entries(reactions).map(([reaction, value]) => {
               const Icon = REACTIONS_ICONS[reaction as keyof ReactionsType]
               return (

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

@@ -18,14 +18,114 @@ const meta: Meta<typeof Tabs> = {
   },
 }
 
-export const Default: StoryObj<TabsProps> = {
+export const Grey: StoryObj<TabsProps> = {
   args: {
     defaultValue: '1',
   },
   render(args) {
     return (
       <Tabs {...args}>
-        <Tabs.List size={32}>
+        <Tabs.List variant="grey" size={32}>
+          <Tabs.Trigger type="default" value="1">
+            Tab 1
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="2">
+            Tab 2
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="3">
+            Tab 3
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="1">
+          <Text size={15}>Content 1</Text>
+        </Tabs.Content>
+        <Tabs.Content value="2">
+          <Text size={15}>Content 2</Text>
+        </Tabs.Content>
+        <Tabs.Content value="3">
+          <Text size={15}>Content 3</Text>
+        </Tabs.Content>
+      </Tabs>
+    )
+  },
+}
+
+export const GreyBlur: StoryObj<TabsProps> = {
+  args: {
+    defaultValue: '1',
+  },
+  render(args) {
+    return (
+      <Tabs {...args}>
+        <Tabs.List variant="blur_grey" size={32}>
+          <Tabs.Trigger type="default" value="1">
+            Tab 1
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="2">
+            Tab 2
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="3">
+            Tab 3
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="1">
+          <Text size={15}>Content 1</Text>
+        </Tabs.Content>
+        <Tabs.Content value="2">
+          <Text size={15}>Content 2</Text>
+        </Tabs.Content>
+        <Tabs.Content value="3">
+          <Text size={15}>Content 3</Text>
+        </Tabs.Content>
+      </Tabs>
+    )
+  },
+}
+
+export const DarkGrey: StoryObj<TabsProps> = {
+  args: {
+    defaultValue: '1',
+  },
+  render(args) {
+    return (
+      <Tabs {...args}>
+        <Tabs.List variant="darkGrey" size={32}>
+          <Tabs.Trigger type="default" value="1">
+            Tab 1
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="2">
+            Tab 2
+          </Tabs.Trigger>
+          <Tabs.Trigger type="default" value="3">
+            Tab 3
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="1">
+          <Text size={15}>Content 1</Text>
+        </Tabs.Content>
+        <Tabs.Content value="2">
+          <Text size={15}>Content 2</Text>
+        </Tabs.Content>
+        <Tabs.Content value="3">
+          <Text size={15}>Content 3</Text>
+        </Tabs.Content>
+      </Tabs>
+    )
+  },
+}
+export const DarkGreyBlur: StoryObj<TabsProps> = {
+  args: {
+    defaultValue: '1',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  render(args) {
+    return (
+      <Tabs {...args}>
+        <Tabs.List variant="blur_darkGrey" size={32}>
           <Tabs.Trigger type="default" value="1">
             Tab 1
           </Tabs.Trigger>
@@ -57,7 +157,7 @@ export const Icon: StoryObj<TabsProps> = {
   render(args) {
     return (
       <Tabs {...args}>
-        <Tabs.List size={32}>
+        <Tabs.List variant="grey" size={32}>
           <Tabs.Trigger
             type="icon"
             value="1"
@@ -101,7 +201,7 @@ export const Counter: StoryObj<TabsProps> = {
   render(args) {
     return (
       <Tabs {...args}>
-        <Tabs.List size={32}>
+        <Tabs.List variant="grey" size={32}>
           <Tabs.Trigger type="counter" value="1" count={5}>
             Tab 1
           </Tabs.Trigger>
@@ -133,7 +233,7 @@ export const Step: StoryObj<TabsProps> = {
   render(args) {
     return (
       <Tabs {...args}>
-        <Tabs.List size={32}>
+        <Tabs.List variant="grey" size={32}>
           <Tabs.Trigger type="step" value="1" step={1}>
             Tab 1
           </Tabs.Trigger>

packages/components/src/tabs/tabs.tsx

@@ -40,6 +40,7 @@ const Tabs = (props: Props) => {
 
 type ListProps = {
   children: React.ReactElement[]
+  variant: Variants['variant']
   size: Variants['size']
 }
 
@@ -51,7 +52,7 @@ const TabsList = (props: ListProps) => {
       <Stack flexDirection="row" gap={8}>
         {Children.map(children, child => (
           <Trigger asChild value={child.props.value}>
-            {cloneElement(child, { size: props.size })}
+            {cloneElement(child, { size: props.size, variant: props.variant })}
           </Trigger>
         ))}
       </Stack>
@@ -86,20 +87,21 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
   const providedProps = props as TriggerProps & {
     size: 24 | 32
     'aria-selected': boolean
+    variant: Variants['variant']
   }
 
+  const { size, 'aria-selected': selected, variant } = providedProps
+
   const { color, pressableProps } = usePressableColors(
     {
-      default: '$neutral-100',
+      default: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
-      hover: '$neutral-100',
+      hover: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
-      press: '$neutral-100',
+      press: variant === 'blur_darkGrey' ? '$white-100' : '$neutral-100',
       active: '$white-100',
     },
     providedProps
   )
 
-  const { size, 'aria-selected': selected } = providedProps
-
   const textSize = triggerTextSizes[size]
 
   return (
@@ -108,6 +110,7 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
       {...pressableProps}
       ref={ref}
       size={size}
+      variant={variant}
       active={selected}
     >
       {props.type === 'icon' &&
@@ -148,6 +151,34 @@ const TriggerBase = styled(View, {
   justifyContent: 'center',
 
   variants: {
+    variant: {
+      grey: {
+        backgroundColor: '$neutral-10',
+        hoverStyle: {
+          backgroundColor: '$neutral-20',
+        },
+      },
+      darkGrey: {
+        backgroundColor: '$neutral-20',
+        hoverStyle: {
+          backgroundColor: '$neutral-30',
+        },
+      },
+
+      blur_grey: {
+        backgroundColor: '$neutral-80/5',
+        hoverStyle: {
+          backgroundColor: '$neutral-80/10',
+          // backgroundColor: '$neutral-80/60',
+        },
+      },
+      blur_darkGrey: {
+        backgroundColor: '$white-5',
+        hoverStyle: {
+          backgroundColor: '$white-10',
+        },
+      },
+    },
     size: {
       32: {
         height: 32,
@@ -163,15 +194,38 @@ const TriggerBase = styled(View, {
       },
     },
     active: {
-      true: {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      true: (_v, { props }) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const variant = (props as any).variant as Variants['variant']
+
+        if (variant === 'grey' || variant === 'darkGrey') {
+          return {
             cursor: 'default',
             backgroundColor: '$neutral-50',
-      },
+            hoverStyle: { backgroundColor: '$neutral-50' },
-      false: {
+            pressStyle: { backgroundColor: '$neutral-50' },
-        backgroundColor: '$neutral-10',
+          }
-        hoverStyle: {
+        }
-          backgroundColor: '$neutral-20',
+
-        },
+        if (variant === 'blur_grey') {
+          return {
+            cursor: 'default',
+            backgroundColor: '$neutral-80/60',
+            hoverStyle: { backgroundColor: '$neutral-80/60' },
+            pressStyle: { backgroundColor: '$neutral-80/60' },
+          }
+        }
+
+        if (variant === 'blur_darkGrey') {
+          return {
+            cursor: 'default',
+            backgroundColor: '$white-20',
+            hoverStyle: { backgroundColor: '$white-20' },
+            pressStyle: { backgroundColor: '$white-20' },
+          }
+        }
       },
     },
   } as const,