fix(tabs): fix type of left-space to match component input (#686)

* fix(tabs): fix type of left-space to match component input * docs: improve header styles to follow tabs component
geist-org · Jan 25, 2022 · fc37827 · fc37827
1 parent 500f5ab
commit fc37827
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 56 deletions.
diff --git a/components/tabs/tabs-context.ts b/components/tabs/tabs-context.ts
@@ -15,7 +15,7 @@ export interface TabsConfig {
   register?: (item: TabsHeaderItem) => void
   currentValue?: string
   inGroup: boolean
-  leftSpace?: CSSProperties
+  leftSpace?: CSSProperties['marginLeft']
 }
 
 const defaultContext = {

diff --git a/components/tabs/tabs.tsx b/components/tabs/tabs.tsx
@@ -9,13 +9,13 @@ interface Props {
   hideDivider?: boolean
   onChange?: (val: string) => void
   className?: string
-  leftSpace?: CSSProperties
+  leftSpace?: CSSProperties['marginLeft']
 }
 
 const defaultProps = {
   className: '',
   hideDivider: false,
-  leftSpace: '20px' as CSSProperties,
+  leftSpace: '20px' as CSSProperties['marginLeft'],
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>

diff --git a/lib/components/menu/menu-sticker.tsx b/lib/components/menu/menu-sticker.tsx
@@ -46,20 +46,13 @@ const MenuSticker = () => {
             <Tabs
               height="calc(var(--geist-page-tab-height) - 2px)"
               value={tabValue}
+              leftSpace={0}
               onChange={val => setTabValue(val)}>
-              <Tabs.Item
-                height="calc(var(--geist-page-tab-height) - 2px)"
-                font="14px"
-                py={0}
-                label={isChinese ? '主页' : 'Home'}
-                value=""
-              />
+              <Tabs.Item font="14px" label={isChinese ? '主页' : 'Home'} value="" />
               {tabbarData
                 ? tabbarData.map((tab, index) => (
                     <Tabs.Item
-                      height="calc(var(--geist-page-tab-height) - 2px)"
                       font="14px"
-                      py={0}
                       label={tab.localeName || tab.name}
                       value={tab.name}
                       key={`${tab.localeName || tab.name}-${index}`}
@@ -79,19 +72,12 @@ const MenuSticker = () => {
           pointer-events: none;
           background-color: ${theme.palette.background};
         }
-
-        .nav-fill.active {
-          height: var(--geist-page-tab-height);
-          visibility: visible;
-        }
-
         nav {
           position: relative;
           width: 100%;
           height: var(--geist-page-tab-height);
           background-color: ${theme.palette.background};
         }
-
         nav.fixed {
           position: fixed;
           top: 0;
@@ -101,63 +87,27 @@ const MenuSticker = () => {
           background-color: ${theme.palette.background};
           box-shadow: rgba(0, 0, 0, 0.1) 0 0 15px 0;
         }
-
         .sticker {
           position: relative;
           height: 100%;
           width: 100%;
         }
-
-        .sticker:before {
-          position: absolute;
-          content: '';
-          height: 1px;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-color: ${theme.palette.border};
-        }
-
         .inner {
           box-sizing: border-box;
           width: ${theme.layout.pageWidth};
           height: 100%;
           z-index: 900;
           margin: 0 auto;
         }
-
         .inner.sm {
           width: 100%;
         }
-        .inner.sm :global(.tab) {
-          width: 33.333%;
-          display: inline-flex;
-          justify-content: center;
-          align-items: center;
-          margin: 0;
-        }
-        .inner.sm :global(.tab.active) {
-          background-color: ${theme.palette.accents_2};
-        }
-
         .inner :global(.content) {
           display: none;
         }
-
         .inner :global(.scroll-container) {
           border-color: transparent;
-        }
-
-        .inner :global(.tab) {
-          color: ${theme.palette.accents_5};
-        }
-
-        .inner :global(.tab):hover {
-          color: ${theme.palette.foreground};
-        }
-
-        .inner :global(.active) {
-          color: ${theme.palette.foreground};
+          justify-content: center;
         }
       `}</style>
     </>