fix(UIShell): avoid spreading isSideNavExpanded to non Carbon eleme…

…nts (#8135) * fix(UIShell): avoid spreading `isSideNavExpanded` to non Carbon elements * refactor(SideNavLink): remove unneeded destructuring Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 24, 2021 · e13a36a · e13a36a
1 parent cfcda43
commit e13a36a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/packages/react/src/components/UIShell/SideNav.js b/packages/react/src/components/UIShell/SideNav.js
@@ -10,6 +10,7 @@ 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';
 // TO-DO: comment back in when footer is added for rails
 // import SideNavFooter from './SideNavFooter';
 
@@ -87,8 +88,13 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
       let currentExpansionState = controlled
         ? expandedViaHoverState || expanded
         : expanded;
+      // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
       return React.cloneElement(child, {
-        isSideNavExpanded: currentExpansionState,
+        ...(CARBON_SIDENAV_ITEMS.includes(child.type?.displayName)
+          ? {
+              isSideNavExpanded: currentExpansionState,
+            }
+          : {}),
       });
     });
   }

diff --git a/packages/react/src/components/UIShell/SideNavItems.js b/packages/react/src/components/UIShell/SideNavItems.js
@@ -9,6 +9,7 @@ import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { CARBON_SIDENAV_ITEMS } from './_utils';
 
 const { prefix } = settings;
 
@@ -20,7 +21,14 @@ const SideNavItems = ({
   const className = cx([`${prefix}--side-nav__items`], customClassName);
   const childrenWithExpandedState = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
-      return React.cloneElement(child, { isSideNavExpanded });
+      // avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
+      return React.cloneElement(child, {
+        ...(CARBON_SIDENAV_ITEMS.includes(child.type?.displayName)
+          ? {
+              isSideNavExpanded,
+            }
+          : {}),
+      });
     }
   });
   return <ul className={className}>{childrenWithExpandedState}</ul>;

diff --git a/packages/react/src/components/UIShell/SideNavLink.js b/packages/react/src/components/UIShell/SideNavLink.js
@@ -23,8 +23,6 @@ const SideNavLink = React.forwardRef(function SideNavLink(
     renderIcon: IconElement,
     isActive,
     large,
-    // eslint-disable-next-line no-unused-vars
-    isSideNavExpanded,
     ...rest
   },
   ref

diff --git a/packages/react/src/components/UIShell/_utils.js b/packages/react/src/components/UIShell/_utils.js
@@ -0,0 +1,6 @@
+export const CARBON_SIDENAV_ITEMS = [
+  'SideNavFooter',
+  'SideNavHeader',
+  'SideNavItems',
+  'SideNavMenu',
+];