carbon-design-system · sstrubberg · Sep 21, 2021 · Sep 17, 2021 · Sep 21, 2021 · Sep 21, 2021
@@ -5,19 +5,18 @@
  * 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';
 
 const Content = ({
   className: customClassName,
   children,
   tagName,
   ...rest
 }) => {
+  const prefix = usePrefix();
   const className = cx(`${prefix}--content`, customClassName);
   return React.createElement(
     tagName,

@@ -5,15 +5,14 @@
  * 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 { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const Header = ({ className: customClassName, children, ...rest }) => {
+  const prefix = usePrefix();
   const className = cx(`${prefix}--header`, customClassName);
 
   return (

@@ -5,14 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 import Button from '../Button';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 /**
  * HeaderGlobalAction is used as a part of the `HeaderGlobalBar`. It is
@@ -35,6 +33,7 @@ const HeaderGlobalAction = React.forwardRef(function HeaderGlobalAction(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const className = cx({
     [customClassName]: !!customClassName,
     [`${prefix}--header__action`]: true,

@@ -6,18 +6,12 @@
  */
 
 import { ChevronDown16 } from '@carbon/icons-react';
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { keys, matches } from '../../internal/keyboard';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
-
-const { prefix } = settings;
-
-const defaultRenderMenuContent = () => (
-  <ChevronDown16 className={`${prefix}--header__menu-arrow`} />
-);
+import { PrefixContext } from '../../internal/usePrefix';
 
 /**
  * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
@@ -53,8 +47,13 @@ class HeaderMenu extends React.Component {
     tabIndex: PropTypes.number,
   };
 
+  static contextType = PrefixContext;
+  prefix = this.context;
+
   static defaultProps = {
-    renderMenuContent: defaultRenderMenuContent,
+    renderMenuContent: (
+      <ChevronDown16 className={`${this.prefix}--header__menu-arrow`} />
+    ),
   };
 
   _subMenus = React.createRef();
@@ -166,6 +165,7 @@ class HeaderMenu extends React.Component {
   };
 
   render() {
+    const prefix = this.prefix;
     const {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,

@@ -7,13 +7,11 @@
 
 import { Close20, Menu20 } from '@carbon/icons-react';
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const HeaderMenuButton = ({
   'aria-label': ariaLabel,
@@ -26,6 +24,7 @@ const HeaderMenuButton = ({
   isCollapsible,
   ...rest
 }) => {
+  const prefix = usePrefix();
   const className = cx({
     [customClassName]: !!customClassName,
     [`${prefix}--header__action`]: true,

@@ -5,13 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { settings } from 'carbon-components';
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import Link, { LinkPropTypes } from './Link';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
   {
@@ -24,6 +22,7 @@ const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const linkClassName = cx({
     [`${prefix}--header__menu-item`]: true,
     // We set the current class only if `isCurrentPage` is passed in and we do

@@ -4,14 +4,11 @@
  * 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 { settings } from 'carbon-components';
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Link, { LinkPropTypes } from './Link';
-
-const { prefix: selectorPrefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const HeaderName = ({
   children,
@@ -20,6 +17,7 @@ const HeaderName = ({
   href,
   ...rest
 }) => {
+  const selectorPrefix = usePrefix();
   const className = cx(`${selectorPrefix}--header__name`, customClassName);
   return (
     <Link {...rest} className={className} href={href}>

@@ -5,13 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
-
-const { prefix } = settings;
+import { PrefixContext } from '../../internal/usePrefix';
 
 export default class HeaderNavigation extends React.Component {
   static propTypes = {
@@ -40,6 +38,8 @@ export default class HeaderNavigation extends React.Component {
     };
   }
 
+  static contextType = PrefixContext;
+  prefix = this.context;
   /**
    * Handles individual menuitem refs. We assign them to a class instance
    * property so that we can properly manage focus of our children.
@@ -49,6 +49,7 @@ export default class HeaderNavigation extends React.Component {
   };
 
   render() {
+    const prefix = this.prefix;
     const {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,

@@ -6,12 +6,10 @@
  */
 
 import React from 'react';
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const HeaderPanel = React.forwardRef(function HeaderPanel(
   {
@@ -24,6 +22,7 @@ const HeaderPanel = React.forwardRef(function HeaderPanel(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const accessibilityLabel = {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,

@@ -5,18 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const HeaderSideNavItems = ({
   className: customClassName,
   children,
   hasDivider,
 }) => {
+  const prefix = usePrefix();
   const className = cx(
     {
       [`${prefix}--side-nav__header-navigation`]: true,

@@ -6,16 +6,14 @@
  */
 
 import React, { useState, useRef } from 'react';
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 import { CARBON_SIDENAV_ITEMS } from './_utils';
+import { usePrefix } from '../../internal/usePrefix';
 // TO-DO: comment back in when footer is added for rails
 // import SideNavFooter from './SideNavFooter';
 
-const { prefix } = settings;
-
 const SideNav = React.forwardRef(function SideNav(props, ref) {
   const {
     expanded: expandedProp,
@@ -37,6 +35,7 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
     ...other
   } = props;
 
+  const prefix = usePrefix();
   const { current: controlled } = useRef(expandedProp !== undefined);
   const [expandedState, setExpandedState] = useState(defaultExpanded);
   const [expandedViaHoverState, setExpandedViaHoverState] = useState(

@@ -5,14 +5,13 @@
  * 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';
 
 const SideNavDetails = ({ children, className: customClassName, title }) => {
+  const prefix = usePrefix();
   const className = cx(`${prefix}--side-nav__details`, customClassName);
   return (
     <div className={className}>

@@ -5,14 +5,13 @@
  * 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 SideNavDivider({ className }) {
+  const prefix = usePrefix();
   const classNames = cx(`${prefix}--side-nav__divider`, className);
   return <li role="separator" className={classNames} />;
 }

@@ -7,12 +7,10 @@
 
 import { Close20, ChevronRight20 } from '@carbon/icons-react';
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 /**
  * SideNavFooter is used for rendering the button at the bottom of the side
@@ -25,6 +23,7 @@ const SideNavFooter = ({
   expanded,
   onToggle,
 }) => {
+  const prefix = usePrefix();
   const className = cx(`${prefix}--side-nav__footer`, customClassName);
   return (
     <footer className={className}>

@@ -5,19 +5,18 @@
  * 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 SideNavIcon from './SideNavIcon';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const SideNavHeader = ({
   className: customClassName,
   children,
   renderIcon: IconElement,
 }) => {
+  const prefix = usePrefix();
   const className = cx(`${prefix}--side-nav__header`, customClassName);
   return (
     <header className={className}>

@@ -5,14 +5,13 @@
  * 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';
 
 const SideNavIcon = ({ children, className: customClassName, small }) => {
+  const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__icon`]: true,
     [`${prefix}--side-nav__icon--small`]: small,

@@ -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';
 
 const SideNavItem = ({
   className: customClassName,
   children,
   large = false,
 }) => {
+  const prefix = usePrefix();
   const className = cx({
     [`${prefix}--side-nav__item`]: true,
     [`${prefix}--side-nav__item--large`]: large,