Radiogroup with name (#7009)

* Add a name property for RadioGroup

* Add document for RadioGroup's name property

* Add test case for RadioGroup name property

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

@@ -675,6 +675,90 @@ exports[`renders ./components/radio/demo/radiogroup-options.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/radio/demo/radiogroup-with-name.md correctly 1`] = `
+<div
+  class="ant-radio-group"
+>
+  <label
+    class="ant-radio-wrapper ant-radio-wrapper-checked"
+  >
+    <span
+      class="ant-radio ant-radio-checked"
+    >
+      <input
+        checked=""
+        class="ant-radio-input"
+        name="radiogroup"
+        type="radio"
+      />
+      <span
+        class="ant-radio-inner"
+      />
+    </span>
+    <span>
+      A
+    </span>
+  </label>
+  <label
+    class="ant-radio-wrapper"
+  >
+    <span
+      class="ant-radio"
+    >
+      <input
+        class="ant-radio-input"
+        name="radiogroup"
+        type="radio"
+      />
+      <span
+        class="ant-radio-inner"
+      />
+    </span>
+    <span>
+      B
+    </span>
+  </label>
+  <label
+    class="ant-radio-wrapper"
+  >
+    <span
+      class="ant-radio"
+    >
+      <input
+        class="ant-radio-input"
+        name="radiogroup"
+        type="radio"
+      />
+      <span
+        class="ant-radio-inner"
+      />
+    </span>
+    <span>
+      C
+    </span>
+  </label>
+  <label
+    class="ant-radio-wrapper"
+  >
+    <span
+      class="ant-radio"
+    >
+      <input
+        class="ant-radio-input"
+        name="radiogroup"
+        type="radio"
+      />
+      <span
+        class="ant-radio-inner"
+      />
+    </span>
+    <span>
+      D
+    </span>
+  </label>
+</div>
+`;
+
 exports[`renders ./components/radio/demo/size.md correctly 1`] = `
 <div>
   <div>

components/radio/__tests__/group.test.js

@@ -101,4 +101,15 @@ describe('Radio', () => {
 
     expect(radios.length).toBe(3);
   });
+
+  it('all children should have a name property', () => {
+    const GROUP_NAME = 'radiogroup';
+    const wrapper = mount(
+      createRadioGroup({ name: GROUP_NAME })
+    );
+
+    expect(wrapper.find('input[type="radio"]').forEach((el) => {
+      expect(el.props().name).toEqual(GROUP_NAME);
+    }));
+  });
 });

components/radio/demo/radiogroup-with-name.md

@@ -0,0 +1,32 @@
+---
+order: 4
+title:
+  zh-CN: 单选组合 - 配合 name 使用
+  en-US: RadioGroup with name
+---
+
+## zh-CN
+
+可以为 RadioGroup 配置 `name` 参数，为组合内的 input 元素赋予相同的 `name` 属性，使浏览器把 RadioGroup 下的 Radio 真正看作是一组（例如可以通过方向键始终**在同一组内**更改选项）。
+
+## en-US
+
+Passing the `name` property to all `input[type="radio"]` that are in the same RadioGroup. It is usually used to let the browser see your RadioGroup as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same RadioGroup.
+
+```jsx
+import { Radio } from 'antd';
+const RadioGroup = Radio.Group;
+
+function App() {
+  return (
+    <RadioGroup name="radiogroup" defaultValue={1}>
+      <Radio value={1}>A</Radio>
+      <Radio value={2}>B</Radio>
+      <Radio value={3}>C</Radio>
+      <Radio value={4}>D</Radio>
+    </RadioGroup>
+  );
+}
+
+ReactDOM.render(<App />, mountNode);
+```

components/radio/group.tsx

@@ -24,6 +24,7 @@ export interface RadioGroupProps extends AbstractCheckboxGroupProps {
   size?: 'large' | 'default' | 'small';
   onMouseEnter?: React.FormEventHandler<any>;
   onMouseLeave?: React.FormEventHandler<any>;
+  name?: string;
 }
 
 export default class RadioGroup extends React.Component<RadioGroupProps, any> {
@@ -57,6 +58,7 @@ export default class RadioGroup extends React.Component<RadioGroupProps, any> {
         onChange: this.onRadioChange,
         value: this.state.value,
         disabled: this.props.disabled,
+        name: this.props.name,
       },
     };
   }

components/radio/index.en-US.md

@@ -27,6 +27,7 @@ radio group，wrap a group of `Radio`。
 
 | Property           | Description                             | Type              | optional | Default |
 |----------------|----------------------------------|-------------------|--------|--------|
+| name | The `name` property of all `input[type="radio"]` children | string |  | none |
 | onChange | The callback function that is triggered when the state changes. | Function(e:Event) | none     | none     |
 | value | Used for setting the currently selected value. | any            | none     | none     |
 | defaultValue   | Default selected value                     | any            | none     | none     |

components/radio/index.zh-CN.md

@@ -28,6 +28,7 @@ title: Radio
 
 | 参数           | 说明                             | 类型              | 可选值 | 默认值 |
 |----------------|----------------------------------|-------------------|--------|--------|
+| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string |  | 无 |
 | onChange       | 选项变化时的回调函数             | Function(e:Event) | 无     | 无     |
 | value          | 用于设置当前选中的值             | any            | 无     | 无     |
 | defaultValue   | 默认选中的值                     | any            | 无     | 无     |

components/radio/radio.tsx

@@ -40,6 +40,7 @@ export default class Radio extends React.Component<RadioProps, any> {
     const { radioGroup } = context;
     let radioProps: RadioProps = { ...restProps };
     if (radioGroup) {
+      radioProps.name = radioGroup.name;
       radioProps.onChange = radioGroup.onChange;
       radioProps.checked = props.value === radioGroup.value;
       radioProps.disabled = props.disabled || radioGroup.disabled;