Progress: add text status (#13198)

* add: text status in progress circle component

* Progress: update Chinse and Spanish docs and minor improvements

* update progress

examples/docs/en-US/progress.md

@@ -48,7 +48,8 @@ In this case the percentage takes no additional space.
 <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>
-``` 
+<el-progress type="circle" :percentage="100" status="text">Done</el-progress>
+```
 :::
 
 ### Attributes
@@ -58,7 +59,7 @@ In this case the percentage takes no additional space.
 | type | the type of progress bar | string | line/circle | line |
 | 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 | — |
+| status | the current status of progress bar | string | success/exception/text | — |
 | color  | background color of progress bar. Overrides `status` prop | string | — | — |
 | width | the canvas width of circle progress bar | number | — | 126 |
 | show-text | whether to show percentage | boolean | — | true |

examples/docs/es/progress.md

@@ -46,6 +46,7 @@ En este caso el porcentage no toma espacio adicional.
 <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>
+<el-progress type="circle" :percentage="100" status="text">Done</el-progress>
 ```
 :::
 
@@ -56,7 +57,7 @@ En este caso el porcentage no toma espacio adicional.
 | type         | tipo de barra de progreso                | string  | line/circle       | line        |
 | stroke-width | ancho de la barra de progreso            | number  | —                 | 6           |
 | text-inside  | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | —                 | false       |
-| status       | estado actual de la barra de progreso    | string  | success/exception | —           |
+| status       | estado actual de la barra de progreso    | string  | success/exception/text | —           |
 | color        | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string     | — |       — |
 | 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

@@ -52,6 +52,7 @@
 <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>
+<el-progress type="circle" :percentage="100" status="text">Done</el-progress>
 ```
 :::
 
@@ -62,7 +63,7 @@
 | type          | 进度条类型           | string         | line/circle | line |
 | stroke-width  | 进度条的宽度，单位 px | number          | — | 6 |
 | text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |
-| status  | 进度条当前状态 | string | success/exception | — |
+| status  | 进度条当前状态 | string | success/exception/text | — |
 | color  | 进度条背景色（会覆盖 status 状态颜色） | string | — | — |
 | width  | 环形进度条画布宽度（只在 type=circle 时可用） | number |  | 126 |
 | show-text  | 是否显示进度条文字内容 | boolean | — | true |

packages/progress/src/progress.vue

@@ -27,13 +27,12 @@
         <path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path>
       </svg>
     </div>
-    <div
-      class="el-progress__text"
-      v-if="showText && !textInside"
-      :style="{fontSize: progressTextSize + 'px'}"
-    >
+    <div class="el-progress__text" v-if="showText && !textInside" :style="{fontSize: progressTextSize + 'px'}">
       <template v-if="!status">{{percentage}}%</template>
-      <i v-else :class="iconClass"></i>
+      <template v-else>
+        <slot v-if="status === 'text'"></slot>
+        <i v-else :class="iconClass"></i>
+      </template>
     </div>
   </div>
 </template>
@@ -53,7 +52,8 @@
         validator: val => val >= 0 && val <= 100
       },
       status: {
-        type: String
+        type: String,
+        validator: val => ['text', 'success', 'exception'].indexOf(val) > -1
       },
       strokeWidth: {
         type: Number,

test/unit/specs/progress.spec.js

@@ -33,6 +33,7 @@ describe('Progress', () => {
           <el-progress ref="lineException" :percentage="0" status="exception"></el-progress>
           <el-progress type="circle" ref="circleSuccess" :percentage="100" status="success"></el-progress>
           <el-progress type="circle" ref="circleException" :percentage="0" status="exception"></el-progress>
+          <el-progress type="circle" ref="textException" :percentage="100" status="text">Done</el-progress>
         </div>
       `
     }, true);
@@ -45,6 +46,7 @@ describe('Progress', () => {
     expect(vm.$refs.circleSuccess.$el.querySelector('.el-progress__text .el-icon-check')).to.be.exist;
     expect(vm.$refs.circleException.$el.classList.contains('is-exception')).to.be.true;
     expect(vm.$refs.circleException.$el.querySelector('.el-progress__text .el-icon-close')).to.be.exist;
+    expect(vm.$refs.textException.$el.querySelector('.el-progress__text').innerText).to.be.equal('Done');
   });
   it('text inside', () => {
     vm = createVue({

types/progress.d.ts

@@ -1,7 +1,7 @@
 import { ElementUIComponent } from './component'
 
 export type ProgressType = 'line' | 'circle'
-export type ProgressStatus = 'success' | 'exception'
+export type ProgressStatus = 'success' | 'exception' | 'text'
 
 /** Progress Component */
 export declare class ElProgress extends ElementUIComponent {