feat(16248): support for 'required' in RadioButtonGroup, RadioButton (c…

…arbon-design-system#16300)
guidari · May 8, 2024 · c405ed8 · c405ed8
1 parent dbb24d3
commit c405ed8
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 0 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6450,6 +6450,9 @@ Map {
       "onClick": Object {
         "type": "func",
       },
+      "required": Object {
+        "type": "bool",
+      },
       "slug": Object {
         "type": "node",
       },
@@ -6534,6 +6537,9 @@ Map {
       "readOnly": Object {
         "type": "bool",
       },
+      "required": Object {
+        "type": "bool",
+      },
       "slug": Object {
         "type": "node",
       },

diff --git a/packages/react/src/components/RadioButton/RadioButton.tsx b/packages/react/src/components/RadioButton/RadioButton.tsx
@@ -91,6 +91,11 @@ export interface RadioButtonProps
    * Specify the value of the `<RadioButton>`
    */
   value?: string | number;
+
+  /**
+   * `true` to specify if the input is required.
+   */
+  required?: boolean;
 }
 
 const RadioButton = React.forwardRef((props: RadioButtonProps, ref) => {
@@ -105,6 +110,7 @@ const RadioButton = React.forwardRef((props: RadioButtonProps, ref) => {
     onChange = () => {},
     value = '',
     slug,
+    required,
     ...rest
   } = props;
 
@@ -152,6 +158,7 @@ const RadioButton = React.forwardRef((props: RadioButtonProps, ref) => {
         disabled={disabled}
         value={value}
         name={name}
+        required={required}
       />
       <label htmlFor={uniqueId} className={`${prefix}--radio-button__label`}>
         <span className={`${prefix}--radio-button__appearance`} />
@@ -227,6 +234,11 @@ RadioButton.propTypes = {
    */
   onClick: PropTypes.func,
 
+  /**
+   * `true` to specify if the control is required.
+   */
+  required: PropTypes.bool,
+
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
    */

diff --git a/packages/react/src/components/RadioButton/__tests__/RadioButton-test.js b/packages/react/src/components/RadioButton/__tests__/RadioButton-test.js
@@ -150,4 +150,16 @@ describe('RadioButton', () => {
       `${prefix}--radio-button-wrapper--slug`
     );
   });
+
+  it('should set the "required" attribute on the <input> by default', () => {
+    render(
+      <RadioButton
+        name="test-name"
+        value="test-value"
+        labelText="test-label"
+        required
+      />
+    );
+    expect(screen.getByRole('radio')).toHaveAttribute('required');
+  });
 });
diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js
@@ -270,5 +270,28 @@ describe('RadioButtonGroup', () => {
         expect(screen.getByLabelText('Option two')).toBeChecked();
       });
     });
+    it('should place required on every child <RadioButton>', () => {
+      render(
+        <RadioButtonGroup name="test" required>
+          <RadioButton labelText="Option 1" value="option-1" />
+          <RadioButton labelText="Option 2" value="option-2" />
+        </RadioButtonGroup>
+      );
+
+      expect(screen.getByDisplayValue('option-1')).toBeRequired();
+      expect(screen.getByDisplayValue('option-2')).toBeRequired();
+    });
+
+    it('should override required on every child <RadioButton>', () => {
+      render(
+        <RadioButtonGroup name="test" required>
+          <RadioButton labelText="Option 1" value="option-1" required={false} />
+          <RadioButton labelText="Option 2" value="option-2" />
+        </RadioButtonGroup>
+      );
+
+      expect(screen.getByDisplayValue('option-1')).toBeRequired();
+      expect(screen.getByDisplayValue('option-2')).toBeRequired();
+    });
   });
 });
diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -114,6 +114,10 @@ export interface RadioButtonGroupProps
    * Specify the value that is currently selected in the group
    */
   valueSelected?: string | number;
+  /**
+   * `true` to specify if input selection in group is required.
+   */
+  required?: boolean;
 }
 
 const RadioButtonGroup = React.forwardRef(
@@ -136,6 +140,7 @@ const RadioButtonGroup = React.forwardRef(
       warn = false,
       warnText,
       slug,
+      required,
       ...rest
     } = props;
     const prefix = usePrefix();
@@ -164,6 +169,7 @@ const RadioButtonGroup = React.forwardRef(
           value: value,
           onChange: handleOnChange,
           checked: value === selected,
+          required: required,
         };
 
         if (!selected && (radioButton as ReactElementLike)?.props.checked) {
@@ -334,6 +340,11 @@ RadioButtonGroup.propTypes = {
    */
   readOnly: PropTypes.bool,
 
+  /**
+   * `true` to specify if radio selection in group is required.
+   */
+  required: PropTypes.bool,
+
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
    */