feat: readonly radio button group (#12412)

* feat: readonly radio button group * chore: remove unnecessary scss vars * fix: cursor following review * fix: data table snapshot Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Nov 14, 2022 · d3f351d · d3f351d
1 parent 4fd8c24
commit d3f351d
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 12 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5879,6 +5879,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "valueSelected": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -587,10 +587,10 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                                 className="cds--radio-button__appearance"
                               />
                               <Text
-                                className="cds--visually-hidden"
+                                className="cds--radio-button__label-text cds--visually-hidden"
                               >
                                 <span
-                                  className="cds--visually-hidden"
+                                  className="cds--radio-button__label-text cds--visually-hidden"
                                   dir="auto"
                                 >
                                   Select row
@@ -664,10 +664,10 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                                 className="cds--radio-button__appearance"
                               />
                               <Text
-                                className="cds--visually-hidden"
+                                className="cds--radio-button__label-text cds--visually-hidden"
                               >
                                 <span
-                                  className="cds--visually-hidden"
+                                  className="cds--radio-button__label-text cds--visually-hidden"
                                   dir="auto"
                                 >
                                   Select row
@@ -741,10 +741,10 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                                 className="cds--radio-button__appearance"
                               />
                               <Text
-                                className="cds--visually-hidden"
+                                className="cds--radio-button__label-text cds--visually-hidden"
                               >
                                 <span
-                                  className="cds--visually-hidden"
+                                  className="cds--radio-button__label-text cds--visually-hidden"
                                   dir="auto"
                                 >
                                   Select row

diff --git a/packages/react/src/components/RadioButton/RadioButton.js b/packages/react/src/components/RadioButton/RadioButton.js
@@ -35,7 +35,7 @@ const RadioButton = React.forwardRef(function RadioButton(
     onChange(value, name, event);
   }
 
-  const innerLabelClasses = classNames({
+  const innerLabelClasses = classNames(`${prefix}--radio-button__label-text`, {
     [`${prefix}--visually-hidden`]: hideLabel,
   });
 

diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js
@@ -23,6 +23,14 @@ export default {
       page: mdx,
     },
   },
+  argTypes: {
+    readOnly: {
+      description: 'Specify whether the RadioButtonGroup is read-only',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
 };
 
 export const Default = () => {

diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js
@@ -94,6 +94,31 @@ describe('RadioButtonGroup', () => {
       expect(fieldset).toBeDisabled();
     });
 
+    it('should support readonly to prevent changes', () => {
+      render(
+        <RadioButtonGroup
+          defaultSelected="test-1"
+          readOnly={true}
+          name="test"
+          legendText="test">
+          <RadioButton labelText="test-1" value="test-1" />
+          <RadioButton labelText="test-2" value="test-2" />
+        </RadioButtonGroup>
+      );
+
+      const radio1 = screen.getByLabelText('test-1');
+      const radio2 = screen.getByLabelText('test-2');
+
+      expect(radio1).toBeChecked();
+      expect(radio2).not.toBeChecked();
+
+      userEvent.click(radio2);
+
+      // no change
+      expect(radio1).toBeChecked();
+      expect(radio2).not.toBeChecked();
+    });
+
     it('should support `defaultSelected` as a way to select a radio button', () => {
       render(
         <RadioButtonGroup

diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js
@@ -6,11 +6,13 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import React, { createContext, useState } from 'react';
 import classNames from 'classnames';
 import { Legend } from '../Text';
 import { usePrefix } from '../../internal/usePrefix';
 
+export const RadioButtonGroupContext = createContext();
+
 const RadioButtonGroup = React.forwardRef(function RadioButtonGroup(
   {
     children,
@@ -22,6 +24,7 @@ const RadioButtonGroup = React.forwardRef(function RadioButtonGroup(
     name,
     onChange = () => {},
     orientation = 'horizontal',
+    readOnly,
     valueSelected,
   },
   ref
@@ -63,23 +66,29 @@ const RadioButtonGroup = React.forwardRef(function RadioButtonGroup(
   }
 
   function handleOnChange(newSelection, value, evt) {
-    if (newSelection !== selected) {
-      setSelected(newSelection);
-      onChange(newSelection, name, evt);
+    if (!readOnly) {
+      if (newSelection !== selected) {
+        setSelected(newSelection);
+        onChange(newSelection, name, evt);
+      }
     }
   }
 
   const fieldsetClasses = classNames(`${prefix}--radio-button-group`, {
     [`${prefix}--radio-button-group--${orientation}`]:
       orientation === 'vertical',
     [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
+    [`${prefix}--radio-button-group--readonly`]: readOnly,
   });
 
   const wrapperClasses = classNames(`${prefix}--form-item`, className);
 
   return (
     <div className={wrapperClasses} ref={ref}>
-      <fieldset className={fieldsetClasses} disabled={disabled}>
+      <fieldset
+        className={fieldsetClasses}
+        disabled={disabled}
+        aria-readonly={readOnly}>
         {legendText && (
           <Legend className={`${prefix}--label`}>{legendText}</Legend>
         )}
@@ -137,6 +146,11 @@ RadioButtonGroup.propTypes = {
    */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
 
+  /**
+   * Whether the RadioButtonGroup should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify the value that is currently selected in the group
    */

diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss
@@ -135,6 +135,24 @@ $radio-border-width: 1px !default;
     }
   }
 
+  // readonly
+  .#{$prefix}--radio-button-group--readonly
+    .#{$prefix}--radio-button
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    border-color: $icon-disabled;
+  }
+
+  .#{$prefix}--radio-button-group--readonly .#{$prefix}--radio-button__label {
+    cursor: default;
+  }
+
+  .#{$prefix}--radio-button-group--readonly
+    .#{$prefix}--radio-button__label-text {
+    cursor: text;
+    user-select: text;
+  }
+
   // Focus
 
   .#{$prefix}--radio-button:focus