feat: update Tab component to improve padding and enhance visual styles for horizontal and vertical orientations

Author: nicosammito

src/components/tab/Tab.stories.tsx

@@ -12,14 +12,14 @@ export default {
 export const TabExample = () => {
     return <Tab orientation={"horizontal"} defaultValue={"overview"}>
         <TabList>
-            <TabTrigger value={"overview"}>
-                <Button variant={"none"}>
+            <TabTrigger value={"overview"} asChild>
+                <Button paddingSize={"xxs"} variant={"none"}>
                     <IconHome size={16}/>
                     <Text size={"md"} hierarchy={"primary"}>Collaborative documents</Text>
                 </Button>
             </TabTrigger>
-            <TabTrigger value={"organizations"}>
-                <Button variant={"none"}>
+            <TabTrigger value={"organizations"} asChild>
+                <Button paddingSize={"xxs"} variant={"none"}>
                     <IconBuilding size={16}/>
                     <Text size={"md"} hierarchy={"primary"}>Inline comments</Text>
                 </Button>
@@ -31,17 +31,17 @@ export const TabExample = () => {
 export const TabExampleVertical = () => {
     return <Tab orientation={"vertical"} defaultValue={"overview"}>
         <TabList>
-            <TabTrigger value={"overview"}>
+            <TabTrigger value={"overview"} asChild>
                 <Button paddingSize={"xxs"} variant={"none"}>
                     <Text size={"md"} hierarchy={"primary"}>Collaborative documents</Text>
                 </Button>
             </TabTrigger>
-            <TabTrigger value={"organizations"}>
+            <TabTrigger value={"organizations"} asChild>
                 <Button paddingSize={"xxs"} variant={"none"}>
                     <Text size={"md"} hierarchy={"primary"}>Inline comments</Text>
                 </Button>
             </TabTrigger>
-            <TabTrigger value={"commands"}>
+            <TabTrigger value={"commands"} asChild>
                 <Button paddingSize={"xxs"} variant={"none"}>
                     <Text size={"md"} hierarchy={"primary"}>Text-to-issue commands</Text>
                 </Button>

src/components/tab/Tab.style.scss

@@ -23,7 +23,6 @@
     position: relative;
     box-sizing: border-box;
     opacity: 0.5;
-    padding: 0;
     transition: all ease-in-out 0.2s;
 
     &:after {
@@ -35,22 +34,26 @@
     }
 
     &[data-orientation="vertical"] {
-      padding-left: variables.$xxs;
+      padding-left: variables.$xs * 2;
+
       &:after {
-        height: 100%;
+        height: 50%;
         width: 3px;
-        top: 0;
-        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        left: variables.$xs;
       }
     }
 
     &[data-orientation="horizontal"] {
-      padding-bottom: variables.$xxs;
+
+      padding-bottom: variables.$xxs * 2;
+
       &:after {
         width: 10%;
         min-width: 28px;
         height: 3px;
-        bottom: 0;
+        bottom: variables.$xxs;
         left: 50%;
         transform: translateX(-50%);
       }
@@ -59,6 +62,7 @@
     &[aria-selected=true] {
       &[data-orientation="vertical"], &[data-orientation="horizontal"] {
         opacity: 1;
+
         &:after {
           background: variables.$info;
         }