fix: change progress to percent in success props & warning in Progress (#25356)

* fix: warning in Progress

* feat: update api

* feat: update

* update

* update demo

* feat: add test case

* update test case

components/progress/Circle.tsx

@@ -12,9 +12,13 @@ interface CircleProps extends ProgressProps {
 
 function getPercentage({ percent, success, successPercent }: CircleProps) {
   const ptg = validProgress(percent);
+  /** @deprecated Use `percent` instead */
   if (success && 'progress' in success) {
     successPercent = success.progress;
   }
+  if (success && 'percent' in success) {
+    successPercent = success.percent;
+  }
   if (!successPercent) {
     return ptg;
   }
@@ -25,9 +29,13 @@ function getPercentage({ percent, success, successPercent }: CircleProps) {
 
 function getStrokeColor({ success, strokeColor, successPercent }: CircleProps) {
   const color = strokeColor || null;
+  /** @deprecated Use `percent` instead */
   if (success && 'progress' in success) {
     successPercent = success.progress;
   }
+  if (success && 'percent' in success) {
+    successPercent = success.percent;
+  }
   if (!successPercent) {
     return color;
   }

components/progress/Line.tsx

@@ -105,10 +105,15 @@ const Line: React.FC<LineProps> = props => {
   };
 
   let { successPercent } = props;
+  /** @deprecated Use `percent` instead */
   if (success && 'progress' in success) {
     successPercent = success.progress;
   }
 
+  if (success && 'percent' in success) {
+    successPercent = success.percent;
+  }
+
   let successPercentStyle = {
     width: `${validProgress(successPercent)}%`,
     height: strokeWidth || (size === 'small' ? 6 : 8),

components/progress/__tests__/index.test.js

@@ -6,17 +6,18 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 
 describe('Progress', () => {
+
   mountTest(Progress);
   rtlTest(Progress);
 
   it('successPercent should decide the progress status when it exists', () => {
-    const wrapper = mount(<Progress percent={100} success={{ progress: 50 }} />);
+    const wrapper = mount(<Progress percent={100} success={{ percent: 50 }} />);
     expect(wrapper.find('.ant-progress-status-success')).toHaveLength(0);
 
-    wrapper.setProps({ percent: 50, success: { progress: 100 } });
+    wrapper.setProps({ percent: 50, success: { percent: 100 } });
     expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
 
-    wrapper.setProps({ percent: 100, success: { progress: 0 } });
+    wrapper.setProps({ percent: 100, success: { percent: 0 } });
     expect(wrapper.find('.ant-progress-status-success')).toHaveLength(0);
   });
 
@@ -36,7 +37,7 @@ describe('Progress', () => {
   });
 
   it('render negative successPercent', () => {
-    const wrapper = mount(<Progress percent={50} success={{ progress: -20 }} />);
+    const wrapper = mount(<Progress percent={50} success={{ percent: -20 }} />);
     expect(wrapper.render()).toMatchSnapshot();
   });
 
@@ -44,7 +45,7 @@ describe('Progress', () => {
     const wrapper = mount(
       <Progress
         percent={50}
-        success={{ progress: 10 }}
+        success={{ percent: 10 }}
         format={(percent, successPercent) => `${percent} ${successPercent}`}
       />,
     );
@@ -83,7 +84,7 @@ describe('Progress', () => {
 
   it('render successColor progress', () => {
     const wrapper = mount(
-      <Progress percent={60} success={{ progress: 30, strokeColor: '#ffffff' }} />,
+      <Progress percent={60} success={{ percent: 30, strokeColor: '#ffffff' }} />,
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
@@ -166,4 +167,24 @@ describe('Progress', () => {
       'rgb(24, 144, 255)',
     );
   });
+
+  it('should warnning if use `progress` in success', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(
+      <Progress percent={60} success={{ progress: 30 }} />,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Progress] `success.progress` is deprecated. Please use `success.percent` instead.',
+    );
+  })
+
+  it ('should warnning if use `progress` in success in type Circle', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(
+      <Progress percent={60} success={{ progress: 30 }} type="circle"/>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Progress] `success.progress` is deprecated. Please use `success.percent` instead.',
+    );
+  })
 });

components/progress/demo/segment.md

@@ -19,15 +19,15 @@ import { Tooltip, Progress } from 'antd';
 ReactDOM.render(
   <>
     <Tooltip title="3 done / 3 in progress / 4 to do">
-      <Progress percent={60} success={{ progress: 30 }} />
+      <Progress percent={60} success={{ percent: 30 }} />
     </Tooltip>
 
     <Tooltip title="3 done / 3 in progress / 4 to do">
-      <Progress percent={60} success={{ progress: 30 }} type="circle" />
+      <Progress percent={60} success={{ percent: 30 }} type="circle" />
     </Tooltip>
 
     <Tooltip title="3 done / 3 in progress / 4 to do">
-      <Progress percent={60} success={{ progress: 30 }} type="dashboard" />
+      <Progress percent={60} success={{ percent: 30 }} type="dashboard" />
     </Tooltip>
   </>,
   mountNode,

components/progress/index.en-US.md

@@ -28,7 +28,7 @@ Properties that shared by all types.
 | strokeLinecap | to set the style of the progress linecap | `round` \| `square` | `round` |
 | strokeColor | color of progress bar | string | - |
 | trailColor | color of unfilled part | string | - |
-| success | configs of successfully progress bar | { progress: number, strokeColor: string } | - |
+| success | configs of successfully progress bar | { percent: number, strokeColor: string } | - |
 
 ### `type="line"`
 

components/progress/index.zh-CN.md

@@ -29,7 +29,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
 | strokeLinecap | - | `round` \| `square` | `round` |
 | strokeColor | 进度条的色彩 | string | - |
 | trailColor | 未完成的分段的颜色 | string | - |
-| success | 成功进度条相关配置 | { progress: number, strokeColor: string } | - |
+| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - |
 
 ### `type="line"`
 

components/progress/progress.tsx

@@ -23,6 +23,8 @@ type FromToGradients = { from: string; to: string };
 export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients);
 
 export interface SuccessProps {
+  percent?: number;
+  /** @deprecated Use `percent` instead */
   progress?: number;
   strokeColor?: string;
 }
@@ -65,9 +67,13 @@ export default class Progress extends React.Component<ProgressProps> {
   getPercentNumber() {
     const { percent = 0, success } = this.props;
     let { successPercent } = this.props;
+    /** @deprecated Use `percent` instead */
     if (success && 'progress' in success) {
       successPercent = success.progress;
     }
+    if (success && 'percent' in success) {
+      successPercent = success.percent;
+    }
     return parseInt(
       successPercent !== undefined ? successPercent.toString() : percent.toString(),
       10,
@@ -86,8 +92,12 @@ export default class Progress extends React.Component<ProgressProps> {
     const { showInfo, format, type, percent, success } = this.props;
     let { successPercent } = this.props;
     if (success && 'progress' in success) {
+      devWarning(false, 'Progress', '`success.progress` is deprecated. Please use `success.percent` instead.');
       successPercent = success.progress;
     }
+    if (success && 'percent' in success) {
+      successPercent = success.percent;
+    }
     if (!showInfo) return null;
 
     let text;
@@ -124,7 +134,7 @@ export default class Progress extends React.Component<ProgressProps> {
     const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
 
     devWarning(
-      'successPercent' in props,
+      !('successPercent' in props),
       'Progress',
       '`successPercent` is deprecated. Please use `success` instead.',
     );