feat: add radio optionType api to set radio option type (#24809)

* feat: radio component

* docs: update md

* fix: snap

* test components

* fix: use optionType

* fix name

* add warning

* fix

components/radio/__tests__/__snapshots__/demo.test.js.snap

@@ -1110,6 +1110,7 @@ Array [
       </span>
     </label>
   </div>,
+  <br />,
   <div
     class="ant-radio-group ant-radio-group-outline"
   >
@@ -1153,13 +1154,14 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-wrapper"
+      class="ant-radio-wrapper ant-radio-wrapper-disabled"
     >
       <span
-        class="ant-radio"
+        class="ant-radio ant-radio-disabled"
       >
         <input
           class="ant-radio-input"
+          disabled=""
           type="radio"
           value="Orange"
         />
@@ -1172,23 +1174,25 @@ Array [
       </span>
     </label>
   </div>,
+  <br />,
+  <br />,
   <div
     class="ant-radio-group ant-radio-group-outline"
   >
     <label
-      class="ant-radio-wrapper ant-radio-wrapper-checked"
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
     >
       <span
-        class="ant-radio ant-radio-checked"
+        class="ant-radio-button ant-radio-button-checked"
       >
         <input
           checked=""
-          class="ant-radio-input"
+          class="ant-radio-button-input"
           type="radio"
           value="Apple"
         />
         <span
-          class="ant-radio-inner"
+          class="ant-radio-button-inner"
         />
       </span>
       <span>
@@ -1196,18 +1200,18 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-wrapper"
+      class="ant-radio-button-wrapper"
     >
       <span
-        class="ant-radio"
+        class="ant-radio-button"
       >
         <input
-          class="ant-radio-input"
+          class="ant-radio-button-input"
           type="radio"
           value="Pear"
         />
         <span
-          class="ant-radio-inner"
+          class="ant-radio-button-inner"
         />
       </span>
       <span>
@@ -1215,18 +1219,83 @@ Array [
       </span>
     </label>
     <label
-      class="ant-radio-wrapper"
+      class="ant-radio-button-wrapper"
     >
       <span
-        class="ant-radio"
+        class="ant-radio-button"
       >
         <input
-          class="ant-radio-input"
+          class="ant-radio-button-input"
           type="radio"
           value="Orange"
         />
         <span
-          class="ant-radio-inner"
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Orange
+      </span>
+    </label>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-radio-group ant-radio-group-solid"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="Apple"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Apple
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="Pear"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Pear
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-disabled"
+      >
+        <input
+          class="ant-radio-button-input"
+          disabled=""
+          type="radio"
+          value="Orange"
+        />
+        <span
+          class="ant-radio-button-inner"
         />
       </span>
       <span>

components/radio/demo/radiogroup-options.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-通过配置 `options` 参数来渲染单选框。
+通过配置 `options` 参数来渲染单选框。也可通过 `optionType` 参数来设置 Radio 类型。
 
 ## en-US
 
-Render radios by configuring `options`.
+Render radios by configuring `options`. Radio type can also be set through the `optionType` parameter.
 
 ```jsx
 import { Radio } from 'antd';
@@ -25,7 +25,7 @@ const options = [
 const optionsWithDisabled = [
   { label: 'Apple', value: 'Apple' },
   { label: 'Pear', value: 'Pear' },
-  { label: 'Orange', value: 'Orange', disabled: false },
+  { label: 'Orange', value: 'Orange', disabled: true },
 ];
 
 class App extends React.Component {
@@ -33,6 +33,7 @@ class App extends React.Component {
     value1: 'Apple',
     value2: 'Apple',
     value3: 'Apple',
+    value4: 'Apple',
   };
 
   onChange1 = e => {
@@ -56,16 +57,36 @@ class App extends React.Component {
     });
   };
 
+  onChange4 = e => {
+    console.log('radio4 checked', e.target.value);
+    this.setState({
+      value4: e.target.value,
+    });
+  };
+
   render() {
-    const { value1, value2, value3 } = this.state;
+    const { value1, value2, value3, value4 } = this.state;
     return (
       <>
         <Radio.Group options={plainOptions} onChange={this.onChange1} value={value1} />
-        <Radio.Group options={options} onChange={this.onChange2} value={value2} />
+        <br />
+        <Radio.Group options={optionsWithDisabled} onChange={this.onChange2} value={value2} />
+        <br />
+        <br />
         <Radio.Group
-          options={optionsWithDisabled}
+          options={options}
           onChange={this.onChange3}
           value={value3}
+          optionType="button"
+        />
+        <br />
+        <br />
+        <Radio.Group
+          options={optionsWithDisabled}
+          onChange={this.onChange4}
+          value={value4}
+          optionType="button"
+          buttonStyle="solid"
         />
       </>
     );

components/radio/group.tsx

@@ -43,6 +43,7 @@ const RadioGroup: React.FC<RadioGroupProps> = props => {
       prefixCls: customizePrefixCls,
       className = '',
       options,
+      optionType,
       buttonStyle,
       disabled,
       children,
@@ -57,13 +58,14 @@ const RadioGroup: React.FC<RadioGroupProps> = props => {
     let childrenToRender = children;
     // 如果存在 options, 优先使用
     if (options && options.length > 0) {
+      const optionsPrefixCls = optionType === 'button' ? `${prefixCls}-button` : prefixCls;
       childrenToRender = options.map(option => {
         if (typeof option === 'string') {
           // 此处类型自动推导为 string
           return (
             <Radio
               key={option}
-              prefixCls={prefixCls}
+              prefixCls={optionsPrefixCls}
               disabled={disabled}
               value={option}
               checked={value === option}
@@ -76,7 +78,7 @@ const RadioGroup: React.FC<RadioGroupProps> = props => {
         return (
           <Radio
             key={`radio-group-value-options-${option.value}`}
-            prefixCls={prefixCls}
+            prefixCls={optionsPrefixCls}
             disabled={option.disabled || disabled}
             value={option.value}
             checked={value === option.value}

components/radio/index.en-US.md

@@ -28,16 +28,17 @@ Radio.
 
 Radio group can wrap a group of `Radio`。
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| defaultValue | Default selected value | any |  |
-| disabled | Disable all radio buttons | boolean | false |
-| name | The `name` property of all `input[type="radio"]` children | string |  |
-| options | set children optional | string\[] \| Array<{ label: string value: string disabled?: boolean }> |  |
-| size | size for radio button style | `large` \| `middle` \| `small` |  |
-| value | Used for setting the currently selected value. | any |  |
-| onChange | The callback function that is triggered when the state changes. | Function(e:Event) |  |
-| buttonStyle | style type of radio button | `outline` \| `solid` | `outline` |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| defaultValue | Default selected value | any |  |  |
+| disabled | Disable all radio buttons | boolean | false |  |
+| name | The `name` property of all `input[type="radio"]` children | string |  |  |
+| options | set children optional | string\[] \| Array<{ label: string value: string disabled?: boolean }> |  |  |
+| size | size for radio button style | `large` \| `middle` \| `small` |  |  |
+| value | Used for setting the currently selected value. | any |  |  |
+| onChange | The callback function that is triggered when the state changes. | Function(e:Event) |  |  |
+| optionType | set Radio optionType | `default` \| `button` | `default` | 4.4.0 |
+| buttonStyle | style type of radio button | `outline` \| `solid` | `outline` |  |
 
 ## Methods
 

components/radio/index.zh-CN.md

@@ -29,16 +29,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
 
 单选框组合，用于包裹一组 `Radio`。
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| defaultValue | 默认选中的值 | any |  |
-| disabled | 禁选所有子单选器 | boolean | false |
-| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string |  |
-| options | 以配置形式设置子元素 | string\[] \| Array<{ label: string value: string disabled?: boolean }> |  |
-| size | 大小，只对按钮样式生效 | `large` \| `middle` \| `small` | 无 |
-| value | 用于设置当前选中的值 | any |  |
-| onChange | 选项变化时的回调函数 | Function(e:Event) |  |
-| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \| `solid` | `outline` |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| defaultValue | 默认选中的值 | any |  |  |
+| disabled | 禁选所有子单选器 | boolean | false |  |
+| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string |  |  |
+| options | 以配置形式设置子元素 | string\[] \| Array<{ label: string value: string disabled?: boolean }> |  |  |
+| size | 大小，只对按钮样式生效 | `large` \| `middle` \| `small` | 无 |  |
+| value | 用于设置当前选中的值 | any |  |  |
+| onChange | 选项变化时的回调函数 | Function(e:Event) |  |  |
+| optionType | 用于设置 Radio `options` 类型 | `default` \| `button` | `default` | 4.4.0 |
+| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \| `solid` | `outline` |  |
 
 ## 方法
 

components/radio/interface.tsx

@@ -4,6 +4,7 @@ import { AbstractCheckboxProps } from '../checkbox/Checkbox';
 import { SizeType } from '../config-provider/SizeContext';
 
 export type RadioGroupButtonStyle = 'outline' | 'solid';
+export type RadioGroupOptionType = 'default' | 'button';
 
 export interface RadioGroupProps extends AbstractCheckboxGroupProps {
   defaultValue?: any;
@@ -15,6 +16,7 @@ export interface RadioGroupProps extends AbstractCheckboxGroupProps {
   name?: string;
   children?: React.ReactNode;
   id?: string;
+  optionType?: RadioGroupOptionType;
   buttonStyle?: RadioGroupButtonStyle;
 }
 

components/radio/radio.tsx

@@ -5,6 +5,7 @@ import { RadioProps, RadioChangeEvent } from './interface';
 import { ConfigContext } from '../config-provider';
 import RadioGroupContext from './context';
 import { composeRef } from '../_util/ref';
+import devWarning from '../_util/devWarning';
 
 const InternalRadio: React.ForwardRefRenderFunction<unknown, RadioProps> = (props, ref) => {
   const context = React.useContext(RadioGroupContext);
@@ -12,6 +13,10 @@ const InternalRadio: React.ForwardRefRenderFunction<unknown, RadioProps> = (prop
   const innerRef = React.useRef<HTMLElement>();
   const mergedRef = composeRef(ref, innerRef);
 
+  React.useEffect(() => {
+    devWarning(!('optionType' in props), 'Radio', '`optionType` is only support in Radio.Group.');
+  }, []);
+
   const onChange = (e: RadioChangeEvent) => {
     if (props.onChange) {
       props.onChange(e);