feat: Progress.Circle support conic (ant-design#44404)

* feat: support conic

* test: update snapshot

* docs: update doc

* chore: clean up

* docs: update doc

* test: update snapshot

* test: update snapshot

* test: update snapshot

components/progress/demo/gradient-line.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-`linear-gradient` 的封装。推荐只传两种颜色。
+渐变色封装，`circle` 与 `dashboard` 设置渐变时 `strokeLinecap` 会被忽略。
 
 ## en-US
 
-A package of `linear-gradient`. It is recommended to only pass two colors.
+Gradient encapsulation, `circle` and `dashboard` will ignore `strokeLinecap` when setting gradient.

components/progress/demo/gradient-line.tsx

@@ -1,15 +1,24 @@
 import React from 'react';
 import { Progress, Space } from 'antd';
 
+const twoColors = { '0%': '#108ee9', '100%': '#87d068' };
+const conicColors = { '0%': '#87d068', '50%': '#ffe58f', '100%': '#ffccc7' };
+
 const App: React.FC = () => (
-  <>
-    <Progress percent={99.9} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
+  <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
+    <Progress percent={99.9} strokeColor={twoColors} />
     <Progress percent={99.9} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
     <Space wrap>
-      <Progress type="circle" percent={90} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
-      <Progress type="circle" percent={100} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
+      <Progress type="circle" percent={90} strokeColor={twoColors} />
+      <Progress type="circle" percent={100} strokeColor={twoColors} />
+      <Progress type="circle" percent={93} strokeColor={conicColors} />
+    </Space>
+    <Space wrap>
+      <Progress type="dashboard" percent={90} strokeColor={twoColors} />
+      <Progress type="dashboard" percent={100} strokeColor={twoColors} />
+      <Progress type="dashboard" percent={93} strokeColor={conicColors} />
     </Space>
-  </>
+  </div>
 );
 
 export default App;

components/progress/index.en-US.md

@@ -65,7 +65,7 @@ Properties that shared by all types.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - | - |
+| strokeColor | The color of circular progress, render gradient when passing an object | string \| { number%: string } | - | - |
 | strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - |
 
 ### `type="dashboard"`

components/progress/index.zh-CN.md

@@ -66,7 +66,7 @@ demo:
 
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | - |
+| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| { number%: string } | - | - |
 | strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
 
 ### `type="dashboard"`

components/progress/progress.tsx

@@ -1,10 +1,11 @@
+import * as React from 'react';
 import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import CheckOutlined from '@ant-design/icons/CheckOutlined';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import * as React from 'react';
+
 import warning from '../_util/warning';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
@@ -15,10 +16,11 @@ import useStyle from './style';
 import { getSize, getSuccessPercent, validProgress } from './utils';
 
 export const ProgressTypes = ['line', 'circle', 'dashboard'] as const;
-export type ProgressType = (typeof ProgressTypes)[number];
+export type ProgressType = typeof ProgressTypes[number];
 const ProgressStatuses = ['normal', 'exception', 'active', 'success'] as const;
 export type ProgressSize = 'default' | 'small';
-export type StringGradients = { [percentage: string]: string };
+export type StringGradients = Record<string, string>;
+
 type FromToGradients = { from: string; to: string };
 export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients);
 
@@ -38,7 +40,7 @@ export interface ProgressProps extends ProgressAriaProps {
   type?: ProgressType;
   percent?: number;
   format?: (percent?: number, successPercent?: number) => React.ReactNode;
-  status?: (typeof ProgressStatuses)[number];
+  status?: typeof ProgressStatuses[number];
   showInfo?: boolean;
   strokeWidth?: number;
   strokeLinecap?: 'butt' | 'square' | 'round';
@@ -82,7 +84,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
     );
   }, [percent, props.success, props.successPercent]);
 
-  const progressStatus = React.useMemo<(typeof ProgressStatuses)[number]>(() => {
+  const progressStatus = React.useMemo<typeof ProgressStatuses[number]>(() => {
     if (!ProgressStatuses.includes(status!) && percentNumber >= 100) {
       return 'success';
     }