From b463fbebd1f739a37dfe5fbd3b907d1f7724deba Mon Sep 17 00:00:00 2001
From: Nikhil kumar gupta <36965562+nikhilgupta58@users.noreply.github.com>
Date: Tue, 11 Jan 2022 20:59:35 +0530
Subject: [PATCH] feature Update tabs-item.tsx (#658)

* feat(tabs): display hover effect by styles

Add highlight on Tabs component #653

* feat: redesign the render mode for tabs-item

* test(tabs): update snapshots for styles changes

* docs(tabs): append leftSpace attribute

Co-authored-by: nikhilgupta58 <nikhil@tartanhq.com>
Co-authored-by: unix <unix.bio@gmail.com>
---
 .../__snapshots__/index.test.tsx.snap         | 152 ++++++++++++------
 components/tabs/tabs-context.ts               |   4 +-
 components/tabs/tabs-item.tsx                 |  60 ++++---
 components/tabs/tabs.tsx                      |  11 +-
 pages/en-us/components/tabs.mdx               |  19 +--
 pages/zh-cn/components/tabs.mdx               |  21 ++-
 6 files changed, 168 insertions(+), 99 deletions(-)

diff --git a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
index b2efa3dcb..9ff919bea 100644
--- a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,27 +3,47 @@
 exports[`Tabs should render correctly 1`] = `
 "<div class=\\"tabs \\"><header><div class=\\"scroll-container \\"><div class=\\"tab  \\" role=\\"button\\">label1<style>
           .tab {
+            position: relative;
             box-sizing: border-box;
             cursor: pointer;
             outline: 0;
             transition: all 200ms ease;
             text-transform: capitalize;
             white-space: nowrap;
-            color: #444;
+            background-color: transparent;
+            color: #666;
             user-select: none;
             display: flex;
             align-items: center;
-            position: relative;
-            font-size: calc(1 * 16px);
-            line-height: 1.25em;
+            font-size: calc(0.875 * 16px);
+            line-height: normal;
             width: auto;
             height: auto;
-            padding: calc(0.334 * 16px) calc(0.218 * 16px) calc(0.334 * 16px)
-              calc(0.218 * 16px);
-            margin: 0 calc(0.5334 * 16px) 0
-              calc(0.5334 * 16px);
+            padding: calc(0.875 * 16px) calc(0.55 * 16px) calc(0.875 * 16px)
+              calc(0.55 * 16px);
+            margin: 0 calc(0.2 * 16px) 0 calc(0.2 * 16px);
+            z-index: 1;
+            --tabs-item-hover-left: calc(-1 * calc(0.28 * 16px));
+            --tabs-item-hover-right: calc(-1 * calc(0.28 * 16px));
+          }
+          .tab:before {
+            position: absolute;
+            top: calc(0.48 * 16px);
+            left: var(--tabs-item-hover-left);
+            right: var(--tabs-item-hover-right);
+            bottom: calc(0.48 * 16px);
+            content: '';
+            z-index: -1;
+            transition: opacity 150ms ease;
+            background-color: transparent;
+            border-radius: 4px;
+          }
+          .tab:hover::before {
+            background-color: #eaeaea;
+          }
+          .tab:hover {
+            color: #000;
           }
-
           .tab:after {
             position: absolute;
             content: '';
@@ -34,55 +54,71 @@ exports[`Tabs should render correctly 1`] = `
             height: 2px;
             border-radius: 4px;
             transform: scaleX(0.75);
-            background-color: transparent;
-            transition: all 200ms ease;
+            background-color: #000;
+            transition: opacity, transform 200ms ease-in;
+            opacity: 0;
           }
-
           .tab.active:after {
-            background-color: #000;
+            opacity: 1;
             transform: scaleX(1);
           }
-
           .tab :global(svg) {
             max-height: 1em;
             margin-right: 5px;
           }
-
           .tab:first-of-type {
             margin-left: 0;
           }
-
           .tab.active {
             color: #000;
           }
-
           .tab.disabled {
             color: #999;
             cursor: not-allowed;
           }
         </style></div><div class=\\"tab  \\" role=\\"button\\">label2<style>
           .tab {
+            position: relative;
             box-sizing: border-box;
             cursor: pointer;
             outline: 0;
             transition: all 200ms ease;
             text-transform: capitalize;
             white-space: nowrap;
-            color: #444;
+            background-color: transparent;
+            color: #666;
             user-select: none;
             display: flex;
             align-items: center;
-            position: relative;
-            font-size: calc(1 * 16px);
-            line-height: 1.25em;
+            font-size: calc(0.875 * 16px);
+            line-height: normal;
             width: auto;
             height: auto;
-            padding: calc(0.334 * 16px) calc(0.218 * 16px) calc(0.334 * 16px)
-              calc(0.218 * 16px);
-            margin: 0 calc(0.5334 * 16px) 0
-              calc(0.5334 * 16px);
+            padding: calc(0.875 * 16px) calc(0.55 * 16px) calc(0.875 * 16px)
+              calc(0.55 * 16px);
+            margin: 0 calc(0.2 * 16px) 0 calc(0.2 * 16px);
+            z-index: 1;
+            --tabs-item-hover-left: calc(-1 * calc(0.28 * 16px));
+            --tabs-item-hover-right: calc(-1 * calc(0.28 * 16px));
+          }
+          .tab:before {
+            position: absolute;
+            top: calc(0.48 * 16px);
+            left: var(--tabs-item-hover-left);
+            right: var(--tabs-item-hover-right);
+            bottom: calc(0.48 * 16px);
+            content: '';
+            z-index: -1;
+            transition: opacity 150ms ease;
+            background-color: transparent;
+            border-radius: 4px;
+          }
+          .tab:hover::before {
+            background-color: #eaeaea;
+          }
+          .tab:hover {
+            color: #000;
           }
-
           .tab:after {
             position: absolute;
             content: '';
@@ -93,28 +129,24 @@ exports[`Tabs should render correctly 1`] = `
             height: 2px;
             border-radius: 4px;
             transform: scaleX(0.75);
-            background-color: transparent;
-            transition: all 200ms ease;
+            background-color: #000;
+            transition: opacity, transform 200ms ease-in;
+            opacity: 0;
           }
-
           .tab.active:after {
-            background-color: #000;
+            opacity: 1;
             transform: scaleX(1);
           }
-
           .tab :global(svg) {
             max-height: 1em;
             margin-right: 5px;
           }
-
           .tab:first-of-type {
             margin-left: 0;
           }
-
           .tab.active {
             color: #000;
           }
-
           .tab.disabled {
             color: #999;
             cursor: not-allowed;
@@ -144,6 +176,7 @@ exports[`Tabs should render correctly 1`] = `
             flex-wrap: nowrap;
             align-items: center;
             border-bottom: 1px solid #eaeaea;
+            padding-left: 20px;
           }
           header::-webkit-scrollbar {
             display: none;
@@ -160,27 +193,47 @@ exports[`Tabs should render correctly 1`] = `
 exports[`Tabs should work correctly with different styles 1`] = `
 "<div class=\\"tabs \\"><header><div class=\\"scroll-container hide-divider\\"><div class=\\"tab  \\" role=\\"button\\">label1<style>
           .tab {
+            position: relative;
             box-sizing: border-box;
             cursor: pointer;
             outline: 0;
             transition: all 200ms ease;
             text-transform: capitalize;
             white-space: nowrap;
-            color: #444;
+            background-color: transparent;
+            color: #666;
             user-select: none;
             display: flex;
             align-items: center;
-            position: relative;
-            font-size: calc(1 * 16px);
-            line-height: 1.25em;
+            font-size: calc(0.875 * 16px);
+            line-height: normal;
             width: auto;
             height: auto;
-            padding: calc(0.334 * 16px) calc(0.218 * 16px) calc(0.334 * 16px)
-              calc(0.218 * 16px);
-            margin: 0 calc(0.5334 * 16px) 0
-              calc(0.5334 * 16px);
+            padding: calc(0.875 * 16px) calc(0.55 * 16px) calc(0.875 * 16px)
+              calc(0.55 * 16px);
+            margin: 0 calc(0.2 * 16px) 0 calc(0.2 * 16px);
+            z-index: 1;
+            --tabs-item-hover-left: calc(-1 * calc(0.28 * 16px));
+            --tabs-item-hover-right: calc(-1 * calc(0.28 * 16px));
+          }
+          .tab:before {
+            position: absolute;
+            top: calc(0.48 * 16px);
+            left: var(--tabs-item-hover-left);
+            right: var(--tabs-item-hover-right);
+            bottom: calc(0.48 * 16px);
+            content: '';
+            z-index: -1;
+            transition: opacity 150ms ease;
+            background-color: transparent;
+            border-radius: 4px;
+          }
+          .tab:hover::before {
+            background-color: #eaeaea;
+          }
+          .tab:hover {
+            color: #000;
           }
-
           .tab:after {
             position: absolute;
             content: '';
@@ -191,28 +244,24 @@ exports[`Tabs should work correctly with different styles 1`] = `
             height: 2px;
             border-radius: 4px;
             transform: scaleX(0.75);
-            background-color: transparent;
-            transition: all 200ms ease;
+            background-color: #000;
+            transition: opacity, transform 200ms ease-in;
+            opacity: 0;
           }
-
           .tab.active:after {
-            background-color: #000;
+            opacity: 1;
             transform: scaleX(1);
           }
-
           .tab :global(svg) {
             max-height: 1em;
             margin-right: 5px;
           }
-
           .tab:first-of-type {
             margin-left: 0;
           }
-
           .tab.active {
             color: #000;
           }
-
           .tab.disabled {
             color: #999;
             cursor: not-allowed;
@@ -242,6 +291,7 @@ exports[`Tabs should work correctly with different styles 1`] = `
             flex-wrap: nowrap;
             align-items: center;
             border-bottom: 1px solid #eaeaea;
+            padding-left: 20px;
           }
           header::-webkit-scrollbar {
             display: none;
diff --git a/components/tabs/tabs-context.ts b/components/tabs/tabs-context.ts
index 6e1e35c48..67aeeca29 100644
--- a/components/tabs/tabs-context.ts
+++ b/components/tabs/tabs-context.ts
@@ -1,7 +1,6 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
 
 export type TabsInternalCellProps = {
-  value: string | undefined
   onClick: (value: string) => void
 }
 
@@ -16,6 +15,7 @@ export interface TabsConfig {
   register?: (item: TabsHeaderItem) => void
   currentValue?: string
   inGroup: boolean
+  leftSpace?: CSSProperties
 }
 
 const defaultContext = {
diff --git a/components/tabs/tabs-item.tsx b/components/tabs/tabs-item.tsx
index 89b643e02..7afa3e369 100644
--- a/components/tabs/tabs-item.tsx
+++ b/components/tabs/tabs-item.tsx
@@ -24,13 +24,11 @@ const TabsItemComponent: React.FC<React.PropsWithChildren<TabsItemProps>> = ({
 }: React.PropsWithChildren<TabsItemProps> & typeof defaultProps) => {
   const theme = useTheme()
   const { SCALES } = useScaleable()
-  const { register, currentValue } = useTabsContext()
+  const { register, currentValue, leftSpace } = useTabsContext()
   const isActive = useMemo(() => currentValue === value, [currentValue, value])
 
-  const TabsInternalCell: React.FC<TabsInternalCellProps> = ({
-    value: currentValue,
-    onClick,
-  }) => {
+  const TabsInternalCell: React.FC<TabsInternalCellProps> = ({ onClick }) => {
+    const { currentValue } = useTabsContext()
     const clickHandler = () => {
       if (disabled) return
       onClick && onClick(value)
@@ -46,27 +44,47 @@ const TabsItemComponent: React.FC<React.PropsWithChildren<TabsItemProps>> = ({
         {label}
         <style jsx>{`
           .tab {
+            position: relative;
             box-sizing: border-box;
             cursor: pointer;
             outline: 0;
             transition: all 200ms ease;
             text-transform: capitalize;
             white-space: nowrap;
-            color: ${theme.palette.accents_6};
+            background-color: transparent;
+            color: ${theme.palette.accents_5};
             user-select: none;
             display: flex;
             align-items: center;
-            position: relative;
-            font-size: ${SCALES.font(1)};
-            line-height: 1.25em;
+            font-size: ${SCALES.font(0.875)};
+            line-height: normal;
             width: ${SCALES.width(1, 'auto')};
             height: ${SCALES.height(1, 'auto')};
-            padding: ${SCALES.pt(0.334)} ${SCALES.pr(0.218)} ${SCALES.pb(0.334)}
-              ${SCALES.pl(0.218)};
-            margin: ${SCALES.mt(0)} ${SCALES.mr(0.5334)} ${SCALES.mb(0)}
-              ${SCALES.ml(0.5334)};
+            padding: ${SCALES.pt(0.875)} ${SCALES.pr(0.55)} ${SCALES.pb(0.875)}
+              ${SCALES.pl(0.55)};
+            margin: ${SCALES.mt(0)} ${SCALES.mr(0.2)} ${SCALES.mb(0)} ${SCALES.ml(0.2)};
+            z-index: 1;
+            --tabs-item-hover-left: calc(-1 * ${SCALES.pl(0.28)});
+            --tabs-item-hover-right: calc(-1 * ${SCALES.pr(0.28)});
+          }
+          .tab:before {
+            position: absolute;
+            top: ${SCALES.pt(0.48)};
+            left: ${leftSpace ? 'var(--tabs-item-hover-left)' : 0};
+            right: ${leftSpace ? 'var(--tabs-item-hover-right)' : 0};
+            bottom: ${SCALES.pb(0.48)};
+            content: '';
+            z-index: -1;
+            transition: opacity 150ms ease;
+            background-color: transparent;
+            border-radius: 4px;
+          }
+          .tab:hover::before {
+            background-color: ${theme.palette.accents_2};
+          }
+          .tab:hover {
+            color: ${theme.palette.foreground};
           }
-
           .tab:after {
             position: absolute;
             content: '';
@@ -77,28 +95,24 @@ const TabsItemComponent: React.FC<React.PropsWithChildren<TabsItemProps>> = ({
             height: 2px;
             border-radius: 4px;
             transform: scaleX(0.75);
-            background-color: transparent;
-            transition: all 200ms ease;
+            background-color: ${theme.palette.foreground};
+            transition: opacity, transform 200ms ease-in;
+            opacity: 0;
           }
-
           .tab.active:after {
-            background-color: ${theme.palette.foreground};
+            opacity: 1;
             transform: scaleX(1);
           }
-
           .tab :global(svg) {
             max-height: 1em;
             margin-right: 5px;
           }
-
           .tab:first-of-type {
             margin-left: 0;
           }
-
           .tab.active {
             color: ${theme.palette.foreground};
           }
-
           .tab.disabled {
             color: ${theme.palette.accents_3};
             cursor: not-allowed;
@@ -111,7 +125,7 @@ const TabsItemComponent: React.FC<React.PropsWithChildren<TabsItemProps>> = ({
 
   useEffect(() => {
     register && register({ value, cell: TabsInternalCell })
-  }, [value, label, disabled, TabsInternalCell])
+  }, [value, label, disabled])
 
   /* eslint-disable react/jsx-no-useless-fragment */
   return isActive ? <>{children}</> : null
diff --git a/components/tabs/tabs.tsx b/components/tabs/tabs.tsx
index 0583e4d78..5542293e7 100644
--- a/components/tabs/tabs.tsx
+++ b/components/tabs/tabs.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { CSSProperties, useEffect, useMemo, useState } from 'react'
 import useTheme from '../use-theme'
 import { TabsHeaderItem, TabsConfig, TabsContext } from './tabs-context'
 import useScaleable, { withScaleable } from '../use-scaleable'
@@ -9,11 +9,13 @@ interface Props {
   hideDivider?: boolean
   onChange?: (val: string) => void
   className?: string
+  leftSpace?: CSSProperties
 }
 
 const defaultProps = {
   className: '',
   hideDivider: false,
+  leftSpace: '20px' as CSSProperties,
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
@@ -26,6 +28,7 @@ const TabsComponent: React.FC<React.PropsWithChildren<TabsProps>> = ({
   children,
   onChange,
   className,
+  leftSpace,
   ...props
 }: React.PropsWithChildren<TabsProps> & typeof defaultProps) => {
   const theme = useTheme()
@@ -52,8 +55,9 @@ const TabsComponent: React.FC<React.PropsWithChildren<TabsProps>> = ({
       register,
       currentValue: selfValue,
       inGroup: true,
+      leftSpace,
     }),
-    [selfValue],
+    [selfValue, leftSpace],
   )
 
   useEffect(() => {
@@ -72,7 +76,7 @@ const TabsComponent: React.FC<React.PropsWithChildren<TabsProps>> = ({
         <header>
           <div className={`scroll-container ${hideDivider ? 'hide-divider' : ''}`}>
             {tabs.map(({ cell: Cell, value }) => (
-              <Cell key={value} value={selfValue} onClick={clickHandler} />
+              <Cell key={value} onClick={clickHandler} />
             ))}
           </div>
         </header>
@@ -102,6 +106,7 @@ const TabsComponent: React.FC<React.PropsWithChildren<TabsProps>> = ({
             flex-wrap: nowrap;
             align-items: center;
             border-bottom: 1px solid ${theme.palette.border};
+            padding-left: ${leftSpace};
           }
           header::-webkit-scrollbar {
             display: none;
diff --git a/pages/en-us/components/tabs.mdx b/pages/en-us/components/tabs.mdx
index 947cdeef0..71c3fc4e3 100644
--- a/pages/en-us/components/tabs.mdx
+++ b/pages/en-us/components/tabs.mdx
@@ -144,8 +144,8 @@ Display tab content.
   const { setState, bindings } = useTabs('1')
   return (
     <>
-      <Button scale={1/3} onClick={() => setState('2')}>
-        <Text>Select  <Code>Jumped</Code></Text>
+      <Button scale={1/3} font="14px" onClick={() => setState('2')}>
+        <Text>Select  <Code>extensible</Code></Text>
       </Button>
       <Spacer h={.5} />
       <Tabs {...bindings}>
@@ -161,13 +161,14 @@ Display tab content.
 <Attributes edit="/pages/en-us/components/tabs.mdx">
 <Attributes.Title>Tabs.Props</Attributes.Title>
 
-| Attribute        | Description            | Type                    | Accepted values                 | Default |
-| ---------------- | ---------------------- | ----------------------- | ------------------------------- | ------- |
-| **initialValue** | initial value          | `string`                | -                               | -       |
-| **value**        | current selected value | `string`                | -                               | -       |
-| **hideDivider**  | hide default divider   | `boolean`               | -                               | `false` |
-| **onChange**     | change event           | `(val: string) => void` | -                               | -       |
-| ...              | native props           | `HTMLAttributes`        | `'alt', 'id', 'className', ...` | -       |
+| Attribute        | Description                 | Type                    | Accepted values                 | Default |
+| ---------------- | --------------------------- | ----------------------- | ------------------------------- | ------- |
+| **initialValue** | initial value               | `string`                | -                               | -       |
+| **value**        | current selected value      | `string`                | -                               | -       |
+| **hideDivider**  | hide default divider        | `boolean`               | -                               | `false` |
+| **leftSpace**    | space area on the left side | `CSSProperties`         | -                               | `20px`  |
+| **onChange**     | change event                | `(val: string) => void` | -                               | -       |
+| ...              | native props                | `HTMLAttributes`        | `'alt', 'id', 'className', ...` | -       |
 
 <Attributes.Title alias="Tabs.Tab">Tabs.Item.Props</Attributes.Title>
 
diff --git a/pages/zh-cn/components/tabs.mdx b/pages/zh-cn/components/tabs.mdx
index 943055e91..41266cfd1 100644
--- a/pages/zh-cn/components/tabs.mdx
+++ b/pages/zh-cn/components/tabs.mdx
@@ -103,7 +103,7 @@ export const meta = {
   const { setState, bindings } = useTabs('1')
   return (
     <>
-      <Button scale={1/3} onClick={() => setState('2')} auto>选择八进制</Button>
+      <Button scale={1/3} font="14px" onClick={() => setState('2')} auto>选择八进制</Button>
       <Spacer />
       <Tabs {...bindings}>
         <Tabs.Item label="二进制" value="1">二进制表示为开头是0后接大写或小写的B（0b或者0B）。</Tabs.Item>
@@ -118,13 +118,14 @@ export const meta = {
 <Attributes edit="/pages/zh-cn/components/tabs.mdx">
 <Attributes.Title>Tabs.Props</Attributes.Title>
 
-| 属性             | 描述           | 类型                    | 推荐值                          | 默认    |
-| ---------------- | -------------- | ----------------------- | ------------------------------- | ------- |
-| **initialValue** | 初始值         | `string`                | -                               | -       |
-| **value**        | 设定当前选项   | `string`                | -                               | -       |
-| **hideDivider**  | 隐藏默认分割线 | `boolean`               | -                               | `false` |
-| **onChange**     | 选项卡切换事件 | `(val: string) => void` | -                               | -       |
-| ...              | 原生属性       | `HTMLAttributes`        | `'alt', 'id', 'className', ...` | -       |
+| 属性             | 描述             | 类型                    | 推荐值                          | 默认    |
+| ---------------- | ---------------- | ----------------------- | ------------------------------- | ------- |
+| **initialValue** | 初始值           | `string`                | -                               | -       |
+| **value**        | 设定当前选项     | `string`                | -                               | -       |
+| **hideDivider**  | 隐藏默认分割线   | `boolean`               | -                               | `false` |
+| **leftSpace**    | 左侧空白区域宽度 | `CSSProperties`         | -                               | `20px`  |
+| **onChange**     | 选项卡切换事件   | `(val: string) => void` | -                               | -       |
+| ...              | 原生属性         | `HTMLAttributes`        | `'alt', 'id', 'className', ...` | -       |
 
 <Attributes.Title alias="Tabs.Tab">Tabs.Item.Props</Attributes.Title>
 
@@ -137,9 +138,7 @@ export const meta = {
 <Attributes.Title>useTabs</Attributes.Title>
 
 ```ts
-type useTabs = (
-  initialValue: string,
-) => {
+type useTabs = (initialValue: string) => {
   state: string
   setState: Dispatch<SetStateAction<string>>
   currentRef: MutableRefObject<string>