From 6a6e065dd7418d77b434ec91a5efad361a93269f Mon Sep 17 00:00:00 2001
From: eileenmguo <eileen@kadena.io>
Date: Wed, 14 Aug 2024 16:48:10 +0200
Subject: [PATCH] Updated styles for contained tabs (#2456)

---
 .../kode-ui/src/components/Tabs/Tabs.css.ts   | 60 ++++++++++++++-----
 .../src/components/Tabs/Tabs.stories.tsx      | 11 +++-
 .../libs/kode-ui/src/components/Tabs/Tabs.tsx | 14 ++---
 3 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/packages/libs/kode-ui/src/components/Tabs/Tabs.css.ts b/packages/libs/kode-ui/src/components/Tabs/Tabs.css.ts
index 5de5cbff7f..04514707e6 100644
--- a/packages/libs/kode-ui/src/components/Tabs/Tabs.css.ts
+++ b/packages/libs/kode-ui/src/components/Tabs/Tabs.css.ts
@@ -8,6 +8,8 @@ import {
   uiSmallestBold,
 } from '../../styles';
 
+export const containedTabs = style({});
+
 export const tabsContainerClass = style({
   display: 'flex',
   flexDirection: 'column',
@@ -21,7 +23,8 @@ export const scrollContainer = style({
   flexDirection: 'row',
   position: 'relative',
   scrollbarWidth: 'none',
-  paddingTop: '2px', // For focus ring
+  marginBottom: '-2px', // For overflow
+  paddingBlock: '2px', // For focus ring
   selectors: {
     '&.paginationLeft:not(.paginationRight)': {
       maskImage:
@@ -52,16 +55,23 @@ export const tabListControls = style({
     left: 0,
     borderBottom: `2px solid ${token('color.border.base.subtle')}`,
   },
+  selectors: {
+    [`${containedTabs} &:before`]: {
+      borderBottom: 'none',
+    },
+  },
 });
 
 export const tabListClass = style({
   display: 'inline-flex',
   flexDirection: 'row',
   minWidth: '100%',
-});
-
-export const tabListGap = style({
-  gap: '2px',
+  selectors: {
+    [`${containedTabs} &`]: {
+      gap: token('spacing.xxs'),
+      paddingLeft: token('spacing.sm'),
+    },
+  },
 });
 
 // Prevent button from increasing the tab size and having the outline conflict with label
@@ -77,6 +87,7 @@ export const tabItemClass = recipe({
   base: [
     {
       display: 'flex',
+      position: 'relative',
       alignItems: 'center',
       cursor: 'pointer',
       outline: 'none',
@@ -89,8 +100,10 @@ export const tabItemClass = recipe({
       minWidth: 'fit-content',
       borderBlockStart: `2px solid transparent`,
       borderBlockEnd: `2px solid ${token('color.border.base.subtle')}`,
-      borderTopLeftRadius: token('radius.xs'),
-      borderTopRightRadius: token('radius.xs'),
+      borderTopLeftRadius: token('radius.sm'),
+      borderTopRightRadius: token('radius.sm'),
+      borderBottomRightRadius: 0,
+      borderBottomLeftRadius: 0,
       transition:
         'background-color .4s ease, color .4s, border-bottom .4s ease-in-out',
       whiteSpace: 'nowrap',
@@ -103,10 +116,25 @@ export const tabItemClass = recipe({
         },
         '.focusVisible &:focus-visible': {
           outline: `2px solid ${token('color.border.tint.outline')}`,
-          borderRadius: token('radius.xs'),
           outlineOffset: '-2px',
         },
         '&.closeable': { paddingInlineEnd: token('size.n2') },
+        [`${containedTabs} &`]: {
+          borderBlockEnd: 'none',
+        },
+        [`${containedTabs} &[data-selected="true"]`]: {
+          borderInline: token('border.hairline'),
+          backgroundColor: token('color.background.layer.default'),
+        },
+        [`${containedTabs} &[data-selected="true"]:after`]: {
+          content: '',
+          position: 'absolute',
+          bottom: '-4px',
+          left: 0,
+          right: 0,
+          height: '4px', // To cover the top border of the container
+          backgroundColor: 'white',
+        },
       },
     },
   ],
@@ -168,6 +196,16 @@ export const tabContentClass = style({
   color: token('color.text.base.default'),
   flex: 1,
   overflowY: 'auto',
+  selectors: {
+    [`${containedTabs} > &`]: {
+      backgroundColor: token('color.background.layer.default'),
+      paddingBlock: token('size.n4'),
+      paddingInline: token('spacing.md'),
+      borderRadius: token('radius.sm'),
+      margin: 0,
+      border: token('border.hairline'),
+    },
+  },
 });
 
 const paginationButtonBase = style({
@@ -207,9 +245,3 @@ export const closeButtonClass = style({
     },
   },
 });
-
-export const containedTabContent = style({
-  backgroundColor: token('color.background.base.@active'),
-  margin: 0,
-  paddingBlock: token('size.n4'),
-});
diff --git a/packages/libs/kode-ui/src/components/Tabs/Tabs.stories.tsx b/packages/libs/kode-ui/src/components/Tabs/Tabs.stories.tsx
index a7b55d828d..c1ddec9136 100644
--- a/packages/libs/kode-ui/src/components/Tabs/Tabs.stories.tsx
+++ b/packages/libs/kode-ui/src/components/Tabs/Tabs.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import type { Key } from 'react-aria';
 import type { Node } from 'react-stately';
-import { onLayer2 } from '../../storyDecorators';
+import { onLayer1 } from '../../storyDecorators';
 import { Stack } from '../Layout';
 import type { ITabsProps } from '../Tabs';
 import { TabItem, Tabs } from '../Tabs';
@@ -39,7 +39,7 @@ const ExampleManyTabs = [
 const meta: Meta<ITabsProps<object>> = {
   title: 'Layout/Tabs',
   component: Tabs,
-  decorators: [onLayer2],
+  decorators: [onLayer1],
   parameters: {
     status: { type: 'stable' },
     docs: {
@@ -124,7 +124,12 @@ export const TabsStory: Story = {
     };
 
     return (
-      <Tabs {...props} aria-label={props['aria-label']} onClose={handleClose}>
+      <Tabs
+        {...props}
+        aria-label={props['aria-label']}
+        onClose={handleClose}
+        isContained
+      >
         {items.map((tab) => (
           <TabItem key={tab.title} title={tab.title}>
             {tab.content}
diff --git a/packages/libs/kode-ui/src/components/Tabs/Tabs.tsx b/packages/libs/kode-ui/src/components/Tabs/Tabs.tsx
index 39206e6674..b7a2f00fbd 100644
--- a/packages/libs/kode-ui/src/components/Tabs/Tabs.tsx
+++ b/packages/libs/kode-ui/src/components/Tabs/Tabs.tsx
@@ -9,10 +9,9 @@ import { Item as TabItem, useTabListState } from 'react-stately';
 import { Tab } from './Tab';
 import { TabPanel } from './TabPanel';
 import {
-  containedTabContent,
+  containedTabs,
   scrollContainer,
   tabListClass,
-  tabListGap,
   tabsContainerClass,
 } from './Tabs.css';
 import { TabsPagination } from './TabsPagination';
@@ -79,7 +78,11 @@ export function Tabs<T extends object>({
   }, []);
 
   return (
-    <div className={classNames(tabsContainerClass, className)}>
+    <div
+      className={classNames(tabsContainerClass, className, {
+        [containedTabs]: isContained,
+      })}
+    >
       <TabsPagination
         wrapperContainerRef={containerRef}
         scrollContainerRef={scrollRef}
@@ -87,7 +90,6 @@ export function Tabs<T extends object>({
         <div className={scrollContainer} ref={scrollRef}>
           <div
             className={classNames(tabListClass, {
-              [tabListGap]: isContained,
               focusVisible: isFocusVisible,
             })}
             {...mergeProps(tabListProps, focusProps)}
@@ -110,9 +112,7 @@ export function Tabs<T extends object>({
       <TabPanel
         key={state.selectedItem?.key}
         state={state}
-        className={classNames(tabPanelClassName, {
-          [containedTabContent]: isContained,
-        })}
+        className={tabPanelClassName}
       />
     </div>
   );