Merge pull request #104 from Synthetixio/fix/tab-style

style: improve Tab component
Synthetixio · Jun 29, 2022 · f1591e7 · f1591e7
2 parents b77d3bc + acd71a7
commit f1591e7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 23 deletions.
diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx
@@ -12,16 +12,16 @@ export type TabProps = {
 export const Tab: React.FC<TabProps> = ({ text, active, onClick, disabled, className }) => (
   <button
     className={clsx(
-      'ui-transition ui-border ui-border-transparent ui-ease-out ui-min-w-button-md ui-rounded-[100px] dark:ui-text-white ui-px-2.5 ui-py-2 ui-whitespace-nowrap',
+      'ui-transition ui-border ui-border-transparent ui-ease-out ui-min-w-button-md ui-rounded-[100px] ui-px-2 ui-py-1.5 ui-whitespace-nowrap',
       {
-        'ui-text-black-700 ui-bg-primary': active,
+        'ui-text-primary': !active,
+        'ui-bg-primary ui-text-white': active,
         'ui-cursor-pointer': !disabled,
-        'hover:ui-border-primary hover:ui-text-primary': !disabled && !active,
+        'hover:ui-border-primary': !disabled && !active,
         'ui-opacity-50 ui-cursor-not-allowed': disabled
       },
       className
     )}
-    type='button'
     onClick={onClick}
   >
     {text}

diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
@@ -15,31 +15,21 @@ Basic.args = {
   contentClassName: 'ui-overflow-hidden',
   items: [
     {
-      id: 'tab1',
+      id: 1,
       label: 'tab12',
-      content: (
-        <div style={{ display: 'flex' }}>
-          Tab 1 <div>Tab 1</div>
-          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
-          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
-          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
-          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
-          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
-          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
-        </div>
-      )
+      content: <div style={{ display: 'flex' }}>Tab 1</div>
     },
     {
-      id: 'tab2',
+      id: 2,
       label: 'tab2',
-      content: <div>Tab 2</div>
+      content: null
     },
     {
-      id: 'tab3',
+      id: 3,
       label: 'disabled',
-      content: <div>Tab 3</div>,
+      content: null,
       disabled: true
     }
   ],
-  initial: 'tab1'
+  initial: 2
 };
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { useCallback, useMemo, useState } from 'react';
+
 import { Tab } from '../Tab/Tab';
 
 export interface ITabItem {
@@ -12,9 +13,9 @@ export interface ITabItem {
 export type TabsProps = {
   className?: string;
   contentClassName?: string;
-  initial: string;
+  initial: string | number;
   items: ITabItem[];
-  onChange?: (id: string) => void;
+  onChange?: (id: string | number) => void;
   dataActionId?: string;
 };