feat(radio-group): support props theme (#4872)

* feat(radio-group): support props theme

* docs: update doc

* chore: update snapshot

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/radio/__tests__/index.test.jsx

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { it, expect, describe, vi } from 'vitest';
 import { nextTick, ref } from 'vue';
-import Radio, { RadioGroup } from '@/src/radio/index.ts';
+import Radio, { RadioButton, RadioGroup } from '@/src/radio/index.ts';
 
 // every component needs four parts: props/events/slots/functions.
 describe('Radio', () => {
@@ -171,6 +171,23 @@ describe('RadioGroup', () => {
       ));
       expect(wrapper3.find('.t-radio-group').classes()).toContain(`t-radio-group--filled`);
     });
+    it(':theme', () => {
+      const wrapper = mount(() => (
+        <RadioGroup theme="radio">
+          <Radio value="1">选项一</Radio>
+          <Radio value="2">选项二</Radio>
+        </RadioGroup>
+      ));
+      expect(wrapper.findComponent(Radio)).toBeTruthy();
+      const wrapper2 = mount(() => (
+        <RadioGroup theme="button">
+          <Radio value="1">选项一</Radio>
+          <Radio value="2">选项二</Radio>
+        </RadioGroup>
+      ));
+
+      expect(wrapper2.findComponent(RadioButton)).toBeTruthy();
+    });
   });
 
   describe(':events', () => {

src/radio/_example-ts/group.vue

@@ -18,6 +18,8 @@
       <t-radio allow-uncheck value="3">可取消选中项三</t-radio>
       <t-radio value="4">不可取消选中项</t-radio>
     </t-radio-group>
+
+    <t-radio-group default-value="2" allow-uncheck :options="options" theme="button" @change="onChange"></t-radio-group>
   </t-space>
 </template>
 

src/radio/_example/group.vue

@@ -18,6 +18,8 @@
       <t-radio allow-uncheck value="3">可取消选中项三</t-radio>
       <t-radio value="4">不可取消选中项</t-radio>
     </t-radio-group>
+
+    <t-radio-group default-value="2" allow-uncheck :options="options" theme="button" @change="onChange"></t-radio-group>
   </t-space>
 </template>
 

src/radio/group.tsx

@@ -19,7 +19,8 @@ import throttle from 'lodash/throttle';
 
 import props from './radio-group-props';
 import { RadioOptionObj, RadioOption } from './type';
-import Radio from './radio';
+import TRadio from './radio';
+import TRadioButton from './radio-button';
 import { RadioGroupInjectionKey } from './constants';
 import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import useVModel from '../hooks/useVModel';
@@ -168,16 +169,17 @@ export default defineComponent({
         if (isNumber(option) || isString(option)) {
           opt = { value: option, label: option.toString() };
         }
+        const RadioComponent = props.theme === 'button' ? TRadioButton : TRadio;
         return (
-          <Radio
+          <RadioComponent
             key={`radio-group-options-${opt.value}-${Math.random()}`}
             name={props.name}
             checked={innerValue.value === opt.value}
             disabled={'disabled' in opt ? opt.disabled : props.disabled}
             value={opt.value}
           >
             {isFunction(opt.label) ? opt.label(h) : opt.label}
-          </Radio>
+          </RadioComponent>
         );
       });
     };

src/radio/radio-group-props.ts

@@ -38,6 +38,15 @@ export default {
       return ['small', 'medium', 'large'].includes(val);
     },
   },
+  /** 组件风格 */
+  theme: {
+    type: String as PropType<TdRadioGroupProps['theme']>,
+    default: 'radio' as TdRadioGroupProps['theme'],
+    validator(val: TdRadioGroupProps['theme']): boolean {
+      if (!val) return true;
+      return ['radio', 'button'].includes(val);
+    },
+  },
   /** 选中的值 */
   value: {
     type: [String, Number, Boolean] as PropType<TdRadioGroupProps['value']>,

src/radio/radio.en-US.md

@@ -36,6 +36,7 @@ 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-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 readonly | Boolean | undefined | \- | N
 size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+theme | String | radio | component Style。options: radio/button | N
 value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/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-vue-next/tree/develop/src/radio/type.ts) | N
 variant | String | outline | options: outline/primary-filled/default-filled | N

src/radio/radio.md

@@ -36,6 +36,7 @@ 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-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 readonly | Boolean | undefined | 只读状态 | N
 size | String | medium | 组件尺寸【讨论中】。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+theme | String | radio | 组件风格。可选项：radio/button | N
 value | String / Number / Boolean | - | 选中的值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 variant | String | outline | 单选组件按钮形式。可选项：outline/primary-filled/default-filled | N

src/radio/type.ts

@@ -90,6 +90,11 @@ export interface TdRadioGroupProps<T = RadioValue> {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 组件风格
+   * @default radio
+   */
+  theme?: 'radio' | 'button';
   /**
    * 选中的值
    */

test/unit/snap/__snapshots__/csr.test.js.snap

@@ -104119,6 +104119,125 @@ exports[`csr snapshot test > csr test ./src/radio/_example/group.vue 1`] = `
   <!---->
 
 
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-radio-group t-size-m t-radio-group__outline"
+      data-v-0e209ff0=""
+    >
+
+      <label
+        class="t-radio-button t-is-disabled"
+      >
+        <input
+          class="t-radio-button__former"
+          data-allow-uncheck="true"
+          data-value="'1'"
+          disabled=""
+          name=""
+          tabindex="-1"
+          type="radio"
+          value="1"
+        />
+        <span
+          class="t-radio-button__input"
+        />
+        <span
+          class="t-radio-button__label"
+        >
+
+
+          选项一
+
+
+        </span>
+      </label>
+      <label
+        class="t-radio-button t-is-checked"
+        tabindex="0"
+      >
+        <input
+          class="t-radio-button__former"
+          data-allow-uncheck="true"
+          data-value="'2'"
+          name=""
+          tabindex="-1"
+          type="radio"
+          value="2"
+        />
+        <span
+          class="t-radio-button__input"
+        />
+        <span
+          class="t-radio-button__label"
+        >
+
+
+          选项二
+
+
+        </span>
+      </label>
+      <label
+        class="t-radio-button"
+        tabindex="0"
+      >
+        <input
+          class="t-radio-button__former"
+          data-allow-uncheck="true"
+          data-value="'3'"
+          name=""
+          tabindex="-1"
+          type="radio"
+          value="3"
+        />
+        <span
+          class="t-radio-button__input"
+        />
+        <span
+          class="t-radio-button__label"
+        >
+
+
+          选项三
+
+
+        </span>
+      </label>
+      <label
+        class="t-radio-button"
+        tabindex="0"
+      >
+        <input
+          class="t-radio-button__former"
+          data-allow-uncheck="true"
+          data-value="'4'"
+          name=""
+          tabindex="-1"
+          type="radio"
+          value="4"
+        />
+        <span
+          class="t-radio-button__input"
+        />
+        <span
+          class="t-radio-button__label"
+        >
+
+
+          选项四
+
+
+        </span>
+      </label>
+
+      <!---->
+    </div>
+  </div>
+  <!---->
+
+
 </div>
 `;