feat: implement scrollable variant for tabs component

rango-exchange · Sep 25, 2024 · 0635f77 · 0635f77
1 parent 4351f0c
commit 0635f77
Show file tree

Hide file tree

Showing 5 changed files with 356 additions and 62 deletions.
diff --git a/widget/storybook/src/components/Tabs/Tabs.stories.tsx b/widget/storybook/src/components/Tabs/Tabs.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta } from '@storybook/react';
 import { Tabs } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
-import { themes } from './mock';
+import { numbers, themes } from './mock';
 
 export default {
   title: 'Components/Tabs',
@@ -19,9 +19,9 @@ export default {
   argTypes: {
     type: {
       control: { type: 'select' },
-      options: ['primary', 'secondary'],
+      options: ['primary', 'secondary', 'bordered'],
       defaultValue: 'primary',
-      description: 'primary | secondary | undefined',
+      description: 'primary | secondary | bordered | undefined',
     },
     className: {
       control: { type: 'text' },
@@ -36,6 +36,14 @@ export default {
     onChange: {
       type: 'function',
     },
+    scrollable: {
+      defaultValue: false,
+      type: 'boolean',
+    },
+    scrollButtons: {
+      defaultValue: true,
+      type: 'boolean',
+    },
   },
 } as Meta<typeof Tabs>;
 
@@ -56,3 +64,24 @@ export const Main = (args: TabsPropTypes) => {
     </div>
   );
 };
+
+export const Scrollable = (args: TabsPropTypes) => {
+  const [value, setValue] = useState(numbers[0].id);
+
+  return (
+    <div
+      style={{
+        width: '250px',
+        height: '40px',
+      }}>
+      <Tabs
+        {...args}
+        items={numbers}
+        scrollable={true}
+        type="bordered"
+        value={value as string}
+        onChange={(item) => setValue(item.id as string)}
+      />
+    </div>
+  );
+};
diff --git a/widget/storybook/src/components/Tabs/mock.tsx b/widget/storybook/src/components/Tabs/mock.tsx
@@ -1,3 +1,5 @@
+import type { TabsPropTypes } from '@rango-dev/ui';
+
 import {
   AutoThemeIcon,
   DarkModeIcon,
@@ -35,3 +37,96 @@ export const themes = [
     ),
   },
 ];
+
+export const numbers: TabsPropTypes['items'] = [
+  {
+    id: 'one',
+    title: 'one',
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        1
+      </Typography>
+    ),
+  },
+  {
+    id: 'two',
+    title: 'two',
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        2
+      </Typography>
+    ),
+  },
+  {
+    id: 'three',
+    title: 'three',
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        3
+      </Typography>
+    ),
+  },
+  {
+    id: 'four',
+    title: 'four',
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        4
+      </Typography>
+    ),
+  },
+  {
+    id: 'five',
+    title: 'five',
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        5
+      </Typography>
+    ),
+  },
+  {
+    id: 'six',
+    title: 'six',
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        6
+      </Typography>
+    ),
+  },
+  {
+    id: 'seven',
+    title: 'seven',
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        7
+      </Typography>
+    ),
+  },
+  {
+    id: 'eight',
+    title: 'eight',
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        8
+      </Typography>
+    ),
+  },
+  {
+    id: 'nine',
+    title: 'nine',
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        9
+      </Typography>
+    ),
+  },
+  {
+    id: 'ten',
+    title: 'ten',
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        10
+      </Typography>
+    ),
+  },
+];
diff --git a/widget/ui/src/components/Tabs/Tabs.styles.tsx b/widget/ui/src/components/Tabs/Tabs.styles.tsx
@@ -1,5 +1,39 @@
 import { darkTheme, styled } from '../../theme.js';
 import { Button } from '../Button/index.js';
+import { IconButton } from '../IconButton/IconButton.js';
+
+export const Container = styled('div', {
+  position: 'relative',
+  variants: {
+    hasPadding: {
+      true: {
+        padding: '0 $32',
+      },
+    },
+  },
+});
+
+export const Arrow = styled(IconButton, {
+  position: 'absolute',
+  height: '100%',
+  zIndex: 20,
+  borderRadius: '$xs !important',
+  variants: {
+    hidden: {
+      true: {
+        visibility: 'hidden',
+      },
+    },
+  },
+});
+
+export const ArrowRight = styled(Arrow, {
+  right: 0,
+});
+
+export const ArrowLeft = styled(Arrow, {
+  left: 0,
+});
 
 export const Tabs = styled('div', {
   display: 'flex',
@@ -23,7 +57,7 @@ export const Tabs = styled('div', {
         borderStyle: 'solid',
         backgroundColor: '$$color',
       },
-      bordered: { backgroundColor: 'inherit' },
+      bordered: {},
     },
     borderRadius: {
       small: {
@@ -39,6 +73,16 @@ export const Tabs = styled('div', {
         borderRadius: 'unset',
       },
     },
+    scrollable: {
+      true: {
+        overflowX: 'auto',
+        scrollBehavior: 'smooth',
+        scrollbarWidth: 'none',
+        '&::webkit-scrollbar': {
+          display: 'none',
+        },
+      },
+    },
   },
 });
 
@@ -75,7 +119,9 @@ export const Tab = styled(Button, {
         height: '100%',
       },
       secondary: {},
-      bordered: {},
+      bordered: {
+        padding: '$10 $20',
+      },
     },
     isActive: {
       true: {
@@ -154,6 +200,7 @@ export const Tab = styled(Button, {
 
 export const BackdropTab = styled('div', {
   padding: '$4',
+  boxSizing: 'border-box',
   position: 'absolute',
   inset: 0,
   transition: 'transform 0.2s cubic-bezier(0, 0, 0.86, 1.2)',
@@ -169,6 +216,7 @@ export const BackdropTab = styled('div', {
         backgroundColor: '$background',
       },
       bordered: {
+        borderRadius: '0 !important',
         borderBottom: '$secondary500 solid 2px',
       },
     },