From 1a4d630b03a4f981064ce833c2095d08f75f8972 Mon Sep 17 00:00:00 2001 From: Haixing <65376724+HaixingOoO@users.noreply.github.com> Date: Mon, 30 Dec 2024 13:01:55 +0800 Subject: [PATCH] feat(radio): radio-group support theme api (#3303) --- src/radio/RadioGroup.tsx | 4 +- src/radio/__tests__/radio.test.tsx | 25 +++- src/radio/_example/group.tsx | 4 +- src/radio/defaultProps.ts | 1 + src/radio/radio.en-US.md | 1 + src/radio/radio.md | 1 + src/radio/type.ts | 5 + test/snap/__snapshots__/csr.test.jsx.snap | 156 +++++++++++----------- test/snap/__snapshots__/ssr.test.jsx.snap | 10 +- 9 files changed, 120 insertions(+), 87 deletions(-) diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx index a089c18a34..b56227a204 100644 --- a/src/radio/RadioGroup.tsx +++ b/src/radio/RadioGroup.tsx @@ -27,7 +27,7 @@ const RadioGroup: React.FC = (originalProps) => { const props = useDefaultProps(originalProps, radioGroupDefaultProps); - const { disabled, readonly, children, onChange, size, variant, options = [], className, style } = props; + const { disabled, readonly, children, onChange, size, variant, options = [], className, style, theme } = props; const [internalValue, setInternalValue] = useControlled(props, 'value', onChange); const [barStyle, setBarStyle] = useState({}); @@ -97,7 +97,7 @@ const RadioGroup: React.FC = (originalProps) => { }; const renderOptions = () => { - const Comp = variant.includes('filled') ? Radio.Button : Radio; + const Comp = theme === 'button' ? Radio.Button : Radio; return options.map((item, index) => { let label: ReactNode; let value: string | number | boolean; diff --git a/src/radio/__tests__/radio.test.tsx b/src/radio/__tests__/radio.test.tsx index 896ae94d17..1d439df299 100644 --- a/src/radio/__tests__/radio.test.tsx +++ b/src/radio/__tests__/radio.test.tsx @@ -87,7 +87,7 @@ describe('RadioGroup', () => { options={[{ value: '上海', label: '上海' }, { value: '广州', label: '广州', disabled: true }, '北京', 1]} />, ); - expect(container.firstChild.firstChild).toHaveClass('t-radio-button'); + expect(container.firstChild.firstChild).toHaveClass('t-radio'); }); test('value is string', () => { @@ -111,4 +111,27 @@ describe('RadioGroup', () => { ); expect(container.firstChild.firstChild).toHaveClass('t-is-checked'); }); + + test('theme radio', () => { + const { container } = render( + , + ); + expect(container.firstChild.firstChild).toHaveClass('t-radio'); + }); + + test('theme button', () => { + const { container } = render( + , + ); + expect(container.firstChild.firstChild).toHaveClass('t-radio-button'); + }); }); diff --git a/src/radio/_example/group.tsx b/src/radio/_example/group.tsx index c2a0e1d608..3c4f57de08 100644 --- a/src/radio/_example/group.tsx +++ b/src/radio/_example/group.tsx @@ -43,14 +43,16 @@ export default function RadioExample() { setCity2(val)} /> setCity2(val)} /> - setCity3(val)} /> + setCity3(val)} /> setCity3(val)} diff --git a/src/radio/defaultProps.ts b/src/radio/defaultProps.ts index ff466903e2..15ebd6ca5e 100644 --- a/src/radio/defaultProps.ts +++ b/src/radio/defaultProps.ts @@ -18,4 +18,5 @@ export const radioGroupDefaultProps: TdRadioGroupProps = { readonly: undefined, size: 'medium', variant: 'outline', + theme: 'radio', }; diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md index 4fbc440d45..30494b4e07 100644 --- a/src/radio/radio.en-US.md +++ b/src/radio/radio.en-US.md @@ -32,6 +32,7 @@ disabled | Boolean | undefined | \- | N name | String | - | \- | N options | Array | - | Typescript：`Array` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N readonly | Boolean | undefined | \- | N +theme | String | radio | options：radio/button。 | N size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N value | String / Number / Boolean | - | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N diff --git a/src/radio/radio.md b/src/radio/radio.md index 42809b5a20..631df32e80 100644 --- a/src/radio/radio.md +++ b/src/radio/radio.md @@ -32,6 +32,7 @@ disabled | Boolean | undefined | 是否禁用全部子单选框。优先级：Ra name | String | - | HTML 元素原生属性 | N options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N readonly | Boolean | undefined | 只读状态 | N +theme | String | radio | 组件风格,可选项：radio/button。 | N size | String | medium | 组件尺寸【讨论中】。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N value | String / Number / Boolean | - | 选中的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N diff --git a/src/radio/type.ts b/src/radio/type.ts index 1af86f0976..0a6311cd06 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -86,6 +86,11 @@ export interface TdRadioGroupProps { * @default medium */ size?: SizeEnum; + /** + * 组件风格 + * @default radio + */ + theme?: 'radio' | 'button'; /** * 选中的值 */ diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 812b610844..1efe8df9a0 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -38200,69 +38200,69 @@ exports[`csr snapshot test > csr test src/descriptions/_example/column.tsx 1`] = class="t-radio-group t-size-m t-radio-group--filled" >
@@ -38530,49 +38530,49 @@ exports[`csr snapshot test > csr test src/descriptions/_example/layout.tsx 1`] = class="t-radio-group t-size-m t-radio-group--filled" >
@@ -38601,49 +38601,49 @@ exports[`csr snapshot test > csr test src/descriptions/_example/layout.tsx 1`] = class="t-radio-group t-size-m t-radio-group--filled" >
@@ -38857,69 +38857,69 @@ exports[`csr snapshot test > csr test src/descriptions/_example/size.tsx 1`] = ` class="t-radio-group t-size-m t-radio-group--filled" >
@@ -40841,69 +40841,69 @@ exports[`csr snapshot test > csr test src/empty/_example/size.tsx 1`] = ` class="t-radio-group t-size-m t-radio-group--filled" >
@@ -69253,82 +69253,82 @@ exports[`csr snapshot test > csr test src/radio/_example/group.tsx 1`] = ` class="t-radio-group t-size-m t-radio-group__outline" >