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 = (
-
-
-
-);
+ return (
+
+
+
+ );
+}
function BreadcrumbSkeleton({ className, ...rest }) {
+ const prefix = usePrefix();
const classes = cx(`${prefix}--breadcrumb`, `${prefix}--skeleton`, className);
return (
- {item}
- {item}
- {item}
+
+
+
);
}
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`] = `
-
-
+
-
-
-
-
-
+
+
+
+
+ -
+
-
-
-
-
-
+
+
+
+
+ -
+
-
-
-
+
+
+
+
+
`;
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 }) => (
-
-
-
-);
+const CheckboxSkeleton = ({ className, ...rest }) => {
+ const prefix = usePrefix();
+ return (
+
+
+
+ );
+};
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 (
{
+ 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 (