Merge pull request #153 from reaviz/Add-Tab-sizes

Add Tab sizes
reaviz · Apr 24, 2024 · ff1ad51 · ff1ad51
2 parents 0419182 + 7b9cff7
commit ff1ad51
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 27 deletions.
diff --git a/src/layout/Tabs/Tab.tsx b/src/layout/Tabs/Tab.tsx
@@ -43,11 +43,11 @@ export interface TabProps extends PropsWithChildren {
   onSelect?: () => void;
 
   /**
-   * The variant of the tabs.
+   * The size of the tabs.
    *
    * @private
    */
-  variant?: 'primary' | 'secondary';
+  size?: 'small' | 'medium' | 'large';
 
   /**
    * Theme for the Tabs.
@@ -63,7 +63,7 @@ export const Tab: FC<TabProps> = ({
   className,
   disabled,
   onSelect,
-  variant = 'primary',
+  size = 'medium',
   theme: customTheme
 }) => {
   const theme: TabsTheme = useComponentTheme('tabs', customTheme);
@@ -78,7 +78,7 @@ export const Tab: FC<TabProps> = ({
             [theme.list.tab.disabled]: disabled,
             [theme.list.tab.selected]: selected
           },
-          theme.list.tab.variant?.[variant]?.button
+          theme.list.tab.size?.[size]
         )}
         disabled={disabled}
         role="tab"
@@ -96,8 +96,8 @@ export const Tab: FC<TabProps> = ({
       {selected && (
         <motion.div
           className={cn(
-            theme.list.indicator,
-            theme.list.variant?.[variant]?.indicator
+            theme.list.indicator?.base,
+            theme.list.indicator?.size?.[size]
           )}
           layoutId={`${id}-tabs-underline`}
         />

diff --git a/src/layout/Tabs/TabList.tsx b/src/layout/Tabs/TabList.tsx
@@ -41,6 +41,12 @@ export interface TabListProps extends PropsWithChildren {
    */
   variant?: 'primary' | 'secondary';
 
+  /**
+   * The size of the tabs.
+   * @private
+   */
+  size?: 'small' | 'medium' | 'large';
+
   /**
    * Theme for the Tabs.
    */
@@ -55,6 +61,7 @@ export const TabList: FC<TabListProps> = ({
   selectedIndex,
   onSelect,
   variant = 'primary',
+  size = 'medium',
   theme: customTheme
 }) => {
   const theme: TabsTheme = useComponentTheme('tabs', customTheme);
@@ -79,7 +86,7 @@ export const TabList: FC<TabListProps> = ({
           id={id}
           selected={index === selectedIndex}
           onSelect={() => onSelect(index)}
-          variant={variant}
+          size={size}
         >
           {children}
         </Tab>

diff --git a/src/layout/Tabs/Tabs.story.tsx b/src/layout/Tabs/Tabs.story.tsx
@@ -53,6 +53,41 @@ export const Variants = () => (
   </div>
 );
 
+export const Sizes = () => (
+  <div className="flex flex-col gap-12">
+    <Tabs size="small">
+      <TabList>
+        <Tab>Tab 1</Tab>
+        <Tab>Tab 2</Tab>
+        <Tab>Tab 3</Tab>
+      </TabList>
+      <TabPanel>This is content for small tab 1</TabPanel>
+      <TabPanel>This is content for small tab 2</TabPanel>
+      <TabPanel>This is content for small tab 3</TabPanel>
+    </Tabs>
+    <Tabs size="medium">
+      <TabList>
+        <Tab>Tab 1</Tab>
+        <Tab>Tab 2</Tab>
+        <Tab>Tab 3</Tab>
+      </TabList>
+      <TabPanel>This is content for medium tab 1</TabPanel>
+      <TabPanel>This is content for medium tab 2</TabPanel>
+      <TabPanel>This is content for medium tab 3</TabPanel>
+    </Tabs>
+    <Tabs size="large">
+      <TabList>
+        <Tab>Tab 1</Tab>
+        <Tab>Tab 2</Tab>
+        <Tab>Tab 3</Tab>
+      </TabList>
+      <TabPanel>This is content for large tab 1</TabPanel>
+      <TabPanel>This is content for large tab 2</TabPanel>
+      <TabPanel>This is content for large tab 3</TabPanel>
+    </Tabs>
+  </div>
+);
+
 export const DefaultIndex = () => (
   <Tabs defaultIndex={1}>
     <TabList>

diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx
@@ -46,6 +46,11 @@ export interface TabsProps extends PropsWithChildren {
    */
   variant?: 'primary' | 'secondary';
 
+  /**
+   * The size of the tabs.
+   */
+  size?: 'small' | 'medium' | 'large';
+
   /**
    * The callback to be called when a tab is selected.
    */
@@ -62,6 +67,7 @@ export const Tabs: FC<TabsProps> = ({
   className,
   style,
   variant = 'primary',
+  size = 'medium',
   direction = 'ltr',
   defaultIndex = 0,
   selectedIndex,
@@ -100,6 +106,7 @@ export const Tabs: FC<TabsProps> = ({
       <TabList
         {...tabList}
         variant={variant}
+        size={size}
         direction={direction}
         id={id}
         selectedIndex={internalActive}

diff --git a/src/layout/Tabs/TabsTheme.ts b/src/layout/Tabs/TabsTheme.ts
@@ -2,15 +2,20 @@ export interface TabsTheme {
   base: string;
   list: {
     base: string;
-    indicator: string;
+    indicator: {
+      base: string;
+      size: {
+        small: string;
+        medium: string;
+        large: string;
+      };
+    };
     divider: string;
     variant: {
       primary: {
-        indicator: string;
         divider: string;
       };
       secondary: {
-        indicator: string;
         divider: string;
       };
     };
@@ -19,13 +24,10 @@ export interface TabsTheme {
       button: string;
       selected: string;
       disabled: string;
-      variant: {
-        primary: {
-          button: string;
-        };
-        secondary: {
-          button: string;
-        };
+      size: {
+        small: string;
+        medium: string;
+        large: string;
       };
     };
   };
@@ -36,15 +38,20 @@ const baseTheme: TabsTheme = {
   base: 'flex flex-col',
   list: {
     base: 'flex text-center flex-wrap -mb-px',
-    indicator: 'bg-primary absolute bottom-0 left-0 right-0',
+    indicator: {
+      base: 'bg-primary absolute bottom-0 left-0 right-0',
+      size: {
+        small: 'h-0.5',
+        medium: 'h-0.5',
+        large: 'h-1'
+      }
+    },
     divider: 'w-full h-px border-0',
     variant: {
       primary: {
-        indicator: 'h-1',
         divider: 'bg-surface'
       },
       secondary: {
-        indicator: 'h-0.5',
         divider: 'bg-gradient-to-r from-transparent to-transparent via-primary'
       }
     },
@@ -54,13 +61,10 @@ const baseTheme: TabsTheme = {
         'transition-colors text-panel-secondary-content font-bold hover:text-primary-hover',
       selected: 'text-panel-content',
       disabled: 'cursor-not-allowed opacity-40',
-      variant: {
-        primary: {
-          button: 'pb-4 text-xl'
-        },
-        secondary: {
-          button: 'pb-2 text-lg'
-        }
+      size: {
+        small: 'pb-1 text-sm',
+        medium: 'pb-2 text-lg',
+        large: 'pb-4 text-xl'
       }
     }
   },