From 58e88d23a9d049cd08d41ba4fcf654b12ac7d620 Mon Sep 17 00:00:00 2001 From: muxin <434980373@qq.com> Date: Mon, 26 Jun 2023 11:42:46 +0800 Subject: [PATCH] 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 05c7678b5b30fddc1c8ac17be4f3203ef7457bee. * feat: config-provider support checkbox className and style properties --- components/checkbox/Checkbox.tsx | 5 +- .../config-provider/__tests__/style.test.tsx | 19 ++++++++ components/config-provider/context.ts | 47 +++++-------------- components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 47 +++++-------------- components/config-provider/index.zh-CN.md | 1 + 6 files changed, 49 insertions(+), 71 deletions(-) diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx index 3d17f5c0e2..65f5ae6d79 100644 --- a/components/checkbox/Checkbox.tsx +++ b/components/checkbox/Checkbox.tsx @@ -66,7 +66,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction { - 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 diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 3f369e5c5f..b249914ca2 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/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( + + Checkbox + , + ); + + expect(container.querySelector('.ant-checkbox-wrapper')).toHaveClass('cp-breadcrumb'); + expect(container.querySelector('.ant-checkbox-wrapper')).toHaveStyle({ background: 'red' }); + }); }); diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index c10cef5d96..b33abdea3e 100644 --- a/components/config-provider/context.ts +++ b/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; - typography?: { - className?: string; - style?: React.CSSProperties; - }; - spin?: { - className?: string; - style?: React.CSSProperties; - }; - segmented?: { - 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; - }; + divider?: ComponentStyleConfig; + typography?: ComponentStyleConfig; + spin?: ComponentStyleConfig; + segmented?: ComponentStyleConfig; + steps?: ComponentStyleConfig; + image?: ComponentStyleConfig; + result?: ComponentStyleConfig; + slider?: ComponentStyleConfig; + breadcrumb?: ComponentStyleConfig; + checkbox?: ComponentStyleConfig; } const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => { diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 361126ebf7..595c19255b 100644 --- a/components/config-provider/index.en-US.md +++ b/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 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 26f0493983..74d87f3939 100644 --- a/components/config-provider/index.tsx +++ b/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; - typography?: { - className?: string; - style?: React.CSSProperties; - }; - spin?: { - className?: string; - style?: React.CSSProperties; - }; - segmented?: { - 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; - }; + divider?: ComponentStyleConfig; + typography?: ComponentStyleConfig; + spin?: ComponentStyleConfig; + segmented?: ComponentStyleConfig; + steps?: ComponentStyleConfig; + image?: ComponentStyleConfig; + result?: ComponentStyleConfig; + slider?: ComponentStyleConfig; + breadcrumb?: ComponentStyleConfig; + checkbox?: ComponentStyleConfig; } interface ProviderChildrenProps extends ConfigProviderProps { @@ -260,6 +237,7 @@ const ProviderChildren: React.FC = (props) => { segmented, spin, typography, + checkbox, divider, steps, image, @@ -320,6 +298,7 @@ const ProviderChildren: React.FC = (props) => { segmented, spin, typography, + checkbox, divider, steps, image, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 3f7209e4a8..c973459cc0 100644 --- a/components/config-provider/index.zh-CN.md +++ b/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 |