feat(Carbon-React): add prefix hook refactor Loading -> UnorderedList

packages/react/src/components/Loading/Loading.js

@@ -5,13 +5,12 @@
  * 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, { useRef } from 'react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
 const getInstanceId = setupGetInstanceId();
 
 function Loading({
@@ -23,6 +22,7 @@ function Loading({
   description,
   ...rest
 }) {
+  const prefix = usePrefix();
   const { current: instanceId } = useRef(getInstanceId());
   const loadingClassName = cx(customClassName, {
     [`${prefix}--loading`]: true,

packages/react/src/components/MultiSelect/MultiSelect.js

@@ -6,7 +6,6 @@
  */
 
 import { WarningFilled16, WarningAltFilled16 } from '@carbon/icons-react';
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import Downshift, { useSelect } from 'downshift';
 import isEqual from 'lodash.isequal';
@@ -22,8 +21,8 @@ import { mapDownshiftProps } from '../../tools/createPropAdapter';
 import mergeRefs from '../../tools/mergeRefs';
 import { keys, match } from '../../internal/keyboard';
 import { useFeatureFlag } from '../FeatureFlags';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
 const noop = () => {};
 const getInstanceId = setupGetInstanceId();
 const {
@@ -71,6 +70,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const { current: multiSelectInstanceId } = useRef(getInstanceId());
   const [highlightedIndex, setHighlightedIndex] = useState(null);
   const [isOpen, setIsOpen] = useState(open);

packages/react/src/components/Notification/Notification.js

@@ -8,7 +8,6 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
 import {
   Close20,
   ErrorFilled20,
@@ -18,17 +17,16 @@ import {
   InformationFilled20,
   InformationSquareFilled20,
 } from '@carbon/icons-react';
-
 import Button from '../Button';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 export function NotificationActionButton({
   children,
   className: customClassName,
   onClick,
   ...rest
 }) {
+  const prefix = usePrefix();
   const className = cx(
     customClassName,
     `${prefix}--inline-notification__action-button`
@@ -73,6 +71,7 @@ export function NotificationButton({
   notificationType,
   ...rest
 }) {
+  const prefix = usePrefix();
   const buttonClassName = cx(className, {
     [`${prefix}--${notificationType}-notification__close-button`]: notificationType,
   });
@@ -150,6 +149,7 @@ export function NotificationTextDetails({
   children,
   ...rest
 }) {
+  const prefix = usePrefix();
   if (notificationType === 'toast') {
     return (
       <div {...rest} className={`${prefix}--toast-notification__details`}>
@@ -218,6 +218,7 @@ const iconTypes = {
 };
 
 function NotificationIcon({ iconDescription, kind, notificationType }) {
+  const prefix = usePrefix();
   const IconForKind = iconTypes[kind];
   if (!IconForKind) {
     return null;
@@ -261,6 +262,7 @@ export function ToastNotification({
   timeout,
   ...rest
 }) {
+  const prefix = usePrefix();
   const [isOpen, setIsOpen] = useState(true);
   const containerClassName = cx(className, {
     [`${prefix}--toast-notification`]: true,
@@ -444,6 +446,7 @@ export function InlineNotification({
   children,
   ...rest
 }) {
+  const prefix = usePrefix();
   const [isOpen, setIsOpen] = useState(true);
   const containerClassName = cx(className, {
     [`${prefix}--inline-notification`]: true,

packages/react/src/components/OrderedList/OrderedList.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 OrderedList = ({
   children,
@@ -20,6 +18,7 @@ const OrderedList = ({
   isExpressive,
   ...other
 }) => {
+  const prefix = usePrefix();
   const classNames = classnames(
     {
       [`${prefix}--list--ordered`]: !native,

packages/react/src/components/Select/Select.Skeleton.js

@@ -8,18 +8,21 @@
 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 SelectSkeleton = ({ hideLabel, className, ...rest }) => (
-  <div className={cx(`${prefix}--form-item`, className)} {...rest}>
-    {!hideLabel && <span className={`${prefix}--label ${prefix}--skeleton`} />}
-    <div className={`${prefix}--select ${prefix}--skeleton`}>
-      <div className={`${prefix}--select-input`} />
+const SelectSkeleton = ({ hideLabel, className, ...rest }) => {
+  const prefix = usePrefix();
+  return (
+    <div className={cx(`${prefix}--form-item`, className)} {...rest}>
+      {!hideLabel && (
+        <span className={`${prefix}--label ${prefix}--skeleton`} />
+      )}
+      <div className={`${prefix}--select ${prefix}--skeleton`}>
+        <div className={`${prefix}--select-input`} />
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 SelectSkeleton.propTypes = {
   /**

packages/react/src/components/Select/Select.js

@@ -8,16 +8,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
 import {
   ChevronDown16,
   WarningFilled16,
   WarningAltFilled16,
 } from '@carbon/icons-react';
 import deprecate from '../../prop-types/deprecate';
 import { useFeatureFlag } from '../FeatureFlags';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const Select = React.forwardRef(function Select(
   {
@@ -43,6 +41,7 @@ const Select = React.forwardRef(function Select(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');
 
   const selectClasses = classNames(

packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -8,11 +8,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const SkeletonPlaceholder = ({ className, ...other }) => {
+  const prefix = usePrefix();
   const skeletonPlaceholderClasses = classNames({
     [`${prefix}--skeleton__placeholder`]: true,
     [className]: className,

packages/react/src/components/SkeletonText/SkeletonText.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 randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
 
@@ -26,6 +24,7 @@ const SkeletonText = ({
   className,
   ...other
 }) => {
+  const prefix = usePrefix();
   const skeletonTextClasses = classNames({
     [`${prefix}--skeleton__text`]: true,
     [`${prefix}--skeleton__heading`]: heading,

packages/react/src/components/StructuredList/StructuredList.Skeleton.js

@@ -8,11 +8,10 @@
 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 StructuredListSkeleton = ({ rowCount, border, className, ...rest }) => {
+  const prefix = usePrefix();
   const StructuredListSkeletonClasses = cx(className, {
     [`${prefix}--skeleton`]: true,
     [`${prefix}--structured-list`]: true,

packages/react/src/components/StructuredList/StructuredList.js

@@ -8,11 +8,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import deprecate from '../../prop-types/deprecate';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
 const getInstanceId = setupGetInstanceId();
 
 export function StructuredListWrapper(props) {
@@ -26,6 +25,7 @@ export function StructuredListWrapper(props) {
     border: _border,
     ...other
   } = props;
+  const prefix = usePrefix();
   const classes = classNames(`${prefix}--structured-list`, className, {
     [`${prefix}--structured-list--selection`]: selection,
     [`${prefix}--structured-list--condensed`]: isCondensed,
@@ -88,6 +88,7 @@ StructuredListWrapper.defaultProps = {
 
 export function StructuredListHead(props) {
   const { children, className, ...other } = props;
+  const prefix = usePrefix();
   const classes = classNames(`${prefix}--structured-list-thead`, className);
 
   return (
@@ -111,6 +112,7 @@ StructuredListHead.propTypes = {
 
 export function StructuredListBody(props) {
   const { children, className, ...other } = props;
+  const prefix = usePrefix();
   const classes = classNames(`${prefix}--structured-list-tbody`, className);
 
   return (
@@ -153,6 +155,7 @@ export function StructuredListRow(props) {
     label,
     ...other
   } = props;
+  const prefix = usePrefix();
   const classes = classNames(`${prefix}--structured-list-row`, className, {
     [`${prefix}--structured-list-row--header-row`]: head,
   });
@@ -215,6 +218,7 @@ StructuredListRow.defaultProps = {
 
 export function StructuredListInput(props) {
   const { className, value, name, title, id, ...other } = props;
+  const prefix = usePrefix();
   const classes = classNames(`${prefix}--structured-list-input`, className);
   const instanceId = id || getInstanceId();
 
@@ -277,6 +281,7 @@ StructuredListInput.defaultProps = {
 
 export function StructuredListCell(props) {
   const { children, className, head, noWrap, ...other } = props;
+  const prefix = usePrefix();
   const classes = classNames(className, {
     [`${prefix}--structured-list-th`]: head,
     [`${prefix}--structured-list-td`]: !head,

packages/react/src/components/Tag/Tag.Skeleton.js

@@ -8,11 +8,10 @@
 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';
 
 function TagSkeleton({ className, size, ...rest }) {
+  const prefix = usePrefix();
   return (
     <span
       className={cx(`${prefix}--tag`, `${prefix}--skeleton`, className, {

packages/react/src/components/Tag/Tag.js

@@ -8,11 +8,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
 import { Close16 } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
 const getInstanceId = setupGetInstanceId();
 const TYPES = {
   red: 'Red',
@@ -41,6 +40,7 @@ const Tag = ({
   size,
   ...other
 }) => {
+  const prefix = usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = classNames(`${prefix}--tag`, className, {
     [`${prefix}--tag--disabled`]: disabled,

packages/react/src/components/TextArea/TextArea.Skeleton.js

@@ -8,16 +8,19 @@
 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 TextAreaSkeleton = ({ hideLabel, className, ...rest }) => (
-  <div className={cx(`${prefix}--form-item`, className)} {...rest}>
-    {!hideLabel && <span className={`${prefix}--label ${prefix}--skeleton`} />}
-    <div className={`${prefix}--skeleton ${prefix}--text-area`} />
-  </div>
-);
+const TextAreaSkeleton = ({ hideLabel, className, ...rest }) => {
+  const prefix = usePrefix();
+  return (
+    <div className={cx(`${prefix}--form-item`, className)} {...rest}>
+      {!hideLabel && (
+        <span className={`${prefix}--label ${prefix}--skeleton`} />
+      )}
+      <div className={`${prefix}--skeleton ${prefix}--text-area`} />
+    </div>
+  );
+};
 
 TextAreaSkeleton.propTypes = {
   /**

packages/react/src/components/TextArea/TextArea.js

@@ -8,11 +8,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
 import { WarningFilled16 } from '@carbon/icons-react';
 import { useFeatureFlag } from '../FeatureFlags';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const TextArea = React.forwardRef(function TextArea(
   {
@@ -31,6 +29,7 @@ const TextArea = React.forwardRef(function TextArea(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');
 
   const textareaProps = {