feat: CP support Steps className and style (#43073)

* feat: CP support Steps className and style

* fix lint

* fix: remove useMemo

* docs: update docs

* Update index.tsx

* fix

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

@@ -5,6 +5,7 @@ import Divider from '../../divider';
 import Segmented from '../../segmented';
 import Space from '../../space';
 import Spin from '../../spin';
+import Steps from '../../steps';
 import Typography from '../../typography';
 
 describe('ConfigProvider support style and className props', () => {
@@ -149,4 +150,17 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('config-provider-segmented');
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
+
+  it('Should Steps className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        steps={{ className: 'config-provider-steps', style: { backgroundColor: 'red' } }}
+      >
+        <Steps items={[{ title: 'title', description: 'description' }]} />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-steps');
+    expect(element).toHaveClass('config-provider-steps');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
 });

components/config-provider/context.ts

@@ -101,6 +101,10 @@ export interface ConfigConsumerProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  steps?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@@ -109,6 +109,7 @@ const {
 | select | Set Select common props | { showSearch?: boolean } | - |  |
 | space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 
 ## FAQ

components/config-provider/index.tsx

@@ -150,6 +150,10 @@ export interface ConfigProviderProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  steps?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -241,6 +245,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     spin,
     typography,
     divider,
+    steps,
   } = props;
 
   // =================================== Warning ===================================
@@ -296,6 +301,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     spin,
     typography,
     divider,
+    steps,
   };
 
   const config = {

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

@@ -111,6 +111,7 @@ const {
 | select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - |  |
 | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 
 ## FAQ

components/segmented/index.tsx

@@ -95,13 +95,13 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref)
     hashId,
   );
 
-  const mergeStyle: React.CSSProperties = { ...segmented?.style, ...style };
+  const mergedStyle: React.CSSProperties = { ...segmented?.style, ...style };
 
   return wrapSSR(
     <RcSegmented
       {...restProps}
       className={cls}
-      style={mergeStyle}
+      style={mergedStyle}
       options={extendedOptions}
       ref={ref}
       prefixCls={prefixCls}

components/spin/index.tsx

@@ -137,12 +137,12 @@ const Spin: React.FC<SpinClassProps> = (props) => {
   // fix https://fb.me/react-unknown-prop
   const divProps = omit(restProps, ['indicator', 'prefixCls']);
 
-  const mergeStyle: React.CSSProperties = { ...spin?.style, ...style };
+  const mergedStyle: React.CSSProperties = { ...spin?.style, ...style };
 
   const spinElement: React.ReactNode = (
     <div
       {...divProps}
-      style={mergeStyle}
+      style={mergedStyle}
       className={spinClassName}
       aria-live="polite"
       aria-busy={spinning}

components/steps/index.tsx

@@ -64,10 +64,11 @@ const Steps: CompoundedComponent = (props) => {
     responsive = true,
     current = 0,
     children,
+    style,
     ...restProps
   } = props;
   const { xs } = useBreakpoint(responsive);
-  const { getPrefixCls, direction: rtlDirection } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction: rtlDirection, steps } = React.useContext(ConfigContext);
 
   const realDirectionValue = React.useMemo<RcStepsProps['direction']>(
     () => (responsive && xs ? 'vertical' : direction),
@@ -85,7 +86,10 @@ const Steps: CompoundedComponent = (props) => {
   const mergedItems = useLegacyItems(items, children);
   const mergedPercent = isInline ? undefined : percent;
 
+  const mergedStyle: React.CSSProperties = { ...steps?.style, ...style };
+
   const stepsClassName = classNames(
+    steps?.className,
     {
       [`${prefixCls}-rtl`]: rtlDirection === 'rtl',
       [`${prefixCls}-with-progress`]: mergedPercent !== undefined,
@@ -127,6 +131,7 @@ const Steps: CompoundedComponent = (props) => {
     <RcSteps
       icons={icons}
       {...restProps}
+      style={mergedStyle}
       current={current}
       size={size}
       items={mergedItems}