From 2055e3a1ee594367041ca1e81f41e241ed379c9f Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 28 Apr 2021 17:21:06 +0800
Subject: [PATCH] feat(Steps): add icon-prefix prop (#8631)

---
 src/step/Step.tsx                             | 18 +++++++++++++--
 src/steps/README.md                           |  1 +
 src/steps/README.zh-CN.md                     |  1 +
 src/steps/Steps.tsx                           |  1 +
 .../test/__snapshots__/index.spec.tsx.snap    | 20 ++++++++++++++---
 src/steps/test/index.spec.tsx                 | 22 ++++++++++++++++---
 6 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/step/Step.tsx b/src/step/Step.tsx
index c4452aacd..4e0873fd9 100644
--- a/src/step/Step.tsx
+++ b/src/step/Step.tsx
@@ -57,7 +57,13 @@ export default defineComponent({
     const onClickStep = () => parent.onClickStep(index.value);
 
     const renderCircle = () => {
-      const { finishIcon, activeIcon, activeColor, inactiveIcon } = parentProps;
+      const {
+        iconPrefix,
+        finishIcon,
+        activeIcon,
+        activeColor,
+        inactiveIcon,
+      } = parentProps;
 
       if (isActive()) {
         if (slots['active-icon']) {
@@ -69,6 +75,7 @@ export default defineComponent({
             class={bem('icon', 'active')}
             name={activeIcon}
             color={activeColor}
+            classPrefix={iconPrefix}
           />
         );
       }
@@ -83,6 +90,7 @@ export default defineComponent({
             class={bem('icon', 'finish')}
             name={finishIcon}
             color={activeColor}
+            classPrefix={iconPrefix}
           />
         );
       }
@@ -92,7 +100,13 @@ export default defineComponent({
       }
 
       if (inactiveIcon) {
-        return <Icon class={bem('icon')} name={inactiveIcon} />;
+        return (
+          <Icon
+            class={bem('icon')}
+            name={inactiveIcon}
+            classPrefix={iconPrefix}
+          />
+        );
       }
 
       return <i class={bem('circle')} style={lineStyle.value} />;
diff --git a/src/steps/README.md b/src/steps/README.md
index 29c07498e..244d59876 100644
--- a/src/steps/README.md
+++ b/src/steps/README.md
@@ -84,6 +84,7 @@ export default {
 | active-icon | Active icon name | _string_ | `checked` |
 | inactive-icon | Inactive icon name | _string_ | - |
 | finish-icon `v3.0.7` | Finish icon name | _string_ | - |
+| icon-prefix `v3.0.15` | Icon className prefix | _string_ | `van-icon` |
 
 ### Step Slots
 
diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md
index 90fce09ce..85cce2ded 100644
--- a/src/steps/README.zh-CN.md
+++ b/src/steps/README.zh-CN.md
@@ -90,6 +90,7 @@ export default {
 | finish-icon `v3.0.7` | 已完成步骤对应的底部图标，优先级高于 `inactive-icon`，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
 | active-color | 当前步骤和已完成步骤的颜色 | _string_ | `#07c160` |
 | inactive-color | 未激活步骤的颜色 | _string_ | `#969799` |
+| icon-prefix `v3.0.15` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 
 ### Step Slots
 
diff --git a/src/steps/Steps.tsx b/src/steps/Steps.tsx
index 4678b268b..f53986329 100644
--- a/src/steps/Steps.tsx
+++ b/src/steps/Steps.tsx
@@ -9,6 +9,7 @@ export const STEPS_KEY = Symbol(name);
 export type StepsDirection = 'horizontal' | 'vertical';
 
 const props = {
+  iconPrefix: String,
   finishIcon: String,
   activeColor: String,
   inactiveIcon: String,
diff --git a/src/steps/test/__snapshots__/index.spec.tsx.snap b/src/steps/test/__snapshots__/index.spec.tsx.snap
index f2820f3e8..e91fb7c4e 100644
--- a/src/steps/test/__snapshots__/index.spec.tsx.snap
+++ b/src/steps/test/__snapshots__/index.spec.tsx.snap
@@ -69,7 +69,7 @@ exports[`should render finish icon slot correctly 1`] = `
     A
   </div>
   <div class="van-step__circle-container">
-    Custim Fiinsh Icon
+    Custom Finish Icon
   </div>
   <div class="van-step__line">
   </div>
@@ -84,7 +84,7 @@ exports[`should render icon slot correctly 1`] = `
         B
       </div>
       <div class="van-step__circle-container">
-        Custim Active Icon
+        Custom Active Icon
       </div>
       <div class="van-step__line">
       </div>
@@ -94,7 +94,7 @@ exports[`should render icon slot correctly 1`] = `
         A
       </div>
       <div class="van-step__circle-container">
-        Custim Inactive Icon
+        Custom Inactive Icon
       </div>
       <div class="van-step__line">
       </div>
@@ -102,3 +102,17 @@ exports[`should render icon slot correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`should render icon-prefix correctly 1`] = `
+<div class="van-hairline van-step van-step--horizontal van-step--process">
+  <div class="van-step__title van-step__title--active">
+    B
+  </div>
+  <div class="van-step__circle-container">
+    <i class="van-badge__wrapper custom-icon custom-icon-checked van-step__icon van-step__icon--active">
+    </i>
+  </div>
+  <div class="van-step__line">
+  </div>
+</div>
+`;
diff --git a/src/steps/test/index.spec.tsx b/src/steps/test/index.spec.tsx
index 2bca8898a..57e186db8 100644
--- a/src/steps/test/index.spec.tsx
+++ b/src/steps/test/index.spec.tsx
@@ -7,8 +7,8 @@ test('should render icon slot correctly', () => {
     render() {
       return (
         <Steps active={0}>
-          <Step v-slots={{ 'active-icon': () => `Custim Active Icon` }}>B</Step>
-          <Step v-slots={{ 'inactive-icon': () => `Custim Inactive Icon` }}>
+          <Step v-slots={{ 'active-icon': () => `Custom Active Icon` }}>B</Step>
+          <Step v-slots={{ 'inactive-icon': () => `Custom Inactive Icon` }}>
             A
           </Step>
         </Steps>
@@ -96,7 +96,7 @@ test('should render finish icon slot correctly', () => {
     render() {
       return (
         <Steps active={1}>
-          <Step v-slots={{ 'finish-icon': () => `Custim Fiinsh Icon` }}>A</Step>
+          <Step v-slots={{ 'finish-icon': () => `Custom Finish Icon` }}>A</Step>
           <Step>B</Step>
         </Steps>
       );
@@ -106,3 +106,19 @@ test('should render finish icon slot correctly', () => {
   const firstStep = wrapper.find('.van-step');
   expect(firstStep.html()).toMatchSnapshot();
 });
+
+test('should render icon-prefix correctly', () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Steps active={1} iconPrefix="custom-icon">
+          <Step>A</Step>
+          <Step>B</Step>
+        </Steps>
+      );
+    },
+  });
+
+  const steps = wrapper.findAll('.van-step');
+  expect(steps[1].html()).toMatchSnapshot();
+});