From d17e0ae9b81afd8f826bc004e6490500a1a35c81 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 28 Feb 2021 19:50:16 +0800
Subject: [PATCH] feat(Step): add finish-icon slot (#8241)

---
 src/step/index.tsx                               |  6 +++++-
 src/steps/README.md                              |  9 +++++----
 src/steps/README.zh-CN.md                        |  7 ++++---
 src/steps/test/__snapshots__/index.spec.tsx.snap | 13 +++++++++++++
 src/steps/test/index.spec.tsx                    | 16 ++++++++++++++++
 5 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/step/index.tsx b/src/step/index.tsx
index 9c61a91e3..7e12d3a22 100644
--- a/src/step/index.tsx
+++ b/src/step/index.tsx
@@ -73,7 +73,11 @@ export default createComponent({
         );
       }
 
-      if (getStatus() === 'finish' && finishIcon) {
+      if (getStatus() === 'finish' && (finishIcon || slots['finish-icon'])) {
+        if (slots['finish-icon']) {
+          return slots['finish-icon']();
+        }
+
         return (
           <Icon
             class={bem('icon', 'finish')}
diff --git a/src/steps/README.md b/src/steps/README.md
index a223c55b4..39630d5d3 100644
--- a/src/steps/README.md
+++ b/src/steps/README.md
@@ -81,10 +81,11 @@ export default {
 
 ### Step Slots
 
-| Name          | Description          |
-| ------------- | -------------------- |
-| active-icon   | Custom active icon   |
-| inactive-icon | Custom inactive icon |
+| Name                 | Description          |
+| -------------------- | -------------------- |
+| active-icon          | Custom active icon   |
+| inactive-icon        | Custom inactive icon |
+| finish-icon `v3.0.7` | Custom finish icon   | _string_ | - |
 
 ### Steps Events
 
diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md
index c46a295ee..e6980cb10 100644
--- a/src/steps/README.zh-CN.md
+++ b/src/steps/README.zh-CN.md
@@ -91,10 +91,11 @@ export default {
 
 ### Step Slots
 
-| 名称          | 说明                 |
-| ------------- | -------------------- |
-| active-icon   | 自定义激活状态图标   |
+| 名称 | 说明 |
+| --- | --- |
+| active-icon | 自定义激活状态图标 |
 | inactive-icon | 自定义未激活状态图标 |
+| finish-icon `v3.0.7` | 自定义已完成步骤对应的底部图标，优先级高于 `inactive-icon` | _string_ | - |
 
 ### Steps Events
 
diff --git a/src/steps/test/__snapshots__/index.spec.tsx.snap b/src/steps/test/__snapshots__/index.spec.tsx.snap
index b02f41aff..f2820f3e8 100644
--- a/src/steps/test/__snapshots__/index.spec.tsx.snap
+++ b/src/steps/test/__snapshots__/index.spec.tsx.snap
@@ -63,6 +63,19 @@ exports[`should change inactive icon when using inactive-icon prop 1`] = `
 </div>
 `;
 
+exports[`should render finish icon slot correctly 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">
+    Custim Fiinsh Icon
+  </div>
+  <div class="van-step__line">
+  </div>
+</div>
+`;
+
 exports[`should render icon slot correctly 1`] = `
 <div class="van-steps van-steps--horizontal">
   <div class="van-steps__items">
diff --git a/src/steps/test/index.spec.tsx b/src/steps/test/index.spec.tsx
index e98dc1b7e..3d35f6b53 100644
--- a/src/steps/test/index.spec.tsx
+++ b/src/steps/test/index.spec.tsx
@@ -90,3 +90,19 @@ test('should change finish icon when using finish-icon prop', () => {
   expect(firstStep.find('.van-icon-foo').exists()).toBeTruthy();
   expect(firstStep.html()).toMatchSnapshot();
 });
+
+test('should render finish icon slot correctly', () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <Steps active={1}>
+          <Step v-slots={{ 'finish-icon': () => `Custim Fiinsh Icon` }}>A</Step>
+          <Step>B</Step>
+        </Steps>
+      );
+    },
+  });
+
+  const firstStep = wrapper.find('.van-step');
+  expect(firstStep.html()).toMatchSnapshot();
+});