feat(HeaderMenuItem): update prop (#13375)

* feat(HeaderMenuItem): update prop * chore: update contributors * chore: deprecate isCurrentPage * feat(HeaderMenu): update prop, fix unit tests * fix(HeaderMenu): handle props * test(HeaderMenuItem): add new isActive props to PublicAPI * Update packages/react/src/components/UIShell/HeaderMenu.js --------- Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Mar 22, 2023 · 0bd4507 · 0bd4507
1 parent 9d0a08f
commit 0bd4507
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 13 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3798,9 +3798,10 @@ Map {
       "element": Object {
         "type": "elementType",
       },
-      "isCurrentPage": Object {
+      "isActive": Object {
         "type": "bool",
       },
+      "isCurrentPage": [Function],
       "isSideNavExpanded": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js
@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
 import { keys, matches } from '../../internal/keyboard';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
 import { PrefixContext } from '../../internal/usePrefix';
+import deprecate from '../../prop-types/deprecate';
 
 /**
  * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
@@ -37,9 +38,19 @@ class HeaderMenu extends React.Component {
     focusRef: PropTypes.func,
 
     /**
-     * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+     * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
      */
-    isCurrentPage: PropTypes.bool,
+    isActive: PropTypes.bool,
+
+    /**
+     * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+     * @deprecated Please use `isActive` instead. This will be removed in the next major release.
+     */
+    isCurrentPage: deprecate(
+      PropTypes.bool,
+      'The `isCurrentPage` prop for `HeaderMenu` has ' +
+        'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'
+    ),
 
     /**
      * Provide a label for the link text
@@ -170,6 +181,7 @@ class HeaderMenu extends React.Component {
   render() {
     const prefix = this.context;
     const {
+      isActive,
       isCurrentPage,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
@@ -189,12 +201,13 @@ class HeaderMenu extends React.Component {
       [`${prefix}--header__submenu`]: true,
       [customClassName]: !!customClassName,
     });
+    let isActivePage = isActive ? isActive : isCurrentPage;
     const linkClassName = cx({
       [`${prefix}--header__menu-item`]: true,
       [`${prefix}--header__menu-title`]: true,
-      // We set the current class only if `isCurrentPage` is passed in and we do
+      // We set the current class only if `isActive` is passed in and we do
       // not have an `aria-current="page"` set for the breadcrumb item
-      [`${prefix}--header__menu-item--current`]: isCurrentPage,
+      [`${prefix}--header__menu-item--current`]: isActivePage,
     });
 
     // Notes on eslint comments and based on the examples in:

diff --git a/packages/react/src/components/UIShell/HeaderMenuItem.js b/packages/react/src/components/UIShell/HeaderMenuItem.js
@@ -10,10 +10,12 @@ import React from 'react';
 import cx from 'classnames';
 import Link, { LinkPropTypes } from './Link';
 import { usePrefix } from '../../internal/usePrefix';
+import deprecate from '../../prop-types/deprecate';
 
 const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
   {
     className,
+    isActive,
     isCurrentPage,
     'aria-current': ariaCurrent,
     children,
@@ -24,12 +26,15 @@ const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
   ref
 ) {
   const prefix = usePrefix();
+  if (isCurrentPage) {
+    isActive = isCurrentPage;
+  }
   const linkClassName = cx({
     [`${prefix}--header__menu-item`]: true,
-    // We set the current class only if `isCurrentPage` is passed in and we do
+    // We set the current class only if `isActive` is passed in and we do
     // not have an `aria-current="page"` set for the breadcrumb item
     [`${prefix}--header__menu-item--current`]:
-      isCurrentPage && ariaCurrent !== 'page',
+      isActive && ariaCurrent !== 'page',
   });
 
   return (
@@ -66,9 +71,19 @@ HeaderMenuItem.propTypes = {
   className: PropTypes.string,
 
   /**
-   * Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
    */
-  isCurrentPage: PropTypes.bool,
+  isActive: PropTypes.bool,
+
+  /**
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   * @deprecated Please use `isActive` instead. This will be removed in the next major release.
+   */
+  isCurrentPage: deprecate(
+    PropTypes.bool,
+    'The `isCurrentPage` prop for `HeaderMenuItem` has ' +
+      'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'
+  ),
 
   /**
    * Optionally supply a role for the underlying `<li>` node. Useful for resetting

diff --git a/packages/react/src/components/UIShell/__tests__/HeaderMenu-test.js b/packages/react/src/components/UIShell/__tests__/HeaderMenu-test.js
@@ -10,13 +10,13 @@ import React from 'react';
 import { HeaderMenu, HeaderMenuItem } from '../';
 
 describe('HeaderMenu', () => {
-  it('should set the current class if `isCurrentPage` is true', () => {
+  it('should set the current class if `isActive` is true', () => {
     render(
       <HeaderMenu
         data-testid="test"
         aria-label="test"
         menuLinkName="test"
-        isCurrentPage>
+        isActive>
         <HeaderMenuItem href="/a">a</HeaderMenuItem>
         <HeaderMenuItem href="/b">b</HeaderMenuItem>
         <HeaderMenuItem href="/c">c</HeaderMenuItem>

diff --git a/packages/react/src/components/UIShell/__tests__/HeaderMenuItem-test.js b/packages/react/src/components/UIShell/__tests__/HeaderMenuItem-test.js
@@ -10,9 +10,9 @@ import React from 'react';
 import { HeaderMenuItem } from '../';
 
 describe('HeaderMenuItem', () => {
-  it('should set the current class based on isCurrentPage', () => {
+  it('should set the current class based on isActive', () => {
     render(
-      <HeaderMenuItem data-testid="test" isCurrentPage>
+      <HeaderMenuItem data-testid="test" isActive>
         test
       </HeaderMenuItem>
     );