feat(Radio): add support for color on <Radio> (#3672)

* feat(Radio): add support for `color` on `<Radio>` * docs: update examples * fix: refactored controlled * test: update tests
rsuite · Mar 15, 2024 · 9406886 · 9406886
1 parent a9e14ee
commit 9406886
Show file tree

Hide file tree

Showing 18 changed files with 390 additions and 262 deletions.
diff --git a/docs/pages/components/checkbox/en-US/index.md b/docs/pages/components/checkbox/en-US/index.md
@@ -40,12 +40,18 @@ The `indeterminate` property sets the Checkbox to an indeterminate state, mainly
 
 ## Accessibility
 
-WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox
+### ARIA properties
 
-- When `checked`, Checkbox has `aria-checked` set to `true`.
-- When not `checked`, Checkbox has `aria-checked` set to `false`.
-- When partially `checked`, Checkbox has `aria-checked` set to `mixed`.
-- If `children` is set, it will be wrapped in `<label>` together with `Checkbox`.
+- The `role` property of the CheckboxGroup is `group`.
+- The `role` property of each Checkbox is `checkbox`.
+- If the Checkbox is disabled, set `aria-disabled` to `true`.
+- If the Checkbox is checked, set `aria-checked` to `true`, otherwise set it to `false`.
+- When partially checked, it has state `aria-checked` set to mixed.
+- A visible label referenced by the value of `aria-labelledby` set on the element with role `checkbox`.
+
+### Keyboard interaction
+
+- When the Checkbox has focus, pressing the <kbd>Space</kbd> key changes the state of the Checkbox.
 
 ## Props
 

diff --git a/docs/pages/components/checkbox/zh-CN/index.md b/docs/pages/components/checkbox/zh-CN/index.md
@@ -38,14 +38,20 @@
 
 <!--{include:`checkbox-group-controlled.md`}-->
 
-## 无障碍设计
+## 可访问性
 
-WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox
+### ARIA 属性
 
-- 选中后，`Checkbox` 将 `aria-checked` 设置为 `true`。
-- 如果未选中，则 `Checkbox` 的 `aria-checked` 设置为 `false`。
-- 如果部分选中，则 `Checkbox` 的 `aria-checked` 设置为 `mixed`。
-- 如果设置了 `children`, 则会和 `Checkbox` 一起包裹在 `<label>` 中。
+- 复选框组的 `role` 属性为 `group`。
+- 每一个复选框的 `role` 属性为 `checkbox`。
+- 如果复选框禁用，则将 `aria-disabled` 设置为 `true`。
+- 如果复选框选中，则将 `aria-checked` 设置为 `true`，否则设置为 `false`。
+- 当部分选中时，`aria-checked` 设置为 mixed。
+- 由 `aria-labelledby` 引用的可见标签设置在具有 `role` 为 `checkbox` 的元素上。
+
+### 键盘交互
+
+- 当复选框获得焦点时，按下 <kbd>Space</kbd> 键改变复选框的状态。
 
 ## Props
 

diff --git a/docs/pages/components/radio/en-US/index.md b/docs/pages/components/radio/en-US/index.md
@@ -1,13 +1,13 @@
 # Radio
 
-Radio buttons allow the user to select one option from a set.
+Radios are used when only one choice may be selected in a series of options.
 
 ## Import
 
 <!--{include:<import-guide>}-->
 
-- `<Radio>` Radio button.
-- `<RadioGroup>` Radio group.
+- `<Radio>` A radio button is a checkable input that when associated with other radio buttons, only one of which can be checked at a time.
+- `<RadioGroup>` Radio Group allow users to select a single option from a list of mutually exclusive options.
 
 ## Examples
 
@@ -19,6 +19,10 @@ Radio buttons allow the user to select one option from a set.
 
 <!--{include:`disabled.md`}-->
 
+### Colors
+
+<!--{include:`colors.md`}-->
+
 ### Radio Group
 
 <!--{include:`radio-group.md`}-->
@@ -33,30 +37,39 @@ Radio buttons allow the user to select one option from a set.
 
 ### Controlled Radio Group
 
-<!--{include:`radio-group-controller.md`}-->
+<!--{include:`radio-group-controlled.md`}-->
+
+## Accessibility
 
-### Accessibility
+### ARIA properties
 
-WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#radiobutton
+- RadioGroup `role` is `radiogroup`.
+- Each Radio `role` is `radio`.
+- If a Radio is checked, `aria-checked` is set to `true`.
+- If a Radio is disabled, `aria-disabled` is set to `true`.
 
-- `Radio` has aria-checked set to `true` when it's checked. Otherwise, aria-checked is set to `false`.
+### Keyboard interaction
+
+- <kbd>→</kbd> - Move focus to the next radio button. If focus is on the last radio button in the group, move to the first radio button.
+- <kbd>←</kbd> - Move focus to the previous radio button. If focus is on the first radio button in the group, move to the last radio button.
 
 ## Props
 
 ### `<Radio>`
 
-| Property       | Type `(Default)`                                 | Description                                                                   |
-| -------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
-| checked        | boolean                                          | Specifies whether the radio is selected                                       |
-| defaultChecked | boolean                                          | Specifies the initial state: whether or not the radio is selected             |
-| disabled       | boolean                                          | The disable of component                                                      |
-| inline         | boolean                                          | Inline layout                                                                 |
-| inputProps     | object                                           | Attributes applied to the input element                                       |
-| inputRef       | ref                                              | Pass a ref to the input element.                                              |
-| name           | string                                           | Name to use for form                                                          |
-| onChange       | (value: string, checked: boolean, event) => void | callback function that has been checked for changes in state                  |
-| title          | string                                           | HTML title                                                                    |
-| value          | string                                           | Value, corresponding to the value of the Radiogroup, to determine whether the |
+| Property       | Type `(Default)`                                 | Description                                                                                 |
+| -------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------- |
+| as             | ElementType`(div)`                               | Custom element type for the component                                                       |
+| checked        | boolean                                          | Specifies whether the radio is selected                                                     |
+| color          | [Color](#code-ts-color-code)                     | The color of the radio when checked <br/>![](https://img.shields.io/badge/min-v5.56.0-blue) |
+| defaultChecked | boolean                                          | Specifies the initial state: whether or not the radio is selected                           |
+| disabled       | boolean                                          | The disable of component                                                                    |
+| inline         | boolean                                          | Inline layout                                                                               |
+| inputProps     | object                                           | Attributes applied to the input element                                                     |
+| inputRef       | ref                                              | Pass a ref to the input element.                                                            |
+| name           | string                                           | Name to use for form                                                                        |
+| onChange       | (value: string, checked: boolean, event) => void | callback function that has been checked for changes in state                                |
+| value          | string                                           | Value, corresponding to the value of the Radiogroup, to determine whether the               |
 
 ### `<RadioGroup>`
 
@@ -68,3 +81,5 @@ WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#radiobutton
 | name         | string                        | Name to use for form                         |
 | onChange     | (value:string, event) => void | Callback function with value changed         |
 | value        | string                        | Value (Controlled)                           |
+
+<!--{include:(_common/types/color.md)}-->
diff --git a/docs/pages/components/radio/fragments/colors.md b/docs/pages/components/radio/fragments/colors.md
@@ -0,0 +1,34 @@
+<!--start-code-->
+
+```js
+import { Radio } from 'rsuite';
+
+const App = () => (
+  <>
+    <Radio checked color="red">
+      Red
+    </Radio>
+    <Radio checked color="orange">
+      Orange
+    </Radio>
+    <Radio checked color="yellow">
+      Yellow
+    </Radio>
+    <Radio checked color="green">
+      Green
+    </Radio>
+    <Radio checked color="cyan">
+      Cyan
+    </Radio>
+    <Radio checked color="blue">
+      Blue
+    </Radio>
+    <Radio checked color="violet">
+      Violet
+    </Radio>
+  </>
+);
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+<!--end-code-->
diff --git a/docs/pages/components/radio/fragments/disabled.md b/docs/pages/components/radio/fragments/disabled.md
@@ -5,28 +5,44 @@ import { Radio } from 'rsuite';
 
 const App = () => (
   <>
-    <label>Disabled:</label>
+    <Label>Disabled</Label>
     <Radio disabled> Radio</Radio>
     <Radio checked disabled>
       Checked Radio
     </Radio>
 
     <hr />
-    <label>Read only:</label>
+    <Label>Read only</Label>
     <Radio readOnly> Radio</Radio>
     <Radio checked readOnly>
       Checked Radio
     </Radio>
 
     <hr />
-    <label>Plaintext:</label>
+    <Label>Plaintext</Label>
     <Radio plaintext> Radio</Radio>
     <Radio checked plaintext>
       Checked Radio
     </Radio>
   </>
 );
 
+function Label({ children }) {
+  return (
+    <label
+      style={{
+        verticalAlign: 'middle',
+        display: 'inline-block',
+        marginRight: 10,
+        width: 70,
+        color: 'var(--rs-text-secondary)'
+      }}
+    >
+      {children}
+    </label>
+  );
+}
+
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 

diff --git a/docs/pages/components/radio/fragments/radio-group-controlled.md b/docs/pages/components/radio/fragments/radio-group-controlled.md
@@ -0,0 +1,21 @@
+<!--start-code-->
+
+```js
+import { Radio } from 'rsuite';
+
+const App = () => {
+  const [value, setValue] = React.useState('A');
+  return (
+    <RadioGroup name="radio-group-controlled" value={value} onChange={setValue}>
+      <Radio value="A">Radio A</Radio>
+      <Radio value="B">Radio B</Radio>
+      <Radio value="C">Radio C</Radio>
+      <Radio value="D">Radio D</Radio>
+    </RadioGroup>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+<!--end-code-->
diff --git a/docs/pages/components/radio/fragments/radio-group-controller.md b/docs/pages/components/radio/fragments/radio-group-controller.md
diff --git a/docs/pages/components/radio/fragments/radio-group-inline-picker.md b/docs/pages/components/radio/fragments/radio-group-inline-picker.md
@@ -1,29 +1,27 @@
 <!--start-code-->
 
 ```js
-import { Radio, RadioGroup, Form } from 'rsuite';
+import { Radio, RadioGroup } from 'rsuite';
 
 const RadioLabel = ({ children }) => <label style={{ padding: 7 }}>{children}</label>;
 
 const App = () => (
-  <Form.Group controlId="radioList">
-    <RadioGroup name="radioList" inline appearance="picker" defaultValue="A">
-      <Radio value="A">Item A</Radio>
-      <Radio value="B">Item B</Radio>
-      <Radio value="C">Item C</Radio>
-      <Radio value="D" disabled>
-        Item D
-      </Radio>
+  <>
+    <RadioGroup name="radio-group-inline-picker" inline appearance="picker" defaultValue="A">
+      <Radio value="A">Radio A</Radio>
+      <Radio value="B">Radio B</Radio>
+      <Radio value="C">Radio C</Radio>
+      <Radio value="D">Radio D</Radio>
     </RadioGroup>
 
     <hr />
-    <RadioGroup name="radioList" inline appearance="picker" defaultValue="A">
-      <RadioLabel>Status: </RadioLabel>
-      <Radio value="A">All</Radio>
-      <Radio value="B">Enabled</Radio>
-      <Radio value="C">Disabled</Radio>
+    <RadioGroup name="radio-group-inline-picker-label" inline appearance="picker" defaultValue="A">
+      <RadioLabel>Label: </RadioLabel>
+      <Radio value="A">Radio A</Radio>
+      <Radio value="B">Radio B</Radio>
+      <Radio value="C">Radio C</Radio>
     </RadioGroup>
-  </Form.Group>
+  </>
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));

diff --git a/docs/pages/components/radio/fragments/radio-group-inline.md b/docs/pages/components/radio/fragments/radio-group-inline.md
@@ -1,19 +1,15 @@
 <!--start-code-->
 
 ```js
-import { Radio, RadioGroup, Form } from 'rsuite';
+import { Radio, RadioGroup } from 'rsuite';
 
 const App = () => (
-  <Form.Group controlId="radioList">
-    <RadioGroup name="radioList" inline>
-      <Radio value="A">Item A</Radio>
-      <Radio value="B">Item B</Radio>
-      <Radio value="C">Item C</Radio>
-      <Radio value="D" disabled>
-        Item D
-      </Radio>
-    </RadioGroup>
-  </Form.Group>
+  <RadioGroup name="radio-group-inline" inline defaultValue="A">
+    <Radio value="A">Radio A</Radio>
+    <Radio value="B">Radio B</Radio>
+    <Radio value="C">Radio C</Radio>
+    <Radio value="D">Radio D</Radio>
+  </RadioGroup>
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));

diff --git a/docs/pages/components/radio/fragments/radio-group.md b/docs/pages/components/radio/fragments/radio-group.md
@@ -1,21 +1,15 @@
 <!--start-code-->
 
 ```js
-import { Radio, RadioGroup, Form } from 'rsuite';
+import { Radio, RadioGroup } from 'rsuite';
 
 const App = () => (
-  <Form.Group controlId="radioList">
-    <RadioGroup name="radioList">
-      <p>Group1</p>
-      <Radio value="A">Item A</Radio>
-      <Radio value="B">Item B</Radio>
-      <p>Group2</p>
-      <Radio value="C">Item C</Radio>
-      <Radio value="D" disabled>
-        Item D
-      </Radio>
-    </RadioGroup>
-  </Form.Group>
+  <RadioGroup name="radio-group" defaultValue="A">
+    <Radio value="A">Radio A</Radio>
+    <Radio value="B">Radio B</Radio>
+    <Radio value="C">Radio C</Radio>
+    <Radio value="D">Radio D</Radio>
+  </RadioGroup>
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));

diff --git a/docs/pages/components/radio/index.tsx b/docs/pages/components/radio/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, RadioGroup, Button, Radio } from 'rsuite';
+import { RadioGroup, Button, Radio } from 'rsuite';
 import DefaultPage from '@/components/Page';
 import ImportGuide from '@/components/ImportGuide';
 
@@ -9,9 +9,6 @@ const inDocsComponents = {
 
 export default function Page() {
   return (
-    <DefaultPage
-      inDocsComponents={inDocsComponents}
-      dependencies={{ Form, RadioGroup, Button, Radio }}
-    />
+    <DefaultPage inDocsComponents={inDocsComponents} dependencies={{ RadioGroup, Button, Radio }} />
   );
 }