feat(UIShell): add prefix context refactor (#9690)

* feat(UIShell): add prefix context refactor

* chore(test): fix broken tests

* chore(UIShell): remove unneeded prefixs

* fix(UIShell): check for menu content and render chevron if undefined

Author: dakahn

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -7639,6 +7639,24 @@ Map {
     },
   },
   "HeaderNavigation" => Object {
+    "contextType": Object {
+      "$$typeof": Symbol(react.context),
+      "Consumer": Object {
+        "$$typeof": Symbol(react.context),
+        "_calculateChangedBits": null,
+        "_context": [Circular],
+      },
+      "Provider": Object {
+        "$$typeof": Symbol(react.provider),
+        "_context": [Circular],
+      },
+      "_calculateChangedBits": null,
+      "_currentRenderer": null,
+      "_currentRenderer2": null,
+      "_currentValue": "bx",
+      "_currentValue2": "bx",
+      "_threadCount": 0,
+    },
     "propTypes": Object {
       "aria-label": [Function],
       "aria-labelledby": [Function],

packages/react/src/components/UIShell/Content.js

@@ -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,

packages/react/src/components/UIShell/Header.js

@@ -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 (

packages/react/src/components/UIShell/HeaderGlobalAction.js

@@ -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,

packages/react/src/components/UIShell/HeaderMenu.js

@@ -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,9 +47,7 @@ class HeaderMenu extends React.Component {
     tabIndex: PropTypes.number,
   };
 
-  static defaultProps = {
-    renderMenuContent: defaultRenderMenuContent,
-  };
+  static contextType = PrefixContext;
 
   _subMenus = React.createRef();
 
@@ -166,6 +158,7 @@ class HeaderMenu extends React.Component {
   };
 
   render() {
+    const prefix = this.context;
     const {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
@@ -176,6 +169,7 @@ class HeaderMenu extends React.Component {
       focusRef, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
+
     const accessibilityLabel = {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
@@ -205,7 +199,11 @@ class HeaderMenu extends React.Component {
           tabIndex={0}
           {...accessibilityLabel}>
           {menuLinkName}
-          <MenuContent />
+          {MenuContent ? (
+            <MenuContent />
+          ) : (
+            <ChevronDown16 className={`${this.context}--header__menu-arrow`} />
+          )}
         </a>
         <ul
           {...accessibilityLabel}

packages/react/src/components/UIShell/HeaderMenuButton.js

@@ -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,

packages/react/src/components/UIShell/HeaderMenuItem.js

@@ -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

packages/react/src/components/UIShell/HeaderName.js

@@ -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}>

packages/react/src/components/UIShell/HeaderNavigation.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 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;
+
   /**
    * 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.context;
     const {
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,

packages/react/src/components/UIShell/HeaderPanel.js

@@ -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,