feat: (Steps) remove size prop and add some CSS variables

ant-design · Jan 7, 2022 · 6c7ba06 · 6c7ba06
1 parent 91d3c7f
commit 6c7ba06
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 22 deletions.
diff --git a/src/components/steps/demos/demo1.tsx b/src/components/steps/demos/demo1.tsx
@@ -58,7 +58,16 @@ export default () => {
       </DemoBlock>
 
       <DemoBlock title='自定义图标和大小'>
-        <Steps direction='vertical' current={1} size='large'>
+        <Steps
+          direction='vertical'
+          current={1}
+          style={{
+            '--title-font-size': '17px',
+            '--description-font-size': '15px',
+            '--indicator-margin-right': '12px',
+            '--icon-size': '22px',
+          }}
+        >
           <Step
             title='填写机构信息'
             description='这里是一些描述'

diff --git a/src/components/steps/index.en.md b/src/components/steps/index.en.md
@@ -2,16 +2,28 @@
 
 <code src="./demos/demo1.tsx"></code>
 
-## API
+## Steps
+
+### Props
 
 | Name      | Description                                                                                                                    | Type                         | Default        |
 | --------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------- |
 | current   | The specified current step, counting from 0. In the child Step element, the status can be overridden by the `status` attribute | `number`                     | `0`            |
 | direction | The specified direction of the step bar. Currently supports horizontal (`horizontal`) and vertical (`vertical`) two directions | `'horizontal' \| 'vertical'` | `'horizontal'` |
-| size      | The size preset.                                                                                                               | `'small' \| 'large'`         | `'small'`      |
+
+### CSS Variables
+
+| Name                     | Description                                         | Default |
+| ------------------------ | --------------------------------------------------- | ------- |
+| --title-font-size        | Font size of title.                                 | `13px`  |
+| --description-font-size  | Font size of description.                           | `12px`  |
+| --indicator-margin-right | The extra space between indicator and text content. | `0`     |
+| --icon-size              | Size of the icons in the indicator.                 | `18px`  |
 
 ## Steps.Step
 
+### Props
+
 | Name        | Description                                                                                                                                                                                                                                               | Type                                         | Default  |
 | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- |
 | title       | Title                                                                                                                                                                                                                                                     | `ReactNode`                                  | -        |

diff --git a/src/components/steps/index.zh.md b/src/components/steps/index.zh.md
@@ -2,16 +2,28 @@
 
 <code src="./demos/demo1.tsx"></code>
 
-## 属性
+## Steps
+
+### 属性
 
 | 属性      | 说明                                                                          | 类型                         | 默认值         |
 | --------- | ----------------------------------------------------------------------------- | ---------------------------- | -------------- |
 | current   | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | `number`                     | `0`            |
 | direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向      | `'horizontal' \| 'vertical'` | `'horizontal'` |
-| size      | 步骤条的大小                                                                  | `'small' \| 'large'`         | `'small'`      |
+
+### CSS 变量
+
+| 属性                     | 说明                                       | 默认值 |
+| ------------------------ | ------------------------------------------ | ------ |
+| --title-font-size        | 标题的字号                                 | `13px` |
+| --description-font-size  | 描述的字号                                 | `12px` |
+| --indicator-margin-right | 左边的指示器和右边的文字内容之间的额外间距 | `0`    |
+| --icon-size              | 指示器上图标的大小                         | `18px` |
 
 ## Steps.Step
 
+### 属性
+
 | 属性        | 说明                                                                                                                                  | 类型                                         | 默认值   |
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- |
 | title       | 标题                                                                                                                                  | `ReactNode`                                  | -        |

diff --git a/src/components/steps/steps.less b/src/components/steps/steps.less
@@ -56,16 +56,9 @@
 .@{class-prefix-steps} {
   --title-font-size: 13px;
   --description-font-size: 12px;
-  --indicator-margin: 0;
+  --indicator-margin-right: 0;
   --icon-size: 18px;
 
-  &&-size-large {
-    --title-font-size: 17px;
-    --description-font-size: 15px;
-    --indicator-margin: 12px;
-    --icon-size: 22px;
-  }
-
   width: 100%;
   box-sizing: border-box;
 
@@ -119,7 +112,7 @@
       .@{class-prefix-step}-indicator {
         flex: none;
         width: 24px;
-        margin-right: var(--indicator-margin);
+        margin-right: var(--indicator-margin-right);
 
         &::after {
           left: 50%;

diff --git a/src/components/steps/steps.tsx b/src/components/steps/steps.tsx
@@ -14,23 +14,22 @@ type Direction = 'horizontal' | 'vertical'
 export type StepsProps = {
   current?: number
   direction?: Direction
-  size?: 'small' | 'large'
-} & NativeProps
+} & NativeProps<
+  | '--title-font-size'
+  | '--description-font-size'
+  | '--indicator-margin-right'
+  | '--icon-size'
+>
 
 const defaultProps = {
   current: 0,
   direction: 'horizontal',
-  size: 'small',
 }
 
 export const Steps: FC<StepsProps> = p => {
   const props = mergeProps(defaultProps, p)
   const { direction, current } = props
-  const classString = classNames(
-    classPrefix,
-    `${classPrefix}-${direction}`,
-    `${classPrefix}-size-${props.size}`
-  )
+  const classString = classNames(classPrefix, `${classPrefix}-${direction}`)
 
   return withNativeProps(
     props,