feat(tabs): allow to hide the border when tab is activated (#710)

* feat(tabs): allow to hide the border when tab is activated * docs: remove style overrides from document sites for tabs * docs: connect hooks with the component example page * docs: add documentation for use-classes
geist-org · Feb 4, 2022 · 2d0cde1 · 2d0cde1
1 parent 6eb74e9
commit 2d0cde1
Show file tree

Hide file tree

Showing 27 changed files with 588 additions and 269 deletions.
diff --git a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,132 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Tabs should hide border on active 1`] = `
+"<div class=\\"tabs\\"><header><div class=\\"highlight\\"><style>
+        .highlight {
+          background: #eaeaea;
+          position: absolute;
+          border-radius: 5px;
+          width: 0px;
+          left: -1000px;
+          height: 0px;
+          top: -1000px;
+          opacity: 0;
+          transition: 0.15s ease;
+          transition-property: opacity, width, left;
+        }
+      </style></div><div class=\\"scroll-container\\"><div class=\\"tab hide-border\\" role=\\"button\\" data-geist=\\"tab-item\\">label1<style>
+          .tab {
+            position: relative;
+            box-sizing: border-box;
+            cursor: pointer;
+            outline: 0;
+            text-transform: capitalize;
+            white-space: nowrap;
+            background-color: transparent;
+            color: #666;
+            user-select: none;
+            display: flex;
+            align-items: center;
+            font-size: calc(0.875 * 16px);
+            line-height: normal;
+            width: auto;
+            height: auto;
+            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:hover {
+            color: #000;
+          }
+          .tab:after {
+            position: absolute;
+            content: '';
+            bottom: -1px;
+            left: 0;
+            right: 0;
+            width: 100%;
+            height: 2px;
+            border-radius: 4px;
+            transform: scaleX(0.75);
+            background-color: #000;
+            transition: opacity, transform 200ms ease-in;
+            opacity: 0;
+          }
+          .active:after {
+            opacity: 1;
+            transform: scaleX(1);
+          }
+          .tab :global(svg) {
+            max-height: 1em;
+            margin-right: 5px;
+          }
+          .tab:first-of-type {
+            margin-left: 0;
+          }
+          .active {
+            color: #000;
+          }
+          .disabled {
+            color: #999;
+            cursor: not-allowed;
+          }
+          .hide-border:before {
+            display: block;
+            content: label1;
+            font-weight: 500;
+            height: 0;
+            overflow: hidden;
+            visibility: hidden;
+          }
+          .hide-border:after {
+            display: none;
+          }
+          .hide-border.active {
+            font-weight: 500;
+          }
+        </style></div></div></header><div class=\\"content\\"></div><style>
+          .tabs {
+            font-size: calc(1 * 16px);
+            width: initial;
+            height: auto;
+            padding: 0 0 0 0;
+            margin: 0 0 0 0;
+          }
+          header {
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            overflow-y: hidden;
+            overflow-x: scroll;
+            scrollbar-width: none;
+            position: relative;
+          }
+          .scroll-container {
+            width: 100%;
+            height: 100%;
+            flex: 1;
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: left;
+            border-bottom: 1px solid #eaeaea;
+            padding-left: 12px;
+          }
+          header::-webkit-scrollbar {
+            display: none;
+          }
+          .hide-divider {
+            border-color: transparent;
+          }
+          .content {
+            padding-top: 0.625rem;
+          }
+        </style></div>"
+`;
+
 exports[`Tabs should render correctly 1`] = `
 "<div class=\\"tabs\\"><header><div class=\\"highlight\\"><style>
         .highlight {
@@ -73,6 +200,20 @@ exports[`Tabs should render correctly 1`] = `
             color: #999;
             cursor: not-allowed;
           }
+          .hide-border:before {
+            display: block;
+            content: label1;
+            font-weight: 500;
+            height: 0;
+            overflow: hidden;
+            visibility: hidden;
+          }
+          .hide-border:after {
+            display: none;
+          }
+          .hide-border.active {
+            font-weight: 500;
+          }
         </style></div><div class=\\"tab\\" role=\\"button\\" data-geist=\\"tab-item\\">label2<style>
           .tab {
             position: relative;
@@ -132,6 +273,20 @@ exports[`Tabs should render correctly 1`] = `
             color: #999;
             cursor: not-allowed;
           }
+          .hide-border:before {
+            display: block;
+            content: label2;
+            font-weight: 500;
+            height: 0;
+            overflow: hidden;
+            visibility: hidden;
+          }
+          .hide-border:after {
+            display: none;
+          }
+          .hide-border.active {
+            font-weight: 500;
+          }
         </style></div></div></header><div class=\\"content\\"></div><style>
           .tabs {
             font-size: calc(1 * 16px);
@@ -245,6 +400,20 @@ exports[`Tabs should work correctly with different styles 1`] = `
             color: #999;
             cursor: not-allowed;
           }
+          .hide-border:before {
+            display: block;
+            content: label1;
+            font-weight: 500;
+            height: 0;
+            overflow: hidden;
+            visibility: hidden;
+          }
+          .hide-border:after {
+            display: none;
+          }
+          .hide-border.active {
+            font-weight: 500;
+          }
         </style></div></div></header><div class=\\"content\\"></div><style>
           .tabs {
             font-size: calc(1 * 16px);

diff --git a/components/tabs/__tests__/index.test.tsx b/components/tabs/__tests__/index.test.tsx
@@ -31,6 +31,18 @@ describe('Tabs', () => {
     expect(() => wrapper.unmount()).not.toThrow()
   })
 
+  it('should hide border on active', () => {
+    const wrapper = mount(
+      <Tabs hideBorder>
+        <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))

diff --git a/components/tabs/tabs-context.ts b/components/tabs/tabs-context.ts
@@ -5,6 +5,7 @@ export type TabsInternalCellProps = {
   onMouseOver: (e: MouseEvent<HTMLDivElement>) => void
   activeClassName?: string
   activeStyle?: CSSProperties
+  hideBorder?: boolean
 }
 
 export type TabsInternalCell = React.FC<TabsInternalCellProps>

diff --git a/components/tabs/tabs-item.tsx b/components/tabs/tabs-item.tsx
@@ -32,6 +32,7 @@ const TabsItemComponent: React.FC<React.PropsWithChildren<TabsItemProps>> = ({
     onMouseOver,
     activeClassName,
     activeStyle,
+    hideBorder,
   }) => {
     const theme = useTheme()
     const ref = useRef<HTMLDivElement | null>(null)
@@ -41,6 +42,7 @@ const TabsItemComponent: React.FC<React.PropsWithChildren<TabsItemProps>> = ({
       active,
       disabled,
       [activeClassName!]: active,
+      'hide-border': hideBorder,
     })
     const clickHandler = () => {
       if (disabled) return
@@ -117,6 +119,20 @@ const TabsItemComponent: React.FC<React.PropsWithChildren<TabsItemProps>> = ({
             color: ${theme.palette.accents_3};
             cursor: not-allowed;
           }
+          .hide-border:before {
+            display: block;
+            content: ${label};
+            font-weight: 500;
+            height: 0;
+            overflow: hidden;
+            visibility: hidden;
+          }
+          .hide-border:after {
+            display: none;
+          }
+          .hide-border.active {
+            font-weight: 500;
+          }
         `}</style>
       </div>
     )

diff --git a/components/tabs/tabs.tsx b/components/tabs/tabs.tsx
@@ -18,6 +18,7 @@ interface Props {
   initialValue?: string
   value?: string
   hideDivider?: boolean
+  hideBorder?: boolean
   highlight?: boolean
   onChange?: (val: string) => void
   className?: string
@@ -48,6 +49,7 @@ const TabsComponent: React.FC<React.PropsWithChildren<TabsProps>> = ({
   initialValue: userCustomInitialValue,
   value,
   hideDivider,
+  hideBorder,
   children,
   onChange,
   className,
@@ -128,6 +130,7 @@ const TabsComponent: React.FC<React.PropsWithChildren<TabsProps>> = ({
                 onMouseOver={tabItemMouseOverHandler}
                 activeClassName={activeClassName}
                 activeStyle={activeStyle}
+                hideBorder={hideBorder}
               />
             ))}
           </div>

diff --git a/lib/components/layout/layout.tsx b/lib/components/layout/layout.tsx
@@ -63,22 +63,6 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = React.memo
             margin: 25px auto;
             transform: scale(0.95);
           }
-          .installation-tabs .tab.active:after {
-            display: none;
-          }
-          .installation-tabs .tab {
-            color: ${theme.palette.accents_3};
-          }
-          .installation-tabs .tab:hover {
-            color: ${theme.palette.accents_6};
-          }
-          .installation-tabs .tab.active {
-            font-weight: 500;
-            color: ${theme.palette.foreground};
-          }
-          .installation-tabs .content {
-            margin-top: 0;
-          }
         `}</style>
         <style jsx>{`
           .layout {

diff --git a/lib/components/layout/menu/menu-sticker.tsx b/lib/components/layout/menu/menu-sticker.tsx
@@ -47,6 +47,9 @@ const MenuSticker = () => {
               value={tabValue}
               leftSpace={0}
               activeClassName="current"
+              align="center"
+              hideDivider
+              hideBorder
               onChange={val => setTabValue(val)}>
               <Tabs.Item font="14px" label={isChinese ? '主页' : 'Home'} value="" />
               {tabbarData
@@ -76,19 +79,19 @@ const MenuSticker = () => {
           height: var(--geist-page-tab-height);
           visibility: visible;
         }
-        .sticker :global(.tab) {
-          color: ${theme.palette.accents_3};
-        }
-        .sticker :global(.tab:hover) {
-          color: ${theme.palette.accents_6};
-        }
-        .sticker :global(.current) {
-          color: ${theme.palette.foreground};
-          font-weight: 500;
-        }
-        .sticker :global(.current::after) {
-          display: none;
-        }
+        // .sticker :global(.tab) {
+        //   color: ${theme.palette.accents_3};
+        // }
+        // .sticker :global(.tab:hover) {
+        //   color: ${theme.palette.accents_6};
+        // }
+        // .sticker :global(.current) {
+        //   color: ${theme.palette.foreground};
+        //   font-weight: 500;
+        // }
+        //.sticker :global(.current::after) {
+        //  display: none;
+        //}
         nav {
           position: relative;
           width: 100%;
@@ -122,10 +125,10 @@ const MenuSticker = () => {
         .inner :global(.content) {
           display: none;
         }
-        .inner :global(.scroll-container) {
-          border-color: transparent;
-          justify-content: center;
-        }
+        //.inner :global(.scroll-container) {
+        //  border-color: transparent;
+        //  justify-content: center;
+        //}
       `}</style>
     </>
   )