From e57591187cf007a8a8ed907d4ed37d2e6ea0495f Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 21 Feb 2024 14:24:35 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20adjust=20vertical=20tab?=
 =?UTF-8?q?=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shared/Tabs/Tabs.theme.ts  | 33 +++++++++++++++++--
 .../src/components/shared/Tabs/Tabs.tsx       | 15 +++++++--
 .../components/shared/Tabs/TabsProvider.tsx   |  6 +++-
 .../shared/Tabs/TabsTrigger/TabsTrigger.tsx   | 16 +++++++--
 4 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
index c5ec7d8e..4667fe83 100644
--- a/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
+++ b/packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
@@ -4,8 +4,9 @@ export type TabsVariants = VariantProps<typeof tabsTheme>;
 
 export const tabsTheme = tv({
   slots: {
-    root: ['flex', 'flex-col', 'w-full'],
+    root: ['flex', 'data-[orientation=horizontal]:w-full'],
     triggerWrapper: [
+      // Horizontal – default
       'px-1',
       'pb-5',
       'text-elements-low-em',
@@ -17,6 +18,24 @@ export const tabsTheme = tv({
       'data-[state=active]:font-medium',
       'data-[state=active]:text-elements-high-em',
       'data-[state=active]:border-elements-high-em',
+      // Vertical
+      'data-[orientation=vertical]:px-3',
+      'data-[orientation=vertical]:py-3',
+      'data-[orientation=vertical]:min-w-[240px]',
+      'data-[orientation=vertical]:focus-ring',
+      'data-[orientation=vertical]:rounded-xl',
+      'data-[orientation=vertical]:border-transparent',
+      'data-[orientation=vertical]:hover:bg-base-bg-emphasized',
+      'data-[orientation=vertical]:hover:text-elements-mid-em',
+      'data-[orientation=vertical]:hover:border-transparent',
+      'data-[orientation=vertical]:focus-visible:border-transparent',
+      'data-[orientation=vertical]:focus-visible:bg-base-bg-emphasized',
+      'data-[orientation=vertical]:focus-visible:text-elements-mid-em',
+      'data-[orientation=vertical]:data-[state=active]:font-normal',
+      'data-[orientation=vertical]:data-[state=active]:bg-base-bg-emphasized',
+      'data-[orientation=vertical]:data-[state=active]:border-transparent',
+      'data-[orientation=vertical]:data-[state=active]:hover:text-elements-high-em',
+      'data-[orientation=vertical]:data-[state=active]:focus-visible:text-elements-high-em',
     ],
     trigger: [
       'flex',
@@ -29,14 +48,22 @@ export const tabsTheme = tv({
       'leading-none',
       'tracking-[-0.006em]',
       'rounded-md',
-      'focus-ring',
+      // Horizontal – default
+      'data-[orientation=horizontal]:focus-ring',
+      // Vertical
+      'data-[orientation=vertical]:gap-2',
     ],
     triggerList: [
       'flex',
       'shrink-0',
       'gap-5',
       'border-b',
-      'border-border-interactive/10',
+      'border-transparent',
+      // Horizontal – default
+      'data-[orientation=horizontal]:border-border-interactive/10',
+      // Vertical
+      'data-[orientation=vertical]:flex-col',
+      'data-[orientation=vertical]:gap-0.5',
     ],
     content: ['text-elements-high-em', 'grow', 'outline-none', 'tab-content'],
   },
diff --git a/packages/frontend/src/components/shared/Tabs/Tabs.tsx b/packages/frontend/src/components/shared/Tabs/Tabs.tsx
index 1a0eb7f2..af1c65db 100644
--- a/packages/frontend/src/components/shared/Tabs/Tabs.tsx
+++ b/packages/frontend/src/components/shared/Tabs/Tabs.tsx
@@ -18,12 +18,21 @@ export interface TabsProps extends ComponentPropsWithoutRef<typeof TabsRoot> {
  * A component that allows users to switch between different tabs.
  * @returns JSX element representing the tabs component.
  */
-export const Tabs = ({ config, className, ...props }: TabsProps) => {
+export const Tabs = ({
+  config,
+  className,
+  orientation = 'horizontal',
+  ...props
+}: TabsProps) => {
   const { root } = tabsTheme(config);
 
   return (
-    <TabsProvider {...config}>
-      <TabsRoot {...props} className={root({ className })} />
+    <TabsProvider {...config} orientation={orientation}>
+      <TabsRoot
+        {...props}
+        orientation={orientation}
+        className={root({ className })}
+      />
     </TabsProvider>
   );
 };
diff --git a/packages/frontend/src/components/shared/Tabs/TabsProvider.tsx b/packages/frontend/src/components/shared/Tabs/TabsProvider.tsx
index 42fb1ea1..b51c680b 100644
--- a/packages/frontend/src/components/shared/Tabs/TabsProvider.tsx
+++ b/packages/frontend/src/components/shared/Tabs/TabsProvider.tsx
@@ -2,10 +2,14 @@ import React, {
   createContext,
   useContext,
   type PropsWithChildren,
+  ComponentPropsWithoutRef,
 } from 'react';
 import { TabsVariants } from './Tabs.theme';
+import { Root as TabsRoot } from '@radix-ui/react-tabs';
 
-export interface TabsProviderProps extends Partial<TabsVariants> {}
+export interface TabsProviderProps
+  extends Partial<TabsVariants>,
+    ComponentPropsWithoutRef<typeof TabsRoot> {}
 
 type TabsProviderContext = ReturnType<typeof useTabsValues>;
 
diff --git a/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx b/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx
index be7d3bfb..61093bff 100644
--- a/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx
+++ b/packages/frontend/src/components/shared/Tabs/TabsTrigger/TabsTrigger.tsx
@@ -27,18 +27,28 @@ const TabsTrigger = forwardRef<
 >(({ className, icon, children, ...props }, ref) => {
   const config = useTabs();
   const { triggerWrapper, trigger } = tabsTheme(config);
+  const orientation = config.orientation;
 
   return (
     <Trigger
       ref={ref}
-      tabIndex={-1}
+      // Disabled focus state for horizontal tabs
+      tabIndex={orientation === 'horizontal' ? -1 : undefined}
       className={triggerWrapper({ className })}
       {...props}
     >
       {/* Need to add button in the trigger children because there's focus state inside the children */}
-      <button className={trigger()}>
+      <button
+        data-orientation={orientation}
+        // Disabled focus state for vertical tabs
+        tabIndex={orientation === 'vertical' ? -1 : undefined}
+        className={trigger()}
+      >
+        {/* Put the icon on the left of the text for veritcal tab */}
+        {orientation === 'vertical' && icon}
         {children}
-        {icon}
+        {/* Put the icon on the right of the text for horizontal tab */}
+        {orientation === 'horizontal' && icon}
       </button>
     </Trigger>
   );