style(steps): 修复文字不居中问题

growingio · Feb 4, 2021 · d7b5994 · d7b5994
1 parent ab04a22
commit d7b5994
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 34 deletions.
diff --git a/src/components/steps/Step.tsx b/src/components/steps/Step.tsx
@@ -21,11 +21,7 @@ const Step: React.FC<StepProps> = (props) => {
         icon = <CheckCircleOutlined size="24px" color={tokens.PaletteBlue5} />;
       }
     } else {
-      icon = (
-        <div className="gio-icon">
-          <span className={`${prefixCls}__item-icon`}>{_.isNumber(stepNumber) ? stepNumber + 1 : -1}</span>
-        </div>
-      );
+      icon = <div className={`${prefixCls}__item-icon`}>{_.isNumber(stepNumber) ? stepNumber + 1 : -1}</div>;
     }
     return icon;
   };

diff --git a/src/components/steps/Steps.mdx b/src/components/steps/Steps.mdx
@@ -1,7 +1,13 @@
-import { ArgsTable, Meta } from '@storybook/addon-docs/blocks';
+import { Props, Meta } from '@storybook/addon-docs/blocks';
 import Steps from './Steps';
 
-### Steps 步骤条
+<Meta title="Components/Functional/Steps" Component={Steps} subcomponent />
+
+### Component API
+
+<Props />
+
+<!-- ### Steps 步骤条
 
 | 参数      | 说明                                                                                                                                                                           | 类型                      | 默认值  |
 | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- | ------- |
@@ -19,4 +25,4 @@ import Steps from './Steps';
 | title       | 当前步骤的标题                                                               | string  | -      |
 | description | 当前步骤的描述信息                                                           | string  | -      |
 | finished    | 是否已完成, 如果不指定该参数，则会组件内部会自己计算当前是否为 finished 状态 | boolean | false  |
-| className   | 步骤条类名                                                                   | string  | -      |
+| className   | 步骤条类名                                                                   | string  | -      | -->
diff --git a/src/components/steps/Steps.stories.tsx b/src/components/steps/Steps.stories.tsx
@@ -1,20 +1,21 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { withDesign } from 'storybook-addon-designs';
+// import { withDesign } from 'storybook-addon-designs';
 import Steps, { StepsProps, Step } from '.';
-import Docs from './Steps.mdx';
+// import Docs from './Steps.mdx';
 import './style';
 import './style/steps.stories.less';
 import { Drawer, Button, Toast, Modal } from '../..';
 
 export default {
   title: 'Components/Functional/Steps',
   component: Steps,
-  decorators: [withDesign],
+  subcomponents: { Step },
+  // decorators: [withDesign],
   parameters: {
-    docs: {
-      page: Docs,
-    },
+    // docs: {
+    //   page: Docs,
+    // },
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/wj1nczMMBbGGcy3y72jvc6/Stepper%E7%BB%84%E4%BB%B6?node-id=173%3A566',

diff --git a/src/components/steps/style/index.less b/src/components/steps/style/index.less
@@ -6,20 +6,20 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  margin-bottom: 32px;
+  margin-bottom: @size-spacing-xl;
   text-align: center;
   &__item {
     position: relative;
     flex: 1;
     height: 58px;
+    margin-right: @size-spacing-xxxm;
     &::before {
       position: absolute;
-      bottom: -8px;
+      bottom: -@size-spacing-xs;
       left: 0;
-      display: inline-block;
-      width: calc(100% - 16px);
+      display: block;
+      width: 100%;
       height: 2px;
-      margin: 0 8px;
       background-color: @palette-blue-4;
       opacity: 0;
       content: '';
@@ -30,7 +30,7 @@
     &_active &-icon {
       color: #fff;
       background-color: @palette-blue-5;
-      border: none;
+      border-color: @palette-blue-5;
     }
     &_active &-content {
       color: @palette-blue-5;
@@ -46,8 +46,8 @@
     &::after {
       position: absolute;
       top: 50%;
-      left: 100%;
-      display: inline-block;
+      left: calc(100% + 8px);
+      display: block;
       box-sizing: border-box;
       width: 8px;
       height: 8px;
@@ -58,8 +58,11 @@
       transform: rotate(45deg) translate(-50%);
       content: '';
     }
-    &:last-child::after {
-      content: none;
+    &:last-child {
+      margin-right: 0;
+      &::after {
+        content: none;
+      }
     }
     &-container {
       display: flex;
@@ -83,36 +86,37 @@
           }
         }
       }
+      > span {
+        margin: 0 8px 0 0;
+      }
     }
     &-content {
-      margin-left: 8px;
       overflow: hidden;
       color: @palette-black-3;
       text-align: left;
-
       span {
         display: block;
       }
       &-title {
         font-weight: @weight-font-medium;
-        font-size: 14px;
+        font-size: @size-font-14;
         line-height: @size-spacing-xxxm;
       }
       &-description {
         font-weight: @weight-font-regular;
-        font-size: 12px;
+        font-size: @size-font-12;
         line-height: @size-spacing-xxm;
       }
     }
     &-icon {
-      display: inline-block;
-      box-sizing: border-box;
-      width: 24px;
-      height: 24px;
+      width: @size-spacing-xxxm;
+      height: @size-spacing-xxxm;
+      margin: 0 @size-spacing-xs 0 0;
       color: @palette-black-3;
       font-weight: @weight-font-medium;
-      font-size: 12px;
-      line-height: @size-spacing-l;
+      font-size: @size-font-12;
+      line-height: unit(@size-spacing-xxxm) / unit(@size-font-12);
+      text-align: center;
       border: 1px solid @palette-black-3;
       border-radius: @radius-border-pill;
     }