fix: update progress api and test

Author: wangxueliang

components/progress/__tests__/index.test.js

@@ -19,6 +19,11 @@ describe('Progress', () => {
     await asyncExpect(() => {
       expect(wrapper.findAll('.ant-progress-status-success')).toHaveLength(1);
     });
+
+    wrapper.setProps({ percent: 100, successPercent: 0 });
+    await asyncExpect(() => {
+      expect(wrapper.findAll('.ant-progress-status-success')).toHaveLength(0);
+    });
   });
 
   it('render out-of-range progress', async () => {

components/progress/circle.jsx

@@ -38,8 +38,8 @@ const Circle = {
     } = props;
     const circleSize = width || 120;
     const circleStyle = {
-      width: circleSize,
-      height: circleSize,
+      width: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
+      height: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
       fontSize: circleSize * 0.15 + 6,
     };
     const circleWidth = strokeWidth || 6;

components/progress/index.en-US.md

@@ -1,17 +1,37 @@
 ## API
 
+Properties that shared by all types.
+
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
+| type | to set the type, options: `line` `circle` `dashboard` | string | `line` |
 | format | template function of the content | function(percent, successPercent) | `percent => percent + '%'` |
-| gapDegree `(type=circle)` | the gap degree of half circle, 0 ~ 360 | number | 0 |
-| gapPosition `(type=circle)` | the gap position, options: `top` `bottom` `left` `right` | string | `top` |
 | percent | to set the completion percentage | number | 0 |
 | showInfo | whether to display the progress value and the status icon | boolean | true |
-| status | to set the status of the Progress, options: `normal` `success` `exception` `active` | string | `normal` |
-| strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | number | 10 |
-| strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6 |
+| status | to set the status of the Progress, options: `success` `exception` `active` `normal` | string | - |
 | strokeLinecap | to set the style of the progress linecap | Enum{ 'round', 'square' } | `round` |
 | strokeColor | color of progress bar | string | - |
-| successPercent | segmented success percent, works when `type="line"` | number | 0 |
-| type | to set the type, options: `line` `circle` `dashboard` | string | `line` |
-| width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | number | 120 |
+| successPercent | segmented success percent | number | 0 |
+
+### `type="line"`
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10 |
+
+### `type="circle"`
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| width | to set the canvas width of the circular progress, unit: `px` | number | 132 |
+| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
+
+### `type="dashboard"`
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| width | to set the canvas width of the dashboard progress, unit: `px` | number | 132 |
+| strokeWidth | to set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
+| gapDegree | the gap degree of half circle, 0 ~ 360 | number | 0 |
+| gapPosition | the gap position, options: `top` `bottom` `left` `right` | string | `top` |
+

components/progress/index.zh-CN.md

@@ -1,17 +1,37 @@
 ## API
 
+各类型共用的属性。
+
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| type | 类型，可选 `line` `circle` `dashboard` | string | `line` |
 | format | 内容的模板函数 | function(percent, successPercent) | `percent => percent + '%'` |
-| gapDegree `(type=circle)` | 圆形进度条缺口角度，可取值 0 ~ 360 | number | 0 |
-| gapPosition `(type=circle)` | 圆形进度条缺口位置 | Enum{ 'top', 'bottom', 'left', 'right' } | `top` |
 | percent | 百分比 | number | 0 |
 | showInfo | 是否显示进度数值或状态图标 | boolean | true |
-| status | 状态，可选：`normal` `success` `exception` `active` | string | `normal` |
-| strokeWidth `(type=line)` | 进度条线的宽度，单位 px | number | 10 |
-| strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
+| status | 状态，可选：`success` `exception` `active` `normal` | string | - |
 | strokeLinecap | | Enum{ 'round', 'square' } | `round` |
 | strokeColor | 进度条的色彩 | string | - |
-| successPercent | 已完成的分段百分比，`type="line"` 时有效 | number | 0 |
-| type | 类型，可选 `line` `circle` `dashboard` | string | line |
-| width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 120 |
+| successPercent | 已完成的分段百分比 | number | 0 |
+
+### `type="line"`
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
+
+### `type="circle"`
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 圆形进度条画布宽度，单位 px | number | 132 |
+| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
+
+### `type="dashboard"`
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 仪表盘进度条画布宽度，单位 px | number | 132 |
+| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
+| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 360 | number | 0 |
+| gapPosition | 仪表盘进度条缺口位置 | Enum{ 'top', 'bottom', 'left', 'right' } | `top` |
+

components/progress/line.jsx

@@ -16,13 +16,13 @@ const Line = {
     } = props;
     const percentStyle = {
       width: `${validProgress(percent)}%`,
-      height: strokeWidth || (size === 'small' ? 6 : 8),
+      height: strokeWidth || (size === 'small' ? '6px' : '8px'),
       background: strokeColor,
       borderRadius: strokeLinecap === 'square' ? 0 : '100px',
     };
     const successPercentStyle = {
       width: `${validProgress(successPercent)}%`,
-      height: strokeWidth || (size === 'small' ? 6 : 8),
+      height: strokeWidth || (size === 'small' ? '6px' : '8px'),
       borderRadius: strokeLinecap === 'square' ? 0 : '100px',
     };
     const successSegment =

components/vc-progress/src/Circle.js

@@ -8,7 +8,7 @@ import { propTypes, defaultProps } from './types';
 const circlePropTypes = {
   ...propTypes,
   gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  gapDegree: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  gapDegree: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
 };
 
 const circleDefaultProps = {