feat: config-provider support checkbox className and style properties (#43107)

* feat: config-provider support checkbox className and style properties

* Revert "feat: config-provider support checkbox className and style properties"

This reverts commit 05c7678b5b.

* feat: config-provider support checkbox className and style properties

components/checkbox/Checkbox.tsx

@@ -66,7 +66,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
   },
   ref,
 ) => {
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, checkbox } = React.useContext(ConfigContext);
   const checkboxGroup = React.useContext(GroupContext);
   const { isFormItemInput } = React.useContext(FormItemInputContext);
   const contextDisabled = React.useContext(DisabledContext);
@@ -119,6 +119,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
       [`${prefixCls}-wrapper-disabled`]: mergedDisabled,
       [`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
     },
+    checkbox?.className,
     className,
     rootClassName,
     hashId,
@@ -134,7 +135,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
     <label
       className={classString}
-      style={style}
+      style={{ ...checkbox?.style, ...style }}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >

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

@@ -2,6 +2,7 @@ import React from 'react';
 import ConfigProvider from '..';
 import { render } from '../../../tests/utils';
 import Breadcrumb from '../../breadcrumb';
+import Checkbox from '../../checkbox';
 import Divider from '../../divider';
 import Image from '../../image';
 import Result from '../../result';
@@ -217,4 +218,22 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-breadcrumb');
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
+
+  it('Should Checkbox className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        checkbox={{
+          className: 'cp-breadcrumb',
+          style: {
+            background: 'red',
+          },
+        }}
+      >
+        <Checkbox>Checkbox</Checkbox>
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-checkbox-wrapper')).toHaveClass('cp-breadcrumb');
+    expect(container.querySelector('.ant-checkbox-wrapper')).toHaveStyle({ background: 'red' });
+  });
 });

components/config-provider/context.ts

@@ -36,12 +36,12 @@ export interface ThemeConfig {
   inherit?: boolean;
 }
 
-export interface componentStyleConfig {
+export interface ComponentStyleConfig {
   className?: string;
   style?: React.CSSProperties;
 }
 
-export interface ButtonConfig extends componentStyleConfig {
+export interface ButtonConfig extends ComponentStyleConfig {
   classNames?: ButtonProps['classNames'];
   styles?: ButtonProps['styles'];
 }
@@ -88,39 +88,16 @@ export interface ConfigConsumerProps {
     showSearch?: boolean;
   };
   button?: ButtonConfig;
-  divider?: componentStyleConfig;
+  divider?: ComponentStyleConfig;
-  typography?: {
+  typography?: ComponentStyleConfig;
-    className?: string;
+  spin?: ComponentStyleConfig;
-    style?: React.CSSProperties;
+  segmented?: ComponentStyleConfig;
-  };
+  steps?: ComponentStyleConfig;
-  spin?: {
+  image?: ComponentStyleConfig;
-    className?: string;
+  result?: ComponentStyleConfig;
-    style?: React.CSSProperties;
+  slider?: ComponentStyleConfig;
-  };
+  breadcrumb?: ComponentStyleConfig;
-  segmented?: {
+  checkbox?: ComponentStyleConfig;
-    className?: string;
-    style?: React.CSSProperties;
-  };
-  steps?: {
-    className?: string;
-    style?: React.CSSProperties;
-  };
-  image?: {
-    className?: string;
-    style?: React.CSSProperties;
-  };
-  result?: {
-    className?: string;
-    style?: React.CSSProperties;
-  };
-  slider?: {
-    className?: string;
-    style?: React.CSSProperties;
-  };
-  breadcrumb?: {
-    className?: string;
-    style?: React.CSSProperties;
-  };
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@@ -103,6 +103,7 @@ const {
 | --- | --- | --- | --- | --- |
 | breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
+| checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -19,7 +19,7 @@ import { DesignTokenContext } from '../theme/internal';
 import defaultSeedToken from '../theme/themes/seed';
 import type {
   ButtonConfig,
-  componentStyleConfig,
+  ComponentStyleConfig,
   ConfigConsumerProps,
   CSPConfig,
   DirectionType,
@@ -137,39 +137,16 @@ export interface ConfigProviderProps {
   popupOverflow?: PopupOverflow;
   theme?: ThemeConfig;
   button?: ButtonConfig;
-  divider?: componentStyleConfig;
+  divider?: ComponentStyleConfig;
-  typography?: {
+  typography?: ComponentStyleConfig;
-    className?: string;
+  spin?: ComponentStyleConfig;
-    style?: React.CSSProperties;
+  segmented?: ComponentStyleConfig;
-  };
+  steps?: ComponentStyleConfig;
-  spin?: {
+  image?: ComponentStyleConfig;
-    className?: string;
+  result?: ComponentStyleConfig;
-    style?: React.CSSProperties;
+  slider?: ComponentStyleConfig;
-  };
+  breadcrumb?: ComponentStyleConfig;
-  segmented?: {
+  checkbox?: ComponentStyleConfig;
-    className?: string;
-    style?: React.CSSProperties;
-  };
-  steps?: {
-    className?: string;
-    style?: React.CSSProperties;
-  };
-  image?: {
-    className?: string;
-    style?: React.CSSProperties;
-  };
-  result?: {
-    className?: string;
-    style?: React.CSSProperties;
-  };
-  slider?: {
-    className?: string;
-    style?: React.CSSProperties;
-  };
-  breadcrumb?: {
-    className?: string;
-    style?: React.CSSProperties;
-  };
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -260,6 +237,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     segmented,
     spin,
     typography,
+    checkbox,
     divider,
     steps,
     image,
@@ -320,6 +298,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     segmented,
     spin,
     typography,
+    checkbox,
     divider,
     steps,
     image,

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

@@ -105,6 +105,7 @@ const {
 | --- | --- | --- | --- | --- |
 | breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
+| checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |