feat(radio): add 'block' argument for Radio.Group (#50828)

Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: liuyuan <yuanliu147@qq.com>

components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1000,6 +1000,201 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
 
 exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/radio/demo/radiogroup-block.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
+  <div
+    class="ant-radio-group ant-radio-group-outline ant-radio-group-block"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-block"
+    >
+      <span
+        class="ant-radio ant-wave-target ant-radio-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          type="radio"
+          value="Apple"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Apple
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-block"
+    >
+      <span
+        class="ant-radio ant-wave-target"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="Pear"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Pear
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-block"
+    >
+      <span
+        class="ant-radio ant-wave-target"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="Orange"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Orange
+      </span>
+    </label>
+  </div>
+  <div
+    class="ant-radio-group ant-radio-group-solid ant-radio-group-block"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-block"
+    >
+      <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 ant-radio-button-wrapper-block"
+    >
+      <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-block"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="Orange"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Orange
+      </span>
+    </label>
+  </div>
+  <div
+    class="ant-radio-group ant-radio-group-outline ant-radio-group-block"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-block"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          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 ant-radio-button-wrapper-checked ant-radio-button-wrapper-block"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          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-block"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="Orange"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Orange
+      </span>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`renders components/radio/demo/radiogroup-block.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/radio/demo/radiogroup-more.tsx extend context correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline"

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

@@ -986,6 +986,199 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+>
+  <div
+    class="ant-radio-group ant-radio-group-outline ant-radio-group-block"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-block"
+    >
+      <span
+        class="ant-radio ant-wave-target ant-radio-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          type="radio"
+          value="Apple"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Apple
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-block"
+    >
+      <span
+        class="ant-radio ant-wave-target"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="Pear"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Pear
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-block"
+    >
+      <span
+        class="ant-radio ant-wave-target"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="Orange"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        Orange
+      </span>
+    </label>
+  </div>
+  <div
+    class="ant-radio-group ant-radio-group-solid ant-radio-group-block"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-block"
+    >
+      <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 ant-radio-button-wrapper-block"
+    >
+      <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-block"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="Orange"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Orange
+      </span>
+    </label>
+  </div>
+  <div
+    class="ant-radio-group ant-radio-group-outline ant-radio-group-block"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-block"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          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 ant-radio-button-wrapper-checked ant-radio-button-wrapper-block"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          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-block"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="Orange"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Orange
+      </span>
+    </label>
+  </div>
+</div>
+`;
+
 exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = `
 <div
   class="ant-radio-group ant-radio-group-outline"

components/radio/demo/radiogroup-block.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+`block` 属性将使 Radio.Group 撑满父容器。
+
+## en-US
+
+The `block` property will make a Radio.Group fit to its parent width.

components/radio/demo/radiogroup-block.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Flex, Radio } from 'antd';
+
+const options = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange' },
+];
+
+const App: React.FC = () => (
+  <Flex vertical gap="middle">
+    <Radio.Group block options={options} defaultValue="Apple" />
+    <Radio.Group
+      block
+      options={options}
+      defaultValue="Apple"
+      optionType="button"
+      buttonStyle="solid"
+    />
+    <Radio.Group block options={options} defaultValue="Pear" optionType="button" />
+  </Flex>
+);
+
+export default App;

components/radio/group.tsx

@@ -34,6 +34,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
     name,
     defaultValue,
     value: customizedValue,
+    block = false,
     onChange,
     onMouseEnter,
     onMouseLeave,
@@ -111,6 +112,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
     {
       [`${groupPrefixCls}-${mergedSize}`]: mergedSize,
       [`${groupPrefixCls}-rtl`]: direction === 'rtl',
+      [`${groupPrefixCls}-block`]: block,
     },
     className,
     rootClassName,
@@ -120,8 +122,8 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
   );
 
   const memoizedValue = React.useMemo<RadioGroupContextProps>(
-    () => ({ onChange: onRadioChange, value, disabled, name, optionType }),
+    () => ({ onChange: onRadioChange, value, disabled, name, optionType, block }),
-    [onRadioChange, value, disabled, name, optionType],
+    [onRadioChange, value, disabled, name, optionType, block],
   );
 
   return wrapCSSVar(

components/radio/index.en-US.md

@@ -21,6 +21,7 @@ demo:
 <code src="./demo/disabled.tsx">disabled</code>
 <code src="./demo/radiogroup.tsx">Radio Group</code>
 <code src="./demo/radiogroup-more.tsx">Vertical Radio.Group</code>
+<code src="./demo/radiogroup-block.tsx" version="5.21.0">Block Radio.Group</code>
 <code src="./demo/radiogroup-options.tsx">Radio.Group group - optional</code>
 <code src="./demo/radiobutton.tsx">radio style</code>
 <code src="./demo/radiogroup-with-name.tsx">Radio.Group with name</code>
@@ -59,6 +60,7 @@ Radio group can wrap a group of `Radio`。
 | optionType | Set Radio optionType | `default` \| `button` | `default` | 4.4.0 |
 | size | The size of radio button style | `large` \| `middle` \| `small` | - |  |
 | value | Used for setting the currently selected value | any | - |  |
+| block | Option to fit RadioGroup width to its parent width | boolean | false | 5.21.0 |
 | onChange | The callback function that is triggered when the state changes | function(e:Event) | - |  |
 
 ### CheckboxOptionType

components/radio/index.zh-CN.md

@@ -22,6 +22,7 @@ demo:
 <code src="./demo/disabled.tsx">不可用</code>
 <code src="./demo/radiogroup.tsx">单选组合</code>
 <code src="./demo/radiogroup-more.tsx">Radio.Group 垂直</code>
+<code src="./demo/radiogroup-block.tsx" version="5.21.0">Block 单选组合</code>
 <code src="./demo/radiogroup-options.tsx">Radio.Group 组合 - 配置方式</code>
 <code src="./demo/radiobutton.tsx">按钮样式</code>
 <code src="./demo/radiogroup-with-name.tsx">单选组合 - 配合 name 使用</code>
@@ -62,6 +63,7 @@ demo:
 | optionType | 用于设置 Radio `options` 类型 | `default` \| `button` | `default` | 4.4.0 |  |
 | size | 大小，只对按钮样式生效 | `large` \| `middle` \| `small` | - |  |  |
 | value | 用于设置当前选中的值 | any | - |  |  |
+| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 |  |
 | onChange | 选项变化时的回调函数 | function(e:Event) | - |  |  |
 
 ### CheckboxOptionType

components/radio/interface.ts

@@ -23,6 +23,7 @@ export interface RadioGroupProps extends AbstractCheckboxGroupProps {
   buttonStyle?: RadioGroupButtonStyle;
   onFocus?: React.FocusEventHandler<HTMLDivElement>;
   onBlur?: React.FocusEventHandler<HTMLDivElement>;
+  block?: boolean;
 }
 
 export interface RadioGroupContextProps {
@@ -37,6 +38,7 @@ export interface RadioGroupContextProps {
    * @internal
    */
   optionType?: RadioGroupOptionType;
+  block?: boolean;
 }
 
 export interface RadioProps extends AbstractCheckboxProps<RadioChangeEvent> {

components/radio/radio.tsx

@@ -72,6 +72,7 @@ const InternalRadio: React.ForwardRefRenderFunction<RadioRef, RadioProps> = (pro
       [`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
       [`${prefixCls}-wrapper-rtl`]: direction === 'rtl',
       [`${prefixCls}-wrapper-in-form-item`]: isFormItemInput,
+      [`${prefixCls}-wrapper-block`]: !!groupContext?.block,
     },
     radio?.className,
     className,

components/radio/style/index.ts

@@ -120,6 +120,10 @@ const getGroupRadioStyle: GenerateStyle<RadioToken> = (token) => {
         direction: 'rtl',
       },
 
+      [`&${groupPrefixCls}-block`]: {
+        display: 'flex',
+      },
+
       [`${antCls}-badge ${antCls}-badge-count`]: {
         zIndex: 1,
       },
@@ -185,6 +189,11 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
         content: '"\\a0"',
       },
 
+      '&-block': {
+        flex: 1,
+        justifyContent: 'center',
+      },
+
       // hashId 在 wrapper 上，只能铺平
       [`${componentCls}-checked::after`]: {
         position: 'absolute',
@@ -543,6 +552,11 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
         borderColor: colorBorder,
         boxShadow: 'none',
       },
+
+      '&-block': {
+        flex: 1,
+        textAlign: 'center',
+      },
     },
   };
 };