fix: tabs divider

DistributedCollective · Oct 12, 2022 · 2ce3037 · 2ce3037
1 parent 836a665
commit 2ce3037
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 7 deletions.
diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.module.css b/packages/ui/src/1_atoms/Tabs/Tabs.module.css
@@ -16,7 +16,7 @@
   .content {
     &.primaryWithBorder,
     &.primary {
-      @apply bg-gray-80 rounded-b;
+      @apply bg-gray-80 rounded-b text-gray-10;
     }
 
     &.primaryWithBorder {

diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.stories.tsx b/packages/ui/src/1_atoms/Tabs/Tabs.stories.tsx
@@ -45,7 +45,7 @@ Primary.args = {
     },
   ],
   index: 0,
-  contentClassName: 'p-4',
+  contentClassName: 'p-6',
   size: TabSize.normal,
   type: TabType.primaryWithBorder,
 };

diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.tsx b/packages/ui/src/1_atoms/Tabs/Tabs.tsx
@@ -51,12 +51,14 @@ export const Tabs: React.FC<TabsProps> = ({
           <Tab
             key={i}
             active={index === i}
+            index={i}
             disabled={item.disabled}
             onClick={() => selectTab(item, i)}
             content={item.label}
             dataActionId={item.dataActionId}
             type={type}
             size={size}
+            activeIndex={index}
             activeClassName={item.activeClassName}
           />
         ))}

diff --git a/packages/ui/src/1_atoms/Tabs/components/Tab/Tab.module.css b/packages/ui/src/1_atoms/Tabs/components/Tab/Tab.module.css
@@ -1,5 +1,5 @@
 .button {
-  @apply cursor-pointer inline-flex box-border items-center justify-center text-center rounded cursor-pointer transition-colors;
+  @apply cursor-pointer inline-flex box-border items-center justify-center text-center rounded cursor-pointer transition-colors relative;
 
   &.primaryWithBorder,
   &.primary {
@@ -19,8 +19,12 @@
     }
   }
 
+  &.primaryWithBorder {
+    @apply border-b;
+  }
+
   &.primaryWithBorder.active {
-    @apply border-x border-x-gray-50;
+    @apply border-x border-x-gray-50 pb-0.5 border-b-transparent;
 
     &:last-child {
       @apply border-r-0;
@@ -32,7 +36,12 @@
   }
 
   &.primaryWithBorder:not(.active) {
-    @apply border-b border-b-gray-50;
+    @apply border-b-gray-50 border-r border-r-gray-50 rounded-none border-t-0;
+
+    &:last-child,
+    &.noRightBorder {
+      @apply border-r-0;
+    }
   }
 
   &.secondary {

diff --git a/packages/ui/src/1_atoms/Tabs/components/Tab/Tab.tsx b/packages/ui/src/1_atoms/Tabs/components/Tab/Tab.tsx
@@ -7,33 +7,38 @@ import styles from './Tab.module.css';
 
 type TabProps = {
   content: React.ReactNode;
-  active: boolean;
   disabled?: boolean;
+  active: boolean;
   onClick: () => void;
   className?: string;
   dataActionId?: string;
   type: TabType;
   size: TabSize;
   activeClassName?: string;
+  index: number;
+  activeIndex: number;
 };
 
 export const Tab: React.FC<TabProps> = ({
   content,
-  active,
   onClick,
   disabled,
   className,
   dataActionId,
   type,
   size,
+  active,
   activeClassName = '',
+  activeIndex,
+  index,
 }) => (
   <button
     type="button"
     className={classNames(
       {
         [styles.active]: active,
         [activeClassName]: active,
+        [styles.noRightBorder]: activeIndex - 1 === index,
       },
       className,
       styles.button,