From b558db309364ccc12c8e4bfd06c48c7c2eeedc47 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 22 Oct 2021 15:27:00 +0800
Subject: [PATCH] feat(Progress): add --van-progress-inactive-color var (#9711)

* feat(Progress): add --van-progress-inactive-color var

* fix: doc
---
 packages/vant/src/progress/Progress.tsx              | 12 +++++++++---
 packages/vant/src/progress/README.md                 |  1 +
 packages/vant/src/progress/README.zh-CN.md           |  1 +
 packages/vant/src/progress/demo/index.vue            |  2 +-
 packages/vant/src/progress/index.less                |  9 +++++++++
 .../progress/test/__snapshots__/demo.spec.ts.snap    | 12 ++++++------
 packages/vant/src/progress/var.less                  |  1 +
 7 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/vant/src/progress/Progress.tsx b/packages/vant/src/progress/Progress.tsx
index 1b780e18c..20ab46e42 100644
--- a/packages/vant/src/progress/Progress.tsx
+++ b/packages/vant/src/progress/Progress.tsx
@@ -28,7 +28,7 @@ export default defineComponent({
 
   setup(props) {
     const background = computed(() =>
-      props.inactive ? '#cacaca' : props.color
+      props.inactive ? undefined : props.color
     );
 
     const renderPivot = () => {
@@ -44,7 +44,10 @@ export default defineComponent({
         };
 
         return (
-          <span style={style} class={bem('pivot')}>
+          <span
+            style={style}
+            class={bem('pivot', { inactive: props.inactive })}
+          >
             {text}
           </span>
         );
@@ -64,7 +67,10 @@ export default defineComponent({
 
       return (
         <div class={bem()} style={rootStyle}>
-          <span class={bem('portion')} style={portionStyle}></span>
+          <span
+            class={bem('portion', { inactive: props.inactive })}
+            style={portionStyle}
+          />
           {renderPivot()}
         </div>
       );
diff --git a/packages/vant/src/progress/README.md b/packages/vant/src/progress/README.md
index 331d90a1c..7096975d7 100644
--- a/packages/vant/src/progress/README.md
+++ b/packages/vant/src/progress/README.md
@@ -98,6 +98,7 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | --van-progress-height | _4px_ | - |
 | --van-progress-color | _var(--van-primary-color)_ | - |
+| --van-progress-inactive-color | _var(--van-gray-5)_ | - |
 | --van-progress-background-color | _var(--van-gray-3)_ | - |
 | --van-progress-pivot-padding | _0 5px_ | - |
 | --van-progress-pivot-text-color | _var(--van-white)_ | - |
diff --git a/packages/vant/src/progress/README.zh-CN.md b/packages/vant/src/progress/README.zh-CN.md
index 127065e49..973093eca 100644
--- a/packages/vant/src/progress/README.zh-CN.md
+++ b/packages/vant/src/progress/README.zh-CN.md
@@ -102,6 +102,7 @@ progressRef.value?.resize();
 | ------------------------------------- | -------------------------- | ---- |
 | --van-progress-height                 | _4px_                      | -    |
 | --van-progress-color                  | _var(--van-primary-color)_ | -    |
+| --van-progress-inactive-color         | _var(--van-gray-5)_        | -    |
 | --van-progress-background-color       | _var(--van-gray-3)_        | -    |
 | --van-progress-pivot-padding          | _0 5px_                    | -    |
 | --van-progress-pivot-text-color       | _var(--van-white)_         | -    |
diff --git a/packages/vant/src/progress/demo/index.vue b/packages/vant/src/progress/demo/index.vue
index 81729969d..7deda273a 100644
--- a/packages/vant/src/progress/demo/index.vue
+++ b/packages/vant/src/progress/demo/index.vue
@@ -57,7 +57,7 @@ const reduce = () => {
   </demo-block>
 
   <demo-block :title="t('transition')">
-    <van-progress inactive :percentage="percentage" />
+    <van-progress :percentage="percentage" />
     <div style="margin-top: 15px">
       <van-button :text="t('add')" type="primary" size="small" @click="add" />
       <van-button
diff --git a/packages/vant/src/progress/index.less b/packages/vant/src/progress/index.less
index 0f69aa008..c42e556bf 100644
--- a/packages/vant/src/progress/index.less
+++ b/packages/vant/src/progress/index.less
@@ -3,6 +3,7 @@
 :root {
   --van-progress-height: @progress-height;
   --van-progress-color: @progress-color;
+  --van-progress-inactive-color: @progress-inactive-color;
   --van-progress-background-color: @progress-background-color;
   --van-progress-pivot-padding: @progress-pivot-padding;
   --van-progress-pivot-text-color: @progress-pivot-text-color;
@@ -27,6 +28,10 @@
     transform-origin: 0;
     transition: all var(--van-animation-duration-base)
       var(--van-animation-timing-function-enter);
+
+    &--inactive {
+      background: var(--van-progress-inactive-color);
+    }
   }
 
   &__pivot {
@@ -44,5 +49,9 @@
     border-radius: 1em;
     transition: all var(--van-animation-duration-base)
       var(--van-animation-timing-function-enter);
+
+    &--inactive {
+      background: var(--van-progress-inactive-color);
+    }
   }
 }
diff --git a/packages/vant/src/progress/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/progress/test/__snapshots__/demo.spec.ts.snap
index d14949d6c..3e7a23d63 100644
--- a/packages/vant/src/progress/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/progress/test/__snapshots__/demo.spec.ts.snap
@@ -31,12 +31,12 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-progress">
-    <span class="van-progress__portion"
-          style="background: rgb(202, 202, 202); transform: scaleX(0.5);"
+    <span class="van-progress__portion van-progress__portion--inactive"
+          style="transform: scaleX(0.5);"
     >
     </span>
-    <span style="left: 50%; transform: translate(-50%,-50%); background: rgb(202, 202, 202);"
-          class="van-progress__pivot"
+    <span style="left: 50%; transform: translate(-50%,-50%);"
+          class="van-progress__pivot van-progress__pivot--inactive"
     >
       50%
     </span>
@@ -80,10 +80,10 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-progress">
     <span class="van-progress__portion"
-          style="background: rgb(202, 202, 202); transform: scaleX(0.5);"
+          style="transform: scaleX(0.5);"
     >
     </span>
-    <span style="left: 50%; transform: translate(-50%,-50%); background: rgb(202, 202, 202);"
+    <span style="left: 50%; transform: translate(-50%,-50%);"
           class="van-progress__pivot"
     >
       50%
diff --git a/packages/vant/src/progress/var.less b/packages/vant/src/progress/var.less
index 6aa504372..b36bf94d2 100644
--- a/packages/vant/src/progress/var.less
+++ b/packages/vant/src/progress/var.less
@@ -2,6 +2,7 @@
 
 @progress-height: 4px;
 @progress-color: var(--van-primary-color);
+@progress-inactive-color: var(--van-gray-5);
 @progress-background-color: var(--van-gray-3);
 @progress-pivot-padding: 0 5px;
 @progress-pivot-text-color: var(--van-white);