feat: implement bordered variant for tabs component

rango-exchange · Sep 9, 2024 · 1de8888 · 1de8888
1 parent 0f65ab1
commit 1de8888
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/widget/ui/src/components/Tabs/Tabs.styles.tsx b/widget/ui/src/components/Tabs/Tabs.styles.tsx
@@ -23,6 +23,7 @@ export const Tabs = styled('div', {
         borderStyle: 'solid',
         backgroundColor: '$$color',
       },
+      bordered: { backgroundColor: 'inherit' },
     },
     borderRadius: {
       small: {
@@ -34,12 +35,16 @@ export const Tabs = styled('div', {
       full: {
         borderRadius: '$xm',
       },
+      none: {
+        borderRadius: 'unset',
+      },
     },
   },
 });
 
 export const Tab = styled(Button, {
   color: '$neutral700',
+  flex: 1,
   backgroundColor: 'transparent',
   height: '100%',
   zIndex: 10,
@@ -60,13 +65,17 @@ export const Tab = styled(Button, {
       full: {
         borderRadius: '$xm',
       },
+      none: {
+        borderRadius: 'unset',
+      },
     },
     type: {
       primary: {
         padding: '$5 $10',
         height: '100%',
       },
       secondary: {},
+      bordered: {},
     },
     isActive: {
       true: {
@@ -122,6 +131,24 @@ export const Tab = styled(Button, {
         },
       },
     },
+    {
+      type: 'bordered',
+      isActive: true,
+      css: {
+        color: '$secondary500',
+      },
+    },
+    {
+      type: 'bordered',
+      isActive: false,
+      css: {
+        color: '$neutral600',
+        fontWeight: '$regular',
+        '&:hover': {
+          color: '$secondary550',
+        },
+      },
+    },
   ],
 });
 
@@ -141,6 +168,9 @@ export const BackdropTab = styled('div', {
       primary: {
         backgroundColor: '$background',
       },
+      bordered: {
+        borderBottom: '$secondary500 solid 2px',
+      },
     },
     borderRadius: {
       small: {
@@ -152,6 +182,9 @@ export const BackdropTab = styled('div', {
       full: {
         borderRadius: '$xm',
       },
+      none: {
+        borderRadius: 'unset',
+      },
     },
   },
 });
diff --git a/widget/ui/src/components/Tabs/Tabs.tsx b/widget/ui/src/components/Tabs/Tabs.tsx
@@ -15,7 +15,6 @@ export function TabsComponent(props: TabsPropTypes) {
     container = document.body,
     value,
     type,
-    borderRadius = 'medium',
     className,
   } = props;
   const [tabWidth, setTabWidth] = useState(0);
@@ -25,6 +24,12 @@ export function TabsComponent(props: TabsPropTypes) {
   // State variable to track the initial render
   const [initialRender, setInitialRender] = useState(true);
   const transformPosition = currentIndex * tabWidth;
+  let borderRadius: TabsPropTypes['borderRadius'] = 'medium';
+  if (type === 'bordered') {
+    borderRadius = 'none';
+  } else if (props.borderRadius) {
+    borderRadius = props.borderRadius;
+  }
 
   useEffect(() => {
     const updateTabWidth = () => {