fix(SideNav): disregard hover on non-rail SideNav when closed (#5562)

carbon-design-system · Mar 18, 2020 · b494e52 · b494e52
1 parent 1cb282f
commit b494e52
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 11 deletions.
diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -110,7 +110,7 @@
     width: 0;
   }
 
-  .#{$prefix}--side-nav:not(.#{$prefix}--side-nav--fixed):hover,
+  .#{$prefix}--side-nav.bx--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
   .#{$prefix}--side-nav--expanded {
     width: mini-units(32);
   }

diff --git a/packages/react/src/components/UIShell/SideNav.js b/packages/react/src/components/UIShell/SideNav.js
@@ -99,7 +99,7 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
     eventHandlers.onBlur = event => handleToggle(event, false);
   }
 
-  if (addMouseListeners) {
+  if (addMouseListeners && isRail) {
     eventHandlers.onMouseEnter = () => handleToggle(true, true);
     eventHandlers.onMouseLeave = () => handleToggle(false, false);
   }

diff --git a/packages/react/src/components/UIShell/__tests__/SideNav-test.js b/packages/react/src/components/UIShell/__tests__/SideNav-test.js
@@ -8,14 +8,15 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import SideNav from '../SideNav';
+import SideNavLink from '../SideNavLink';
 
 describe('SideNav', () => {
   let mockProps, wrapper;
 
   beforeEach(() => {
     mockProps = {
       'aria-label': 'Navigation',
-      children: <h2>Navigation</h2>,
+      children: <SideNavLink href="/">Navigation</SideNavLink>,
     };
   });
 
@@ -28,19 +29,34 @@ describe('SideNav', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('by default, all event listeners are added', () => {
+  it('by default, focus event listeners are added', () => {
     wrapper = mount(<SideNav {...mockProps} />);
     expect(wrapper.find('nav').props().onFocus).toBeDefined();
     expect(wrapper.find('nav').props().onBlur).toBeDefined();
-    expect(wrapper.find('nav').props().onMouseEnter).toBeDefined();
-    expect(wrapper.find('nav').props().onMouseLeave).toBeDefined();
+  });
+
+  it('by default, mouse event listeners are not added', () => {
+    wrapper = mount(<SideNav {...mockProps} />);
+    expect(wrapper.find('nav').props().onFocus).toBeDefined();
+    expect(wrapper.find('nav').props().onBlur).toBeDefined();
+    expect(wrapper.find('nav').props().onMouseEnter).not.toBeDefined();
+    expect(wrapper.find('nav').props().onMouseLeave).not.toBeDefined();
   });
 
   it('if addFocusListeners is specified as false, no focus event listeners props are added', () => {
     wrapper = mount(<SideNav {...mockProps} />);
     wrapper.setProps({ addFocusListeners: false });
     expect(wrapper.find('nav').props().onFocus).not.toBeDefined();
     expect(wrapper.find('nav').props().onBlur).not.toBeDefined();
+    expect(wrapper.find('nav').props().onMouseEnter).not.toBeDefined();
+    expect(wrapper.find('nav').props().onMouseLeave).not.toBeDefined();
+  });
+
+  it('if addFocusListeners is specified as false in rail SideNav, no event listeners props are added', () => {
+    wrapper = mount(<SideNav {...mockProps} isRail />);
+    wrapper.setProps({ addFocusListeners: false });
+    expect(wrapper.find('nav').props().onFocus).not.toBeDefined();
+    expect(wrapper.find('nav').props().onBlur).not.toBeDefined();
     expect(wrapper.find('nav').props().onMouseEnter).toBeDefined();
     expect(wrapper.find('nav').props().onMouseLeave).toBeDefined();
   });

diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNav-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNav-test.js.snap
@@ -19,12 +19,39 @@ exports[`SideNav should render 1`] = `
     className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux"
     onBlur={[Function]}
     onFocus={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
   >
-    <h2>
-      Navigation
-    </h2>
+    <SideNavLink
+      element="a"
+      href="/"
+      large={false}
+    >
+      <SideNavItem
+        large={false}
+      >
+        <li
+          className="bx--side-nav__item"
+        >
+          <Link
+            className="bx--side-nav__link"
+            element="a"
+            href="/"
+          >
+            <a
+              className="bx--side-nav__link"
+              href="/"
+            >
+              <SideNavLinkText>
+                <span
+                  className="bx--side-nav__link-text"
+                >
+                  Navigation
+                </span>
+              </SideNavLinkText>
+            </a>
+          </Link>
+        </li>
+      </SideNavItem>
+    </SideNavLink>
   </nav>
 </ForwardRef(SideNav)>
 `;