feat(Steps): add inactive-color prop (#6758)

src/step/index.js

@@ -23,10 +23,18 @@ export default createComponent({
     },
 
     lineStyle() {
-      if (this.status === 'finish' && this.parent.activeColor) {
-        return {
-          background: this.parent.activeColor,
-        };
+      if (this.status === 'finish') {
+        return { background: this.parent.activeColor };
+      }
+      return { background: this.parent.inactiveColor };
+    },
+
+    titleStyle() {
+      if (this.active) {
+        return { color: this.parent.activeColor };
+      }
+      if (!this.status) {
+        return { color: this.parent.inactiveColor };
       }
     },
   },
@@ -65,15 +73,13 @@ export default createComponent({
 
   render() {
     const { status, active } = this;
-    const { activeColor, direction } = this.parent;
-
-    const titleStyle = active && { color: activeColor };
+    const { direction } = this.parent;
 
     return (
       <div class={[BORDER, bem([direction, { [status]: status }])]}>
         <div
           class={bem('title', { active })}
-          style={titleStyle}
+          style={this.titleStyle}
           onClick={this.onClickStep}
         >
           {this.slots()}

src/steps/README.md

@@ -67,13 +67,14 @@ export default {
 
 ### Steps Props
 
-| Attribute     | Description              | Type               | Default      |
-| ------------- | ------------------------ | ------------------ | ------------ |
-| active        | Active step              | _number \| string_ | `0`          |
-| direction     | Can be set to `vertical` | _string_           | `horizontal` |
-| active-color  | Active step color        | _string_           | `#07c160`    |
-| active-icon   | Active icon name         | _string_           | `checked`    |
-| inactive-icon | Active icon name         | _string_           | -            |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| active | Active step | _number \| string_ | `0` |
+| direction | Can be set to `vertical` | _string_ | `horizontal` |
+| active-color | Active step color | _string_ | `#07c160` |
+| inactive-color `v2.9.1` | Inactive step color | _string_ | `#969799` |
+| active-icon | Active icon name | _string_ | `checked` |
+| inactive-icon | Inactive icon name | _string_ | - |
 
 ### Step Slots
 

src/steps/README.zh-CN.md

@@ -78,6 +78,7 @@ export default {
 | active | 当前步骤 | _number \| string_ | `0` |
 | direction | 显示方向，可选值为 `vertical` | _string_ | `horizontal` |
 | active-color | 激活状态颜色 | _string_ | `#07c160` |
+| inactive-color `v2.9.1` | 未激活状态颜色 | _string_ | `#969799` |
 | active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` |
 | inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |
 

src/steps/index.js

@@ -9,6 +9,7 @@ export default createComponent({
   props: {
     activeColor: String,
     inactiveIcon: String,
+    inactiveColor: String,
     active: {
       type: [Number, String],
       default: 0,

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

@@ -27,3 +27,21 @@ exports[`icon slot 1`] = `
   </div>
 </div>
 `;
+
+exports[`inactive-color 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-icon van-icon-checked van-step__icon van-step__icon--active">
+          <!----></i></div>
+      <div class="van-step__line" style="background: red;"></div>
+    </div>
+    <div class="van-hairline van-step van-step--horizontal">
+      <div class="van-step__title" style="color: red;">B</div>
+      <div class="van-step__circle-container"><i class="van-step__circle" style="background: red;"></i></div>
+      <div class="van-step__line" style="background: red;"></div>
+    </div>
+  </div>
+</div>
+`;

src/steps/test/index.spec.js

@@ -47,3 +47,15 @@ test('click-step event', () => {
   expect(onClickStep).toHaveBeenCalledTimes(2);
   expect(onClickStep).toHaveBeenLastCalledWith(2);
 });
+
+test('inactive-color prop', () => {
+  const wrapper = mount({
+    template: `
+    <van-steps :active="0" inactive-color="red">
+      <van-step>A</van-step>
+      <van-step>B</van-step>
+    </van-steps>
+    `,
+  });
+  expect(wrapper).toMatchSnapshot();
+});