fix(ui-shell): display names for HeaderMenu & SideNavMenu forwardRefs (…

…#4680)
carbon-design-system · Nov 20, 2019 · 6a0cfea · 6a0cfea
1 parent 573a103
commit 6a0cfea
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js
@@ -221,6 +221,9 @@ class HeaderMenu extends React.Component {
   };
 }
 
-export default React.forwardRef((props, ref) => {
+const HeaderMenuForwardRef = React.forwardRef((props, ref) => {
   return <HeaderMenu {...props} focusRef={ref} />;
 });
+
+HeaderMenuForwardRef.displayName = 'HeaderMenu';
+export default HeaderMenuForwardRef;
diff --git a/packages/react/src/components/UIShell/SideNavMenu.js b/packages/react/src/components/UIShell/SideNavMenu.js
@@ -164,6 +164,9 @@ export class SideNavMenu extends React.Component {
   }
 }
 
-export default React.forwardRef((props, ref) => {
+const SideNavMenuForwardRef = React.forwardRef((props, ref) => {
   return <SideNavMenu {...props} buttonRef={ref} />;
 });
+
+SideNavMenuForwardRef.displayName = 'SideNavMenu';
+export default SideNavMenuForwardRef;
diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
@@ -41,6 +41,10 @@ import {
   SwitcherDivider,
 } from '../UIShell';
 
+SideNav.displayName = 'SideNav';
+SideNavMenu.displayName = 'SideNavMenu';
+SideNavMenuItem.displayName = 'SideNavMenuItem';
+
 const Fade16 = () => (
   <svg
     width="16"

diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderMenu should render 1`] = `
-<ForwardRef>
+<HeaderMenu>
   <HeaderMenu
     focusRef={null}
     renderMenuContent={[Function]}
@@ -153,5 +153,5 @@ exports[`HeaderMenu should render 1`] = `
       </ul>
     </li>
   </HeaderMenu>
-</ForwardRef>
+</HeaderMenu>
 `;