Merge branch 'main' into readonlyTimePicker

carbon-design-system · Nov 14, 2022 · b14895a · b14895a
2 parents cb8d55c + 133d294
commit b14895a
Show file tree

Hide file tree

Showing 17 changed files with 310 additions and 15 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3935,6 +3935,16 @@ Map {
     },
     "render": [Function],
   },
+  "IdPrefix" => Object {
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "prefix": Object {
+        "type": "string",
+      },
+    },
+  },
   "InlineLoading" => Object {
     "propTypes": Object {
       "className": Object {
@@ -5879,6 +5889,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "valueSelected": Object {
         "args": Array [
           Array [
@@ -9984,6 +9997,7 @@ Map {
   "unstable_useFeatureFlag" => Object {},
   "unstable_useFeatureFlags" => Object {},
   "unstable_useLayoutDirection" => Object {},
+  "useIdPrefix" => Object {},
   "useLayer" => Object {},
   "usePrefix" => Object {},
   "useTheme" => Object {},

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -87,6 +87,7 @@ describe('Carbon Components React', () => {
         "IconButton",
         "IconSkeleton",
         "IconTab",
+        "IdPrefix",
         "InlineLoading",
         "InlineNotification",
         "Layer",
@@ -248,6 +249,7 @@ describe('Carbon Components React', () => {
         "unstable_useFeatureFlag",
         "unstable_useFeatureFlags",
         "unstable_useLayoutDirection",
+        "useIdPrefix",
         "useLayer",
         "usePrefix",
         "useTheme",

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/IdPrefix/IdPrefix.mdx b/packages/react/src/components/IdPrefix/IdPrefix.mdx
@@ -0,0 +1,56 @@
+import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks';
+import { IdPrefix } from '../IdPrefix';
+
+# Prefix
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ClassPrefix)
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Overview
+
+The `IdPrefix` component is used to change the prefix applied to the
+automatically generated `id` attributes placed on certain DOM elements.
+
+<Preview>
+  <Story id="components-idprefix--default" />
+</Preview>
+
+This component is used intended to be used in limited cases, primarily only if
+you have id conflics when using v10 and v11 packages at the same time during
+migration.
+
+In React, you can use `IdPrefix` anywhere in your component tree and specify the
+prefix with the `prefix` prop. Most often it's used in the project root wrapping
+the entire project:
+
+```jsx
+import { IdPrefix } from '@carbon/react';
+
+export default function MyApp() {
+  return (
+    <IdPrefix prefix="custom">
+      <Page />
+    </IdPrefix>
+  );
+}
+```
+
+## Component API
+
+<Props />
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/ClassPrefix/ClassPrefix.mdx).
diff --git a/packages/react/src/components/IdPrefix/IdPrefix.stories.js b/packages/react/src/components/IdPrefix/IdPrefix.stories.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { IdPrefix } from '.';
+import { useIdPrefix } from '../../internal/useIdPrefix';
+import mdx from './IdPrefix.mdx';
+
+export default {
+  title: 'Components/IdPrefix',
+  component: IdPrefix,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => {
+  function ExampleComponent() {
+    const idPrefix = useIdPrefix();
+    return <p>The current id prefix is: {idPrefix}</p>;
+  }
+
+  return (
+    <>
+      <ExampleComponent />
+      <IdPrefix prefix="custom">
+        <ExampleComponent />
+      </IdPrefix>
+    </>
+  );
+};
diff --git a/packages/react/src/components/IdPrefix/__tests__/IdPrefix-test.js b/packages/react/src/components/IdPrefix/__tests__/IdPrefix-test.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+import { IdPrefix } from '../../IdPrefix';
+import { useIdPrefix } from '../../../internal/useIdPrefix';
+
+describe('IdPrefix', () => {
+  it('should set the prefix value used by usePrefix', () => {
+    const calls = [];
+
+    function TestComponent() {
+      const prefix = useIdPrefix();
+      calls.push(prefix);
+      return null;
+    }
+
+    render(
+      <IdPrefix prefix="custom">
+        <TestComponent />
+      </IdPrefix>
+    );
+
+    expect(calls).toEqual(['custom']);
+  });
+});
diff --git a/packages/react/src/components/IdPrefix/index.js b/packages/react/src/components/IdPrefix/index.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { IdPrefixContext } from '../../internal/useIdPrefix';
+
+function IdPrefix({ children, prefix }) {
+  return (
+    <IdPrefixContext.Provider value={prefix}>
+      {children}
+    </IdPrefixContext.Provider>
+  );
+}
+
+IdPrefix.propTypes = {
+  children: PropTypes.node,
+
+  /**
+   * The value used to prefix the auto-generated id placed on some DOM elements
+   */
+  prefix: PropTypes.string,
+};
+
+export { IdPrefix };
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/react/src/index.js b/packages/react/src/index.js
@@ -71,6 +71,7 @@ export FormGroup from './components/FormGroup';
 export FormItem from './components/FormItem';
 export FormLabel from './components/FormLabel';
 export { Grid, Row, Column, ColumnHang, FlexGrid } from './components/Grid';
+export { IdPrefix } from './components/IdPrefix';
 export InlineLoading from './components/InlineLoading';
 export Link from './components/Link';
 export ListItem from './components/ListItem';
@@ -271,3 +272,4 @@ export {
 export { DefinitionTooltip } from './components/Tooltip/next/DefinitionTooltip';
 export { GlobalTheme, Theme, useTheme } from './components/Theme';
 export { usePrefix } from './internal/usePrefix';
+export { useIdPrefix } from './internal/useIdPrefix';