feat(Carbon-React): refactor prefix with context AspectRatio --> Link (…

…#9688) * feat(Carbon-React): add usePrefix hook and examples * feat(Carbon-React): add AspectRatio -> Link * test(Breadcrumb): fix invariant violation * Update packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js Co-authored-by: Josh Black <[email protected]> * Update packages/react/src/components/AspectRatio/AspectRatio.js Co-authored-by: Josh Black <[email protected]> * Update packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js Co-authored-by: Josh Black <[email protected]> * chore(test): fix broken tests * Update packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Sep 21, 2021 · d545dd6 · d545dd6
1 parent 58b5202
commit d545dd6
Show file tree

Hide file tree

Showing 23 changed files with 101 additions and 110 deletions.
diff --git a/packages/react/src/components/AspectRatio/AspectRatio.js b/packages/react/src/components/AspectRatio/AspectRatio.js
@@ -5,12 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 /**
  * The AspectRatio component provides a `ratio` prop that will be used to
@@ -25,6 +23,7 @@ function AspectRatio({
   ratio = '1x1',
   ...rest
 }) {
+  const prefix = usePrefix();
   const className = cx(
     containerClassName,
     `${prefix}--aspect-ratio`,

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js b/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js
@@ -8,24 +8,27 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
+function Item() {
+  const prefix = usePrefix();
 
-const item = (
-  <div className={`${prefix}--breadcrumb-item`}>
-    <span className={`${prefix}--link`}>&nbsp;</span>
-  </div>
-);
+  return (
+    <div className={`${prefix}--breadcrumb-item`}>
+      <span className={`${prefix}--link`}>&nbsp;</span>
+    </div>
+  );
+}
 
 function BreadcrumbSkeleton({ className, ...rest }) {
+  const prefix = usePrefix();
   const classes = cx(`${prefix}--breadcrumb`, `${prefix}--skeleton`, className);
 
   return (
     <div className={classes} {...rest}>
-      {item}
-      {item}
-      {item}
+      <Item />
+      <Item />
+      <Item />
     </div>
   );
 }

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.js b/packages/react/src/components/Breadcrumb/Breadcrumb.js
@@ -8,9 +8,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const Breadcrumb = React.forwardRef(function Breadcrumb(
   {
@@ -22,6 +20,7 @@ const Breadcrumb = React.forwardRef(function Breadcrumb(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const className = cx({
     [`${prefix}--breadcrumb`]: true,
     [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,

diff --git a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js b/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js
@@ -17,7 +17,6 @@ describe('Breadcrumb', () => {
   let BreadcrumbItem;
 
   beforeEach(() => {
-    jest.resetModules();
     const BreadcrumbEntrypoint = require('../');
     Breadcrumb = BreadcrumbEntrypoint.Breadcrumb;
     BreadcrumbItem = BreadcrumbEntrypoint.BreadcrumbItem;

diff --git a/.../react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap b/.../react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap
@@ -5,33 +5,39 @@ exports[`BreadcrumbSkeleton should render 1`] = `
   <div
     className="bx--breadcrumb bx--skeleton"
   >
-    <div
-      className="bx--breadcrumb-item"
-    >
-      <span
-        className="bx--link"
+    <Item>
+      <div
+        className="bx--breadcrumb-item"
       >
-         
-      </span>
-    </div>
-    <div
-      className="bx--breadcrumb-item"
-    >
-      <span
-        className="bx--link"
+        <span
+          className="bx--link"
+        >
+           
+        </span>
+      </div>
+    </Item>
+    <Item>
+      <div
+        className="bx--breadcrumb-item"
       >
-         
-      </span>
-    </div>
-    <div
-      className="bx--breadcrumb-item"
-    >
-      <span
-        className="bx--link"
+        <span
+          className="bx--link"
+        >
+           
+        </span>
+      </div>
+    </Item>
+    <Item>
+      <div
+        className="bx--breadcrumb-item"
       >
-         
-      </span>
-    </div>
+        <span
+          className="bx--link"
+        >
+           
+        </span>
+      </div>
+    </Item>
   </div>
 </BreadcrumbSkeleton>
 `;
diff --git a/packages/react/src/components/Button/Button.Skeleton.js b/packages/react/src/components/Button/Button.Skeleton.js
@@ -8,13 +8,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
 import { useFeatureFlag } from '../FeatureFlags';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const ButtonSkeleton = ({ className, small, href, size, ...rest }) => {
   const enabled = useFeatureFlag('enable-v11-release');
+  const prefix = usePrefix();
 
   const buttonClasses = cx(className, {
     [`${prefix}--skeleton`]: true,

diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
@@ -8,16 +8,15 @@
 import PropTypes from 'prop-types';
 import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
 import { ButtonKinds } from '../../prop-types/types';
 import deprecate from '../../prop-types/deprecate';
 import { composeEventHandlers } from '../../tools/events';
 import { keys, matches } from '../../internal/keyboard';
+import { usePrefix } from '../../internal/usePrefix';
 import { useId } from '../../internal/useId';
 import toggleClass from '../../tools/toggleClass';
 import { useFeatureFlag } from '../FeatureFlags';
 
-const { prefix } = settings;
 const Button = React.forwardRef(function Button(
   {
     children,
@@ -52,6 +51,7 @@ const Button = React.forwardRef(function Button(
   const [isFocused, setIsFocused] = useState(false);
   const tooltipRef = useRef(null);
   const tooltipTimeout = useRef(null);
+  const prefix = usePrefix();
 
   const closeTooltips = (evt) => {
     const tooltipNode = document?.querySelectorAll(`.${prefix}--tooltip--a11y`);

diff --git a/packages/react/src/components/Checkbox/Checkbox.Skeleton.js b/packages/react/src/components/Checkbox/Checkbox.Skeleton.js
@@ -8,22 +8,23 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
-
-const CheckboxSkeleton = ({ className, ...rest }) => (
-  <div
-    className={cx(
-      `${prefix}--form-item`,
-      `${prefix}--checkbox-wrapper`,
-      `${prefix}--checkbox-label`,
-      className
-    )}
-    {...rest}>
-    <span className={`${prefix}--checkbox-label-text ${prefix}--skeleton`} />
-  </div>
-);
+const CheckboxSkeleton = ({ className, ...rest }) => {
+  const prefix = usePrefix();
+  return (
+    <div
+      className={cx(
+        `${prefix}--form-item`,
+        `${prefix}--checkbox-wrapper`,
+        `${prefix}--checkbox-label`,
+        className
+      )}
+      {...rest}>
+      <span className={`${prefix}--checkbox-label-text ${prefix}--skeleton`} />
+    </div>
+  );
+};
 
 CheckboxSkeleton.propTypes = {
   /**

diff --git a/packages/react/src/components/Checkbox/Checkbox.js b/packages/react/src/components/Checkbox/Checkbox.js
@@ -10,10 +10,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { Text } from '../Text';
 import { useFeatureFlag } from '../FeatureFlags';
-import { settings } from 'carbon-components';
 import deprecate from '../../prop-types/deprecate';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const Checkbox = React.forwardRef(function Checkbox(
   {
@@ -30,6 +28,7 @@ const Checkbox = React.forwardRef(function Checkbox(
   ref
 ) {
   const enabled = useFeatureFlag('enable-v11-release');
+  const prefix = usePrefix();
 
   const labelClasses = classNames(`${prefix}--checkbox-label`, [
     enabled ? null : className,

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.Skeleton.js b/packages/react/src/components/CodeSnippet/CodeSnippet.Skeleton.js
@@ -5,18 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 function CodeSnippetSkeleton({
   className: containerClassName,
   type = 'single',
   ...rest
 }) {
+  const prefix = usePrefix();
   const className = cx(containerClassName, {
     [`${prefix}--snippet`]: true,
     [`${prefix}--skeleton`]: true,

diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js
@@ -10,14 +10,12 @@ import React, { useState, useRef, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
 import useResizeObserver from 'use-resize-observer/polyfilled';
 import { ChevronDown16 } from '@carbon/icons-react';
-import { settings } from 'carbon-components';
 import Copy from '../Copy';
 import Button from '../Button';
 import CopyButton from '../CopyButton';
 import getUniqueId from '../../tools/uniqueId';
 import copy from 'copy-to-clipboard';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const rowHeightInPixels = 16;
 const defaultMaxCollapsedNumberOfRows = 15;
@@ -62,6 +60,7 @@ function CodeSnippet({
       return codeContentRef;
     }
   }, [type]);
+  const prefix = usePrefix();
 
   const getCodeRefDimensions = useCallback(() => {
     const {

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -10,7 +10,6 @@ import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState, useRef } from 'react';
 import { Text } from '../Text';
-import { settings } from 'carbon-components';
 import {
   Checkmark16,
   WarningAltFilled16,
@@ -23,8 +22,7 @@ import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { mapDownshiftProps } from '../../tools/createPropAdapter';
 import mergeRefs from '../../tools/mergeRefs';
 import { useFeatureFlag } from '../FeatureFlags';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const defaultItemToString = (item) => {
   if (typeof item === 'string') {
@@ -102,6 +100,7 @@ const ComboBox = React.forwardRef((props, ref) => {
     warnText,
     ...rest
   } = props;
+  const prefix = usePrefix();
 
   const textInput = useRef();
   const comboBoxInstanceId = getInstanceId();

diff --git a/packages/react/src/components/CopyButton/CopyButton.js b/packages/react/src/components/CopyButton/CopyButton.js
@@ -8,13 +8,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
-import { settings } from 'carbon-components';
 import { Copy16 } from '@carbon/icons-react';
 import Copy from '../Copy';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 export default function CopyButton({ iconDescription, className, ...other }) {
+  const prefix = usePrefix();
   return (
     <Copy
       className={classnames(className, `${prefix}--copy-btn`)}

diff --git a/packages/react/src/components/Dropdown/Dropdown.Skeleton.js b/packages/react/src/components/Dropdown/Dropdown.Skeleton.js
@@ -8,11 +8,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
 import deprecate from '../../prop-types/deprecate';
 import { PropTypes as ListBoxPropTypes } from '../ListBox';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const DropdownSkeleton = ({
   className,
@@ -22,6 +20,7 @@ const DropdownSkeleton = ({
   inline,
   ...rest
 }) => {
+  const prefix = usePrefix();
   const wrapperClasses = cx(className, {
     [`${prefix}--skeleton`]: true,
     [`${prefix}--dropdown-v2`]: true,

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -7,7 +7,6 @@
 
 import React, { useRef } from 'react';
 import { useSelect } from 'downshift';
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import {
@@ -20,8 +19,7 @@ import { mapDownshiftProps } from '../../tools/createPropAdapter';
 import mergeRefs from '../../tools/mergeRefs';
 import deprecate from '../../prop-types/deprecate';
 import { useFeatureFlag } from '../FeatureFlags';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const defaultItemToString = (item) => {
   if (typeof item === 'string') {
@@ -61,6 +59,7 @@ const Dropdown = React.forwardRef(function Dropdown(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const selectProps = mapDownshiftProps({
     ...downshiftProps,
     items,

diff --git a/packages/react/src/components/Form/Form.js b/packages/react/src/components/Form/Form.js
@@ -8,11 +8,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const Form = ({ className, children, ...other }) => {
+  const prefix = usePrefix();
   const classNames = classnames(`${prefix}--form`, className);
   return (
     <form className={classNames} {...other}>