feat(Steps): add finish-icon prop (#8103)

src/step/index.js

@@ -45,7 +45,7 @@ export default createComponent({
     };
 
     const renderCircle = () => {
-      const { activeIcon, activeColor, inactiveIcon } = parentProps;
+      const { finishIcon, activeIcon, activeColor, inactiveIcon } = parentProps;
 
       if (isActive()) {
         if (slots['active-icon']) {
@@ -61,6 +61,16 @@ export default createComponent({
         );
       }
 
+      if (getStatus() === 'finish' && finishIcon) {
+        return (
+          <Icon
+            class={bem('icon', 'finish')}
+            name={finishIcon}
+            color={activeColor}
+          />
+        );
+      }
+
       if (slots['inactive-icon']) {
         return slots['inactive-icon']();
       }

src/step/index.less

@@ -144,7 +144,8 @@
   &__title {
     transition: color @animation-duration-base;
 
-    &--active {
+    &--active,
+    &--finish {
       color: @step-active-color;
     }
   }

src/steps/README.md

@@ -77,6 +77,7 @@ export default {
 | inactive-color | Inactive step color | _string_ | `#969799` |
 | active-icon | Active icon name | _string_ | `checked` |
 | inactive-icon | Inactive icon name | _string_ | - |
+| finish-icon `v3.0.7` | Finish icon name | _string_ | - |
 
 ### Step Slots
 

src/steps/README.zh-CN.md

@@ -81,12 +81,13 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| active | 当前步骤 | _number \| string_ | `0` |
-| direction | 显示方向，可选值为 `vertical` | _string_ | `horizontal` |
-| active-color | 激活状态颜色 | _string_ | `#07c160` |
-| inactive-color | 未激活状态颜色 | _string_ | `#969799` |
-| active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` |
-| inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
+| active | 当前步骤对应的索引值 | _number \| string_ | `0` |
+| direction | 步骤条方向，可选值为 `vertical` | _string_ | `horizontal` |
+| active-icon | 当前步骤对应的底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` |
+| inactive-icon | 非当前步骤对应的底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
+| finish-icon `v3.0.7` | 已完成步骤对应的底部图标，优先级高于 `inactive-icon`，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
+| active-color | 当前步骤和已完成步骤的颜色 | _string_ | `#07c160` |
+| inactive-color | 未激活步骤的颜色 | _string_ | `#969799` |
 
 ### Step Slots
 

src/steps/index.js

@@ -7,6 +7,7 @@ export const STEPS_KEY = 'vanSteps';
 
 export default createComponent({
   props: {
+    finishIcon: String,
     activeColor: String,
     inactiveIcon: String,
     inactiveColor: String,

src/steps/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should change finish icon when using finish-icon prop 1`] = `
+<div class="van-hairline van-step van-step--horizontal van-step--finish">
+  <div class="van-step__title">
+    A
+  </div>
+  <div class="van-step__circle-container">
+    <i class="van-badge__wrapper van-icon van-icon-foo van-step__icon van-step__icon--finish">
+    </i>
+  </div>
+  <div class="van-step__line">
+  </div>
+</div>
+`;
+
 exports[`should change inactive color when using inactive-color prop 1`] = `
 <div class="van-steps van-steps--horizontal">
   <div class="van-steps__items">
@@ -38,30 +52,15 @@ exports[`should change inactive color when using inactive-color prop 1`] = `
 `;
 
 exports[`should change inactive icon when using inactive-icon prop 1`] = `
-<div class="van-steps van-steps--horizontal">
-  <div class="van-steps__items">
-    <div class="van-hairline van-step van-step--horizontal van-step--process">
-      <div class="van-step__title van-step__title--active">
-        A
-      </div>
-      <div class="van-step__circle-container">
-        <i class="van-badge__wrapper van-icon van-icon-checked van-step__icon van-step__icon--active">
-        </i>
-      </div>
-      <div class="van-step__line">
-      </div>
-    </div>
-    <div class="van-hairline van-step van-step--horizontal">
-      <div class="van-step__title">
-        B
-      </div>
-      <div class="van-step__circle-container">
-        <i class="van-badge__wrapper van-icon van-icon-foo van-step__icon">
-        </i>
-      </div>
-      <div class="van-step__line">
-      </div>
-    </div>
+<div class="van-hairline van-step van-step--horizontal">
+  <div class="van-step__title">
+    B
+  </div>
+  <div class="van-step__circle-container">
+    <i class="van-badge__wrapper van-icon van-icon-foo van-step__icon">
+    </i>
+  </div>
+  <div class="van-step__line">
   </div>
 </div>
 `;

src/steps/test/index.spec.js

@@ -68,5 +68,25 @@ test('should change inactive icon when using inactive-icon prop', () => {
       );
     },
   });
-  expect(wrapper.html()).toMatchSnapshot();
+
+  const steps = wrapper.findAll('.van-step');
+  expect(steps[1].find('.van-icon-foo').exists()).toBeTruthy();
+  expect(steps[1].html()).toMatchSnapshot();
+});
+
+test('should change finish icon when using finish-icon prop', () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Steps active={1} finishIcon="foo">
+          <Step>A</Step>
+          <Step>B</Step>
+        </Steps>
+      );
+    },
+  });
+
+  const firstStep = wrapper.find('.van-step');
+  expect(firstStep.find('.van-icon-foo').exists()).toBeTruthy();
+  expect(firstStep.html()).toMatchSnapshot();
 });