Progress: add color attribute (#10352)

examples/docs/en-US/progress.md

@@ -19,6 +19,7 @@ Progress is used to show the progress of current operation, and inform the user
 ```html
 <el-progress :percentage="0"></el-progress>
 <el-progress :percentage="70"></el-progress>
+<el-progress :percentage="80" color="#8e71c7"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
 ```
@@ -32,6 +33,7 @@ In this case the percentage takes no additional space.
 ```html
 <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
 ```
@@ -43,6 +45,7 @@ In this case the percentage takes no additional space.
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
+<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
 ``` 
@@ -56,6 +59,6 @@ In this case the percentage takes no additional space.
 | stroke-width | the width of progress bar | number | — | 6 |
 | text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
 | status | the current status of progress bar | string | success/exception | — |
+| color  | the color of progress bar, can override the color of the current status | string | — | — |
 | width | the canvas width of circle progress bar | number | — | 126 |
 | show-text | whether to show percentage | boolean | — | true |
-

examples/docs/es/progress.md

@@ -18,6 +18,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
 ```html
 <el-progress :percentage="0"></el-progress>
 <el-progress :percentage="70"></el-progress>
+<el-progress :percentage="80" color="#8e71c7"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
 ```
@@ -30,6 +31,7 @@ En este caso el porcentage no toma espacio adicional.
 ```html
 <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
 ```
@@ -41,6 +43,7 @@ En este caso el porcentage no toma espacio adicional.
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
+<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
 ```
@@ -56,4 +59,3 @@ En este caso el porcentage no toma espacio adicional.
 | status       | estado actual de la barra de progreso    | string  | success/exception | —           |
 | width        | ancho del canvas que contiene la barra de progreso circula | number  | —                 | 126         |
 | show-text    | mostrar porcentaje                       | boolean | —                 | true        |
-

examples/docs/zh-CN/progress.md

@@ -21,6 +21,7 @@
 ```html
 <el-progress :percentage="0"></el-progress>
 <el-progress :percentage="70"></el-progress>
+<el-progress :percentage="80" color="#8e71c7"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
 ```
@@ -35,6 +36,7 @@
 ```html
 <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
 ```
@@ -47,6 +49,7 @@
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
+<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
 ```
@@ -60,5 +63,6 @@
 | stroke-width  | 进度条的宽度，单位 px | number          | — | 6 |
 | text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用） | Boolean | — | false |
 | status  | 进度条当前状态 | string | success/exception | — |
+| color  | 进度条颜色（自定义时会覆盖 status 状态颜色） | string | — | — |
 | width  | 环形进度条画布宽度（只在 type=circle 时可用） | number |  | 126 |
 | show-text  | 是否显示进度条文字内容 | boolean | — | true |

packages/progress/src/progress.vue

@@ -70,12 +70,17 @@
       showText: {
         type: Boolean,
         default: true
+      },
+      color: {
+        type: String,
+        default: ''
       }
     },
     computed: {
       barStyle() {
         const style = {};
         style.width = this.percentage + '%';
+        style.backgroundColor = this.color;
         return style;
       },
       relativeStrokeWidth() {
@@ -100,15 +105,19 @@
       },
       stroke() {
         let ret;
-        switch (this.status) {
-          case 'success':
-            ret = '#13ce66';
-            break;
-          case 'exception':
-            ret = '#ff4949';
-            break;
-          default:
-            ret = '#20a0ff';
+        if (this.color) {
+          ret = this.color;
+        } else {
+          switch (this.status) {
+            case 'success':
+              ret = '#13ce66';
+              break;
+            case 'exception':
+              ret = '#ff4949';
+              break;
+            default:
+              ret = '#20a0ff';
+          }
         }
         return ret;
       },

test/unit/specs/progress.spec.js

@@ -95,4 +95,12 @@ describe('Progress', () => {
     }, true);
     expect(vm.$el.querySelector('.el-progress-bar__innerText').offsetTop).to.be.equal(12);
   });
+  it('color', () => {
+    vm = createVue({
+      template: `
+      <el-progress :percentage="50" color="rgb(0, 0, 0)"></el-progress>
+      `
+    }, true);
+    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(0, 0, 0)');
+  });
 });