feat: ConfigProvider support Progress className and style properties (#43340)

components/config-provider/__tests__/style.test.tsx

@@ -21,6 +21,7 @@ import message from '../../message';
 import Modal from '../../modal';
 import notification from '../../notification';
 import Pagination from '../../pagination';
+import Progress from '../../progress';
 import Radio from '../../radio';
 import Rate from '../../rate';
 import Result from '../../result';
@@ -549,6 +550,34 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
   });
 
+  it('Should Progress className works', () => {
+    const { container } = render(
+      <ConfigProvider
+        progress={{
+          className: 'test-class',
+        }}
+      >
+        <Progress />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-progress')).toHaveClass('test-class');
+  });
+
+  it('Should Progress style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        progress={{
+          style: { color: 'red' },
+        }}
+      >
+        <Progress style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-progress')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should Descriptions className & style works', () => {
     const { container } = render(
       <ConfigProvider

components/config-provider/context.ts

@@ -107,6 +107,7 @@ export interface ConfigConsumerProps {
   layout?: ComponentStyleConfig;
   mentions?: ComponentStyleConfig;
   modal?: ComponentStyleConfig;
+  progress?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
   slider?: ComponentStyleConfig;
   breadcrumb?: ComponentStyleConfig;

components/config-provider/index.en-US.md

@@ -122,6 +122,7 @@ const {
 | modal | Set Modal common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | notification | Set Notification common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| progress | Set Progress common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | Set Radio common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | rate | Set Rate common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | Set Result common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -151,6 +151,7 @@ export interface ConfigProviderProps {
   layout?: ComponentStyleConfig;
   mentions?: ComponentStyleConfig;
   modal?: ComponentStyleConfig;
+  progress?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
   slider?: ComponentStyleConfig;
   breadcrumb?: ComponentStyleConfig;
@@ -274,6 +275,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     layout,
     mentions,
     modal,
+    progress,
     result,
     slider,
     breadcrumb,
@@ -360,6 +362,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     layout,
     mentions,
     modal,
+    progress,
     result,
     slider,
     breadcrumb,

components/config-provider/index.zh-CN.md

@@ -124,6 +124,7 @@ const {
 | modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | notification | 设置 Notification 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| progress | 设置 Progress 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | rate | 设置 Rate 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/progress/progress.tsx

@@ -70,6 +70,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
     type = 'line',
     status,
     format,
+    style,
     ...restProps
   } = props;
 
@@ -88,7 +89,11 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
     return status || 'normal';
   }, [status, percentNumber]);
 
-  const { getPrefixCls, direction } = React.useContext<ConfigConsumerProps>(ConfigContext);
+  const {
+    getPrefixCls,
+    direction,
+    progress: progressStyle,
+  } = React.useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('progress', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -167,6 +172,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
       [`${prefixCls}-${size}`]: typeof size === 'string',
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
+    progressStyle?.className,
     className,
     rootClassName,
     hashId,
@@ -175,6 +181,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
   return wrapSSR(
     <div
       ref={ref}
+      style={{ ...progressStyle?.style, ...style }}
       className={classString}
       role="progressbar"
       aria-valuenow={percentNumber}