feat(radio): radio-group support theme api (#3303)

Tencent · Dec 30, 2024 · 1a4d630 · 1a4d630
1 parent 4c45f9d
commit 1a4d630
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 87 deletions.
diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx
@@ -27,7 +27,7 @@ const RadioGroup: React.FC<RadioGroupProps> = (originalProps) => {
 
   const props = useDefaultProps<RadioGroupProps>(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<RadioGroupProps> = (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
@@ -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(
+      <Radio.Group
+        variant="primary-filled"
+        defaultValue="北京"
+        options={[{ value: '上海', label: '上海' }, { value: '广州', label: '广州', disabled: true }, '北京', 1]}
+      />,
+    );
+    expect(container.firstChild.firstChild).toHaveClass('t-radio');
+  });
+
+  test('theme button', () => {
+    const { container } = render(
+      <Radio.Group
+        variant="primary-filled"
+        theme="button"
+        defaultValue="北京"
+        options={[{ value: '上海', label: '上海' }, { value: '广州', label: '广州', disabled: true }, '北京', 1]}
+      />,
+    );
+    expect(container.firstChild.firstChild).toHaveClass('t-radio-button');
+  });
 });
diff --git a/src/radio/_example/group.tsx b/src/radio/_example/group.tsx
@@ -43,14 +43,16 @@ export default function RadioExample() {
       <Radio.Group value={city2} options={objOptions} allowUncheck onChange={(val: FirstCityType) => setCity2(val)} />
       <Radio.Group
         variant="default-filled"
+        theme="button"
         value={city2}
         options={objOptions}
         onChange={(val: FirstCityType) => setCity2(val)}
       />
 
-      <Radio.Group value={city3} options={itemOptions} onChange={(val: ValueType) => setCity3(val)} />
+      <Radio.Group theme="button" value={city3} options={itemOptions} onChange={(val: ValueType) => setCity3(val)} />
       <Radio.Group
         variant="primary-filled"
+        theme="button"
         value={city3}
         options={itemOptions}
         onChange={(val: ValueType) => setCity3(val)}

diff --git 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
@@ -32,6 +32,7 @@ disabled | Boolean | undefined | \- | N
 name | String | - | \- | N
 options | Array | - | Typescript：`Array<RadioOption>` `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
@@ -32,6 +32,7 @@ disabled | Boolean | undefined | 是否禁用全部子单选框。优先级：Ra
 name | String | - | HTML 元素原生属性 | N
 options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>` `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
@@ -86,6 +86,11 @@ export interface TdRadioGroupProps<T = RadioValue> {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 组件风格
+   * @default radio
+   */
+  theme?: 'radio' | 'button';
   /**
    * 选中的值
    */