Repository: zeit-ui/react
Pull request #215 (2020-05-17 09:35:13)

feat(tabs): provide a prop for the display of divider
## PR Checklist

- [x] Fix linting errors
- [x] Label has been added


## Change information





Patch:
diff --git a/components/tabs/tabs.tsx b/components/tabs/tabs.tsx
index 967777c..8254ccd 100644
--- a/components/tabs/tabs.tsx
+++ b/components/tabs/tabs.tsx
@@ -8,12 +8,14 @@ import useWarning from '../utils/use-warning'
 interface Props {
   initialValue?: string
   value?: string
+  hideDivider?: boolean
   onChange?: (val: string) => void
   className?: string
 }
 
 const defaultProps = {
   className: '',
+  hideDivider: false,
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
@@ -22,6 +24,7 @@ export type TabsProps = Props & typeof defaultProps & NativeAttrs
 const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({
   initialValue: userCustomInitialValue,
   value,
+  hideDivider,
   children,
   onChange,
   className,
@@ -67,7 +70,7 @@ const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({
   return (
     <TabsContext.Provider value={initialValue}>
       <div className={`tabs ${className}`} {...props}>
-        <header>
+        <header className={hideDivider ? 'hide-divider' : ''}>
           {tabs.map((item, index) => (
             <div
               className={`tab ${selfValue === item.value ? 'active' : ''} ${
@@ -92,6 +95,10 @@ const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({
             border-bottom: 1px solid ${theme.palette.border};
           }
 
+          .hide-divider {
+            border-bottom: none;
+          }
+
           .content {
             padding-top: 0.625rem;
           }
@@ -120,7 +127,7 @@ const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({
             right: 0;
             width: 100%;
             height: 2px;
-            transform: scaleX(0.85);
+            transform: scaleX(0.75);
             background-color: transparent;
             transition: all 200ms ease;
           }
diff --git a/pages/en-us/components/tabs.mdx b/pages/en-us/components/tabs.mdx
index b2a5487..cfe9653 100644
--- a/pages/en-us/components/tabs.mdx
+++ b/pages/en-us/components/tabs.mdx
@@ -33,6 +33,21 @@ Display tab content.
 </Tabs>
 `} />
 
+<Playground
+  title="Hide Divider"
+  scope={{ Tabs }}
+  code={`
+<Tabs initialValue="html" hideDivider>
+  <Tabs.Item label="HTML" value="html">
+    <p>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is.</p>
+  </Tabs.Item>
+  <Tabs.Item label="CSS" value="css">
+    <p>CSS is the language that we can use to style and lay out our web content,
+    as well as adding behavior like animation.</p>
+  </Tabs.Item>
+</Tabs>
+`} />
+
 <Playground
   title="With Icon"
   desc="Show icon component on label button."
@@ -101,6 +116,7 @@ Display tab content.
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **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', ...` | - |
 
diff --git a/pages/zh-cn/components/tabs.mdx b/pages/zh-cn/components/tabs.mdx
index a780d02..6c18364 100644
--- a/pages/zh-cn/components/tabs.mdx
+++ b/pages/zh-cn/components/tabs.mdx
@@ -33,6 +33,20 @@ export const meta = {
 </Tabs>
 `} />
 
+<Playground
+  title="隐藏分割线"
+  scope={{ Tabs }}
+  code={`
+<Tabs initialValue="html" hideDivider>
+  <Tabs.Item label="HTML" value="html">
+    <p>HTML 是我们用来构造网站内容的不同部分并定义它们的意义或目的的语言。</p>
+  </Tabs.Item>
+  <Tabs.Item label="CSS" value="css">
+    <p>我们可以使用 CSS 这个语言来设计和布局我们的 Web 内容，以及添加像动画一类的行为。</p>
+  </Tabs.Item>
+</Tabs>
+`} />
+
 <Playground
   title="图标"
   desc="在选项卡的标签上显示图标组件。"
@@ -99,6 +113,7 @@ export const meta = {
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **initialValue** | 初始值 | `string` | - | - |
 | **value** | 设定当前选项 | `string` | - | - |
+| **hideDivider** | 隐藏默认分割线 | `boolean` | - | `false` |
 | **onChange** | 选项卡切换事件 | `(val: string) => void` | - | - |
 | ... | 原生属性 | `HTMLAttributes` | `'alt', 'id', 'className', ...` | - |
 


Test patch:
diff --git a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
index f721d47..ce89867 100644
--- a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tabs should render correctly 1`] = `
-"<div class=\\"tabs \\"><header><div class=\\"tab  \\">label1</div><div class=\\"tab  \\">label2</div></header><div class=\\"content\\"></div><style>
+"<div class=\\"tabs \\"><header class=\\"\\"><div class=\\"tab  \\">label1</div><div class=\\"tab  \\">label2</div></header><div class=\\"content\\"></div><style>
           .tabs {
             width: initial;
           }
@@ -13,6 +13,85 @@ exports[`Tabs should render correctly 1`] = `
             border-bottom: 1px solid #eaeaea;
           }
 
+          .hide-divider {
+            border-bottom: none;
+          }
+
+          .content {
+            padding-top: 0.625rem;
+          }
+
+          .tab {
+            padding: 4pt calc(0.65 * 4pt);
+            cursor: pointer;
+            outline: 0;
+            transition: all 200ms ease;
+            text-transform: capitalize;
+            font-size: 1rem;
+            margin: 0 calc(0.8 * 8pt);
+            color: #444;
+            user-select: none;
+            display: flex;
+            align-items: center;
+            line-height: 1.25rem;
+            position: relative;
+          }
+
+          .tab:after {
+            position: absolute;
+            content: '';
+            bottom: -1px;
+            left: 0;
+            right: 0;
+            width: 100%;
+            height: 2px;
+            transform: scaleX(0.75);
+            background-color: transparent;
+            transition: all 200ms ease;
+          }
+
+          .tab.active:after {
+            background-color: #000;
+            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>"
+`;
+
+exports[`Tabs should work correctly with different styles 1`] = `
+"<div class=\\"tabs \\"><header class=\\"hide-divider\\"><div class=\\"tab  \\">label1</div></header><div class=\\"content\\"></div><style>
+          .tabs {
+            width: initial;
+          }
+
+          header {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            border-bottom: 1px solid #eaeaea;
+          }
+
+          .hide-divider {
+            border-bottom: none;
+          }
+
           .content {
             padding-top: 0.625rem;
           }
@@ -41,7 +120,7 @@ exports[`Tabs should render correctly 1`] = `
             right: 0;
             width: 100%;
             height: 2px;
-            transform: scaleX(0.85);
+            transform: scaleX(0.75);
             background-color: transparent;
             transition: all 200ms ease;
           }
diff --git a/components/tabs/__tests__/index.test.tsx b/components/tabs/__tests__/index.test.tsx
index bb96cf6..102711a 100644
--- a/components/tabs/__tests__/index.test.tsx
+++ b/components/tabs/__tests__/index.test.tsx
@@ -19,6 +19,18 @@ describe('Tabs', () => {
     expect(() => wrapper.unmount()).not.toThrow()
   })
 
+  it('should work correctly with different styles', () => {
+    const wrapper = mount(
+      <Tabs hideDivider>
+        <Tabs.Item label="label1" value="1">
+          1
+        </Tabs.Item>
+      </Tabs>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
   it('should trigger events when tab changed', () => {
     let value = ''
     const changeHandler = jest.fn().mockImplementation(val => (value = val))