From d545dd67206f1791e572e216db1098976cefc065 Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Tue, 21 Sep 2021 15:31:37 -0500
Subject: [PATCH] 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 <josh@josh.black>

* Update packages/react/src/components/AspectRatio/AspectRatio.js

Co-authored-by: Josh Black <josh@josh.black>

* Update packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js

Co-authored-by: Josh Black <josh@josh.black>

* chore(test): fix broken tests

* Update packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js

Co-authored-by: Josh Black <josh@josh.black>
---
 .../src/components/AspectRatio/AspectRatio.js |  5 +-
 .../Breadcrumb/Breadcrumb.Skeleton.js         | 23 ++++----
 .../src/components/Breadcrumb/Breadcrumb.js   |  5 +-
 .../Breadcrumb/__tests__/Breadcrumb-test.js   |  1 -
 .../Breadcrumb.Skeleton-test.js.snap          | 54 ++++++++++---------
 .../src/components/Button/Button.Skeleton.js  |  5 +-
 .../react/src/components/Button/Button.js     |  4 +-
 .../components/Checkbox/Checkbox.Skeleton.js  | 31 +++++------
 .../react/src/components/Checkbox/Checkbox.js |  5 +-
 .../CodeSnippet/CodeSnippet.Skeleton.js       |  5 +-
 .../src/components/CodeSnippet/CodeSnippet.js |  5 +-
 .../react/src/components/ComboBox/ComboBox.js |  5 +-
 .../src/components/CopyButton/CopyButton.js   |  5 +-
 .../components/Dropdown/Dropdown.Skeleton.js  |  5 +-
 .../react/src/components/Dropdown/Dropdown.js |  5 +-
 packages/react/src/components/Form/Form.js    |  5 +-
 .../src/components/FormGroup/FormGroup.js     |  5 +-
 .../src/components/FormLabel/FormLabel.js     |  5 +-
 packages/react/src/components/Grid/Column.js  | 13 +++--
 packages/react/src/components/Grid/Grid.js    |  5 +-
 packages/react/src/components/Grid/Row.js     |  5 +-
 .../components/InlineLoading/InlineLoading.js |  5 +-
 packages/react/src/components/Link/Link.js    |  5 +-
 23 files changed, 101 insertions(+), 110 deletions(-)

diff --git a/packages/react/src/components/AspectRatio/AspectRatio.js b/packages/react/src/components/AspectRatio/AspectRatio.js
index 7c25ddf09869..c807e8318136 100644
--- 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
index a3a8e267afc8..427b0b034716 100644
--- 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
index 526823d67d3e..b7d1cdd59d3c 100644
--- 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
index ead83b567f18..24ebf2a9c5c5 100644
--- 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/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap b/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap
index 23512f872676..7955a20561c1 100644
--- a/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap
+++ b/packages/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
index e3e36707d8a3..c853ec979716 100644
--- 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
index c059c34e8ac8..be79fd9d398b 100644
--- 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
index 6e7bf8bf071d..d2b7a6f5a5c7 100644
--- 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
index 42a3c2e0751e..b1c7ae13f8ed 100644
--- 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
index 36cbdc98a990..9a8dd909282e 100644
--- 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
index 64fbf870de3a..0551a230261a 100644
--- 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
index e19b9ce805d0..3fd7d0a2658d 100644
--- 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
index 51680635c971..d4c7d3c0195b 100644
--- 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
index a2db83c0dcb4..5ce0a06392cf 100644
--- 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
index 0ca9fb9728ab..60dfe7238578 100644
--- 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
index f6b1304a1704..3d29d8f40bd8 100644
--- 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}>
diff --git a/packages/react/src/components/FormGroup/FormGroup.js b/packages/react/src/components/FormGroup/FormGroup.js
index b79ade29461d..f2cd065863d5 100644
--- a/packages/react/src/components/FormGroup/FormGroup.js
+++ b/packages/react/src/components/FormGroup/FormGroup.js
@@ -8,10 +8,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
-import { settings } from 'carbon-components';
 import { useFeatureFlag } from '../FeatureFlags';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const FormGroup = ({
   legendId,
@@ -24,6 +22,7 @@ const FormGroup = ({
   hasMargin,
   ...other
 }) => {
+  const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');
   const classNamesLegend = classnames(`${prefix}--label`, [
     enabled ? null : className,
diff --git a/packages/react/src/components/FormLabel/FormLabel.js b/packages/react/src/components/FormLabel/FormLabel.js
index d2de264759a7..a1e88dbf87fa 100644
--- a/packages/react/src/components/FormLabel/FormLabel.js
+++ b/packages/react/src/components/FormLabel/FormLabel.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 FormLabel = ({ className, children, id, ...other }) => {
+  const prefix = usePrefix();
   const classNames = classnames(`${prefix}--label`, className);
 
   return (
diff --git a/packages/react/src/components/Grid/Column.js b/packages/react/src/components/Grid/Column.js
index bc9c02f3e6af..71dfb825bae3 100644
--- a/packages/react/src/components/Grid/Column.js
+++ b/packages/react/src/components/Grid/Column.js
@@ -5,13 +5,11 @@
  * 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';
 import { useFeatureFlag } from '../FeatureFlags';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 function Column({
   as: BaseComponent = 'div',
@@ -24,10 +22,11 @@ function Column({
   max,
   ...rest
 }) {
+  const prefix = usePrefix();
   const hasCSSGrid = useFeatureFlag('enable-css-grid');
   const columnClassName = hasCSSGrid
-    ? getClassNameForBreakpoints([sm, md, lg, xlg, max])
-    : getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max]);
+    ? getClassNameForBreakpoints([sm, md, lg, xlg, max], prefix)
+    : getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix);
 
   const className = cx(containerClassName, columnClassName, {
     [`${prefix}--col`]: columnClassName.length === 0,
@@ -119,7 +118,7 @@ const breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max'];
  * @param {Array<boolean|number|Breakpoint>} breakpoints
  * @returns {string}
  */
-function getClassNameForBreakpoints(breakpoints) {
+function getClassNameForBreakpoints(breakpoints, prefix) {
   const classNames = [];
 
   for (let i = 0; i < breakpoints.length; i++) {
@@ -171,7 +170,7 @@ function getClassNameForBreakpoints(breakpoints) {
  * @param {Array<boolean|number|Breakpoint>} breakpoints
  * @returns {string}
  */
-function getClassNameForFlexGridBreakpoints(breakpoints) {
+function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
   const classNames = [];
 
   for (let i = 0; i < breakpoints.length; i++) {
diff --git a/packages/react/src/components/Grid/Grid.js b/packages/react/src/components/Grid/Grid.js
index 858164de66f2..e0c0cd8dfecb 100644
--- a/packages/react/src/components/Grid/Grid.js
+++ b/packages/react/src/components/Grid/Grid.js
@@ -5,13 +5,11 @@
  * 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, { useContext } from 'react';
 import { useFeatureFlag } from '../FeatureFlags';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const SubgridContext = React.createContext(false);
 
@@ -25,6 +23,7 @@ function Grid({
   children,
   ...rest
 }) {
+  const prefix = usePrefix();
   const hasCSSGrid = useFeatureFlag('enable-css-grid');
   const isSubgrid = useContext(SubgridContext);
 
diff --git a/packages/react/src/components/Grid/Row.js b/packages/react/src/components/Grid/Row.js
index 5b25dce6a2ee..9615ed7b0e41 100644
--- a/packages/react/src/components/Grid/Row.js
+++ b/packages/react/src/components/Grid/Row.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';
 
 function Row({
   as: BaseComponent = 'div',
@@ -20,6 +18,7 @@ function Row({
   children,
   ...rest
 }) {
+  const prefix = usePrefix();
   const className = cx(containerClassName, {
     [`${prefix}--row`]: true,
     [`${prefix}--row--condensed`]: condensed,
diff --git a/packages/react/src/components/InlineLoading/InlineLoading.js b/packages/react/src/components/InlineLoading/InlineLoading.js
index b84c9af88bef..4c6a0e54793d 100644
--- a/packages/react/src/components/InlineLoading/InlineLoading.js
+++ b/packages/react/src/components/InlineLoading/InlineLoading.js
@@ -9,11 +9,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CheckmarkFilled16, ErrorFilled16 } from '@carbon/icons-react';
-import { settings } from 'carbon-components';
 import deprecate from '../../prop-types/deprecate';
 import Loading from '../Loading';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 export default function InlineLoading({
   className,
@@ -25,6 +23,7 @@ export default function InlineLoading({
   successDelay,
   ...other
 }) {
+  const prefix = usePrefix();
   const loadingClasses = classNames(`${prefix}--inline-loading`, className);
   const getLoading = () => {
     if (status === 'error') {
diff --git a/packages/react/src/components/Link/Link.js b/packages/react/src/components/Link/Link.js
index 8a123537db32..d9e53a64b260 100644
--- a/packages/react/src/components/Link/Link.js
+++ b/packages/react/src/components/Link/Link.js
@@ -8,9 +8,7 @@
 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 Link = ({
   children,
@@ -23,6 +21,7 @@ const Link = ({
   size,
   ...other
 }) => {
+  const prefix = usePrefix();
   const classNames = classnames(`${prefix}--link`, className, {
     [`${prefix}--link--disabled`]: disabled,
     [`${prefix}--link--inline`]: inline,