feat: add successColor for Progress (#24655)

* feat: add successColor for Progress

* feat: update

* fix: update test

* remove snap

* feat: add test case

* refactor success

* feat: adjust styyle

* feat: add DevWarning

components/progress/Circle.tsx

@@ -10,8 +10,11 @@ interface CircleProps extends ProgressProps {
   progressStatus: string;
 }
 
-function getPercentage({ percent, successPercent }: CircleProps) {
+function getPercentage({ percent, success, successPercent }: CircleProps) {
   const ptg = validProgress(percent);
+  if (success && 'progress' in success) {
+    successPercent = success.progress;
+  }
   if (!successPercent) {
     return ptg;
   }
@@ -20,8 +23,11 @@ function getPercentage({ percent, successPercent }: CircleProps) {
   return [successPercent, validProgress(ptg - successPtg)];
 }
 
-function getStrokeColor({ successPercent, strokeColor }: CircleProps) {
+function getStrokeColor({ success, strokeColor, successPercent }: CircleProps) {
   const color = strokeColor || null;
+  if (success && 'progress' in success) {
+    successPercent = success.progress;
+  }
   if (!successPercent) {
     return color;
   }

components/progress/Line.tsx

@@ -61,14 +61,15 @@ const Line: React.FC<LineProps> = props => {
   const {
     prefixCls,
     percent,
-    successPercent,
     strokeWidth,
     size,
     strokeColor,
     strokeLinecap,
     children,
     trailColor,
+    success,
   } = props;
+
   let backgroundProps;
   if (strokeColor && typeof strokeColor !== 'string') {
     backgroundProps = handleGradient(strokeColor);
@@ -77,23 +78,45 @@ const Line: React.FC<LineProps> = props => {
       background: strokeColor,
     };
   }
+
   let trailStyle;
   if (trailColor && typeof trailColor === 'string') {
     trailStyle = {
       backgroundColor: trailColor,
     };
   }
+
+  let successColor;
+  if (success && 'strokeColor' in success) {
+    successColor = success.strokeColor;
+  }
+
+  let successStyle;
+  if (successColor && typeof successColor === 'string') {
+    successStyle = {
+      backgroundColor: successColor,
+    };
+  }
   const percentStyle = {
     width: `${validProgress(percent)}%`,
     height: strokeWidth || (size === 'small' ? 6 : 8),
     borderRadius: strokeLinecap === 'square' ? 0 : '',
     ...backgroundProps,
   };
-  const successPercentStyle = {
+
+  let { successPercent } = props;
+  if (success && 'progress' in success) {
+    successPercent = success.progress;
+  }
+
+  let successPercentStyle = {
     width: `${validProgress(successPercent)}%`,
     height: strokeWidth || (size === 'small' ? 6 : 8),
     borderRadius: strokeLinecap === 'square' ? 0 : '',
   };
+  if (successStyle) {
+    successPercentStyle = { ...successPercentStyle, ...successStyle };
+  }
   const successSegment =
     successPercent !== undefined ? (
       <div className={`${prefixCls}-success-bg`} style={successPercentStyle} />

components/progress/__tests__/__snapshots__/index.test.js.snap

@@ -500,6 +500,35 @@ exports[`Progress render strokeColor 3`] = `
 </Progress>
 `;
 
+exports[`Progress render successColor progress 1`] = `
+<div
+  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
+>
+  <div
+    class="ant-progress-outer"
+  >
+    <div
+      class="ant-progress-inner"
+    >
+      <div
+        class="ant-progress-bg"
+        style="width: 60%; height: 8px;"
+      />
+      <div
+        class="ant-progress-success-bg"
+        style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"
+      />
+    </div>
+  </div>
+  <span
+    class="ant-progress-text"
+    title="60%"
+  >
+    60%
+  </span>
+</div>
+`;
+
 exports[`Progress render trailColor progress 1`] = `
 <div
   class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"

components/progress/__tests__/index.test.js

@@ -10,13 +10,13 @@ describe('Progress', () => {
   rtlTest(Progress);
 
   it('successPercent should decide the progress status when it exists', () => {
-    const wrapper = mount(<Progress percent={100} successPercent={50} />);
+    const wrapper = mount(<Progress percent={100} success={{ progress: 50 }} />);
     expect(wrapper.find('.ant-progress-status-success')).toHaveLength(0);
 
-    wrapper.setProps({ percent: 50, successPercent: 100 });
+    wrapper.setProps({ percent: 50, success: { progress: 100 } });
     expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
 
-    wrapper.setProps({ percent: 100, successPercent: 0 });
+    wrapper.setProps({ percent: 100, success: { progress: 0 } });
     expect(wrapper.find('.ant-progress-status-success')).toHaveLength(0);
   });
 
@@ -36,7 +36,7 @@ describe('Progress', () => {
   });
 
   it('render negative successPercent', () => {
-    const wrapper = mount(<Progress percent={50} successPercent={-20} />);
+    const wrapper = mount(<Progress percent={50} success={{ progress: -20 }} />);
     expect(wrapper.render()).toMatchSnapshot();
   });
 
@@ -44,7 +44,7 @@ describe('Progress', () => {
     const wrapper = mount(
       <Progress
         percent={50}
-        successPercent={10}
+        success={{ progress: 10 }}
         format={(percent, successPercent) => `${percent} ${successPercent}`}
       />,
     );
@@ -81,6 +81,13 @@ describe('Progress', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  it('render successColor progress', () => {
+    const wrapper = mount(
+      <Progress percent={60} success={{ progress: 30, strokeColor: '#ffffff' }} />,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
   it('render dashboard zero gapDegree', () => {
     const wrapper = mount(<Progress type="dashboard" gapDegree={0} />);
     expect(wrapper.render()).toMatchSnapshot();

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} successPercent={30} />
+      <Progress percent={60} success={{ progress: 30 }} />
     </Tooltip>
 
     <Tooltip title="3 done / 3 in progress / 4 to do">
-      <Progress percent={60} successPercent={30} type="circle" />
+      <Progress percent={60} success={{ progress: 30 }} type="circle" />
     </Tooltip>
 
     <Tooltip title="3 done / 3 in progress / 4 to do">
-      <Progress percent={60} successPercent={30} type="dashboard" />
+      <Progress percent={60} success={{ progress: 30 }} type="dashboard" />
     </Tooltip>
   </>,
   mountNode,

components/progress/index.en-US.md

@@ -27,8 +27,8 @@ Properties that shared by all types.
 | status | to set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
 | strokeLinecap | to set the style of the progress linecap | `round` \| `square` | `round` |
 | strokeColor | color of progress bar | string | - |
-| successPercent | segmented success percent | number | 0 |
 | trailColor | color of unfilled part | string | - |
+| success | configs of successfully progress bar | { progress: number, strokeColor: string } | - |
 
 ### `type="line"`
 

components/progress/index.zh-CN.md

@@ -28,8 +28,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/%24X8q%26OILIY/Progress.svg
 | status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
 | strokeLinecap | - | `round` \| `square` | `round` |
 | strokeColor | 进度条的色彩 | string | - |
-| successPercent | 已完成的分段百分比 | number | 0 |
 | trailColor | 未完成的分段的颜色 | string | - |
+| success | 成功进度条相关配置 | { progress: number, strokeColor: string } | - |
 
 ### `type="line"`
 

components/progress/progress.tsx

@@ -8,6 +8,7 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import { tuple } from '../_util/type';
+import devWarning from '../_util/devWarning';
 import Line from './Line';
 import Circle from './Circle';
 import Steps from './Steps';
@@ -20,12 +21,17 @@ export type ProgressSize = 'default' | 'small';
 export type StringGradients = { [percentage: string]: string };
 type FromToGradients = { from: string; to: string };
 export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients);
+
+export interface SuccessProps {
+  progress?: number;
+  strokeColor?: string;
+}
+
 export interface ProgressProps {
   prefixCls?: string;
   className?: string;
   type?: ProgressType;
   percent?: number;
-  successPercent?: number;
   format?: (percent?: number, successPercent?: number) => React.ReactNode;
   status?: typeof ProgressStatuses[number];
   showInfo?: boolean;
@@ -34,11 +40,14 @@ export interface ProgressProps {
   strokeColor?: string | ProgressGradient;
   trailColor?: string;
   width?: number;
+  success?: SuccessProps;
   style?: React.CSSProperties;
   gapDegree?: number;
   gapPosition?: 'top' | 'bottom' | 'left' | 'right';
   size?: ProgressSize;
   steps?: number;
+  /** @deprecated Use `success` instead */
+  successPercent?: number;
 }
 
 export default class Progress extends React.Component<ProgressProps> {
@@ -54,7 +63,11 @@ export default class Progress extends React.Component<ProgressProps> {
   };
 
   getPercentNumber() {
-    const { successPercent, percent = 0 } = this.props;
+    const { percent = 0, success } = this.props;
+    let { successPercent } = this.props;
+    if (success && 'progress' in success) {
+      successPercent = success.progress;
+    }
     return parseInt(
       successPercent !== undefined ? successPercent.toString() : percent.toString(),
       10,
@@ -70,7 +83,11 @@ export default class Progress extends React.Component<ProgressProps> {
   }
 
   renderProcessInfo(prefixCls: string, progressStatus: typeof ProgressStatuses[number]) {
-    const { showInfo, format, type, percent, successPercent } = this.props;
+    const { showInfo, format, type, percent, success } = this.props;
+    let { successPercent } = this.props;
+    if (success && 'progress' in success) {
+      successPercent = success.progress;
+    }
     if (!showInfo) return null;
 
     let text;
@@ -105,6 +122,13 @@ export default class Progress extends React.Component<ProgressProps> {
     const prefixCls = getPrefixCls('progress', customizePrefixCls);
     const progressStatus = this.getProgressStatus();
     const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
+
+    devWarning(
+      'successPercent' in props,
+      'Progress',
+      '`successPercent` is deprecated. Please use `success` instead.',
+    );
+
     let progress;
     // Render progress shape
     if (type === 'line') {
@@ -148,7 +172,6 @@ export default class Progress extends React.Component<ProgressProps> {
           'status',
           'format',
           'trailColor',
-          'successPercent',
           'strokeWidth',
           'width',
           'gapDegree',
@@ -157,6 +180,8 @@ export default class Progress extends React.Component<ProgressProps> {
           'strokeLinecap',
           'percent',
           'steps',
+          'success',
+          'successPercent',
         ])}
         className={classString}
       >