From af4cae5fdae5a68a1d7bc5edbf1bd98c9c80b6c7 Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Tue, 10 Mar 2020 17:03:00 -0500
Subject: [PATCH] fix(SideNav): disregard hover on non-rail SideNav when closed
 (#5562)

---
 .../src/components/ui-shell/_side-nav.scss    |  2 +-
 .../react/src/components/UIShell/SideNav.js   |  2 +-
 .../UIShell/__tests__/SideNav-test.js         | 24 ++++++++++--
 .../__snapshots__/SideNav-test.js.snap        | 37 ++++++++++++++++---
 4 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
index c3879da74ca4..397b8286b358 100644
--- 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
index 6c566763e50e..066f2d3ba816 100644
--- 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
index 9c92bbb94580..4799ae27c89d 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNav-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNav-test.js
@@ -8,6 +8,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import SideNav from '../SideNav';
+import SideNavLink from '../SideNavLink';
 
 describe('SideNav', () => {
   let mockProps, wrapper;
@@ -15,7 +16,7 @@ describe('SideNav', () => {
   beforeEach(() => {
     mockProps = {
       'aria-label': 'Navigation',
-      children: <h2>Navigation</h2>,
+      children: <SideNavLink href="/">Navigation</SideNavLink>,
     };
   });
 
@@ -28,12 +29,18 @@ 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', () => {
@@ -41,6 +48,15 @@ describe('SideNav', () => {
     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
index 895d20bd1db4..df53d1e1b86d 100644
--- 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)>
 `;