fix(tab-nav, tabs): fix style bug caused by #601 PR (#625)

affects: @gio-design/components, website Co-authored-by: Jack <[email protected]>
growingio · Dec 17, 2020 · d8c7369 · d8c7369 · vercel · Dec 17, 2020
1 parent 41f6cc6
commit d8c7369
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/packages/components/src/components/tab-nav/TabNav.tsx b/packages/components/src/components/tab-nav/TabNav.tsx
@@ -2,7 +2,7 @@
 import React, { useState, useRef, useMemo } from 'react';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
-import { isNil, isUndefined, remove } from 'lodash';
+import { isNil, isUndefined, reject } from 'lodash';
 import { useDeepCompareEffect } from 'react-use';
 import { TabNavProps, TabNavItemProps } from './interface';
 import useRefs from '../../utils/hooks/useRefs';
@@ -95,7 +95,7 @@ const TabNav = (props: TabNavProps, ref?: React.RefObject<HTMLDivElement>) => {
 TabNav.Item = React.forwardRef(
   ({ prefixCls, children, innerRef, ...rest }: TabNavItemProps, ref: React.RefObject<HTMLDivElement>) => (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <div ref={composeRef(...remove([ref, innerRef], isUndefined))} {...rest}>
+    <div ref={composeRef(...reject([ref, innerRef], isUndefined))} {...rest}>
       <div className={`${prefixCls}-item-btn`}>{children}</div>
     </div>
   )

diff --git a/packages/components/src/components/tab-nav/style/index.less b/packages/components/src/components/tab-nav/style/index.less
@@ -9,16 +9,16 @@
   &-item {
     display: inline-flex;
     align-items: center;
-    padding: 0 16px;
     color: @color-text-tabs-normal;
     font-size: 14px;
-    line-height: 22px;
     background-color: transparent;
     border: none;
     border-radius: 3px;
     cursor: pointer;
     &-btn {
-      line-height: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 16px;
       outline: none;
     }
     &:hover {
@@ -100,25 +100,30 @@
   }
   &-lg {
     height: 42px;
+    line-height: 40px;
   }
   &-lg &-item,
   &-block&-lg &-ink-bar {
     height: 40px;
   }
   &-md {
     height: 38px;
+    line-height: 36px;
   }
   &-md &-item,
   &-block&-md &-ink-bar {
     height: 36px;
   }
   &-sm {
     height: 32px;
+    line-height: 30px;
   }
   &-sm &-item,
   &-block&-sm &-ink-bar {
     height: 30px;
   }
+
+  // 只有块状有XS尺寸
   &-block&-xs &-item,
   &-block&-xs &-ink-bar {
     height: 24px;

diff --git a/packages/website/src/components/basic/tabnav/demos/line.tsx b/packages/website/src/components/basic/tabnav/demos/line.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
-import { TabNav } from '@gio-design/components';
+import { TabNav, Sign } from '@gio-design/components';
 import '@gio-design/components/es/components/tab-nav/style/index.css';
 import './index.less';
 
 const { Item } = TabNav;
 
 const renderItem = () => (
   <>
-    <Item>我的</Item>
+    <Item>
+      <Sign count={4} magnitude={100} offset={[15, 0]}>
+        我的
+      </Sign>
+    </Item>
     <Item>全部</Item>
     <Item>共享</Item>
     <Item disabled>预置</Item>