feat: CP support Spin className and style (#43071)

* feat: CP support Spin className and style

* fix: remove useMemo

* docs: update docs

* fix

* fix

* fix

* fix

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

@@ -3,6 +3,7 @@ import ConfigProvider from '..';
 import { render } from '../../../tests/utils';
 import Divider from '../../divider';
 import Space from '../../space';
+import Spin from '../../spin';
 import Typography from '../../typography';
 
 describe('ConfigProvider support style and className props', () => {
@@ -121,4 +122,17 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-typography');
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
+
+  it('Should Spin className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        spin={{ className: 'config-provider-spin', style: { backgroundColor: 'red' } }}
+      >
+        <Spin />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-spin');
+    expect(element).toHaveClass('config-provider-spin');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
 });

components/config-provider/context.ts

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

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

@@ -107,6 +107,7 @@ const {
 | input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
 | 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 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 
 ## FAQ

components/config-provider/index.tsx

@@ -142,6 +142,10 @@ export interface ConfigProviderProps {
     className?: string;
     style?: React.CSSProperties;
   };
+  spin?: {
+    className?: string;
+    style?: React.CSSProperties;
+  };
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -229,6 +233,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     iconPrefixCls: customIconPrefixCls,
     theme,
     componentDisabled,
+    spin,
     typography,
     divider,
   } = props;
@@ -282,6 +287,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     getPrefixCls,
     iconPrefixCls,
     theme: mergedTheme,
+    spin,
     typography,
     divider,
   };

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

@@ -109,6 +109,7 @@ const {
 | input | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | 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 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 
 ## FAQ

components/spin/index.tsx

@@ -9,7 +9,7 @@ import { ConfigContext } from '../config-provider';
 import useStyle from './style/index';
 
 const SpinSizes = ['small', 'default', 'large'] as const;
-export type SpinSize = typeof SpinSizes[number];
+export type SpinSize = (typeof SpinSizes)[number];
 export type SpinIndicator = React.ReactElement<HTMLElement>;
 
 export interface SpinProps {
@@ -113,10 +113,11 @@ const Spin: React.FC<SpinClassProps> = (props) => {
     warning(!tip || isNestedPattern, 'Spin', '`tip` only work in nest pattern.');
   }
 
-  const { direction } = React.useContext<ConfigConsumerProps>(ConfigContext);
+  const { direction, spin } = React.useContext<ConfigConsumerProps>(ConfigContext);
 
   const spinClassName = classNames(
     prefixCls,
+    spin?.className,
     {
       [`${prefixCls}-sm`]: size === 'small',
       [`${prefixCls}-lg`]: size === 'large',
@@ -136,10 +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 spinElement: React.ReactNode = (
     <div
       {...divProps}
-      style={style}
+      style={mergeStyle}
       className={spinClassName}
       aria-live="polite"
       aria-busy={spinning}