From 1e798f97f946327a24ac852c5d2a4d6bfc4221c7 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 21 Feb 2018 18:58:58 -0500
Subject: [PATCH 1/2] Side nav items only behave clickable if they are

---
 .../__snapshots__/side_nav.test.js.snap       | 44 ++++++++---------
 .../__snapshots__/side_nav_item.test.js.snap  | 48 ++++++++++---------
 src/components/side_nav/_side_nav_item.scss   | 16 ++++---
 src/components/side_nav/side_nav_item.js      | 18 +++++--
 4 files changed, 72 insertions(+), 54 deletions(-)

diff --git a/src/components/side_nav/__snapshots__/side_nav.test.js.snap b/src/components/side_nav/__snapshots__/side_nav.test.js.snap
index 93cf92eb247..98e0432d8a0 100644
--- a/src/components/side_nav/__snapshots__/side_nav.test.js.snap
+++ b/src/components/side_nav/__snapshots__/side_nav.test.js.snap
@@ -166,7 +166,7 @@ exports[`EuiSideNav items is rendered 1`] = `
     <div
       class="euiSideNavItem euiSideNavItem--root"
     >
-      <button
+      <div
         class="euiSideNavItemButton"
       >
         <span
@@ -178,14 +178,14 @@ exports[`EuiSideNav items is rendered 1`] = `
             A
           </span>
         </span>
-      </button>
+      </div>
       <div
         class="euiSideNavItem__items"
       >
         <div
           class="euiSideNavItem euiSideNavItem--trunk"
         >
-          <button
+          <div
             class="euiSideNavItemButton"
           >
             <span
@@ -197,12 +197,12 @@ exports[`EuiSideNav items is rendered 1`] = `
                 B
               </span>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="euiSideNavItem euiSideNavItem--trunk"
         >
-          <button
+          <div
             class="euiSideNavItemButton"
           >
             <span
@@ -233,7 +233,7 @@ exports[`EuiSideNav items is rendered 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
       </div>
     </div>
@@ -283,7 +283,7 @@ exports[`EuiSideNav items renders items using a specified callback 1`] = `
       class="euiSideNavItem euiSideNavItem--root"
     >
       <a
-        class="euiSideNavItemButton"
+        class="euiSideNavItemButton euiSideNavItemButton--isClickable"
         data-test-id="my-custom-element"
         href="http://www.elastic.co"
       >
@@ -366,7 +366,7 @@ exports[`EuiSideNav items renders items which are links 1`] = `
       class="euiSideNavItem euiSideNavItem--root"
     >
       <a
-        class="euiSideNavItemButton"
+        class="euiSideNavItemButton euiSideNavItemButton--isClickable"
         href="http://www.elastic.co"
       >
         <span
@@ -385,7 +385,7 @@ exports[`EuiSideNav items renders items which are links 1`] = `
         <div
           class="euiSideNavItem euiSideNavItem--trunk"
         >
-          <button
+          <div
             class="euiSideNavItemButton"
           >
             <span
@@ -397,12 +397,12 @@ exports[`EuiSideNav items renders items which are links 1`] = `
                 B
               </span>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="euiSideNavItem euiSideNavItem--trunk"
         >
-          <button
+          <div
             class="euiSideNavItemButton"
           >
             <span
@@ -433,7 +433,7 @@ exports[`EuiSideNav items renders items which are links 1`] = `
                 />
               </svg>
             </span>
-          </button>
+          </div>
         </div>
       </div>
     </div>
@@ -482,7 +482,7 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
     <div
       class="euiSideNavItem euiSideNavItem--root"
     >
-      <button
+      <div
         class="euiSideNavItemButton"
       >
         <span
@@ -494,14 +494,14 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
             A
           </span>
         </span>
-      </button>
+      </div>
       <div
         class="euiSideNavItem__items"
       >
         <div
           class="euiSideNavItem euiSideNavItem--trunk"
         >
-          <button
+          <div
             class="euiSideNavItemButton"
           >
             <span
@@ -513,12 +513,12 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
                 B
               </span>
             </span>
-          </button>
+          </div>
         </div>
         <div
           class="euiSideNavItem euiSideNavItem--trunk"
         >
-          <button
+          <div
             class="euiSideNavItemButton euiSideNavItemButton-isOpen"
           >
             <span
@@ -530,14 +530,14 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
                 C
               </span>
             </span>
-          </button>
+          </div>
           <div
             class="euiSideNavItem__items"
           >
             <div
               class="euiSideNavItem euiSideNavItem--branch"
             >
-              <button
+              <div
                 class="euiSideNavItemButton euiSideNavItemButton-isSelected"
               >
                 <span
@@ -549,7 +549,7 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
                     D
                   </span>
                 </span>
-              </button>
+              </div>
               <div
                 class="euiSideNavItem__items"
               />
@@ -557,7 +557,7 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
             <div
               class="euiSideNavItem euiSideNavItem--branch"
             >
-              <button
+              <div
                 class="euiSideNavItemButton"
               >
                 <span
@@ -569,7 +569,7 @@ exports[`EuiSideNav items renders selected item and automatically opens parent i
                     E
                   </span>
                 </span>
-              </button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap b/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
index c399b28ecce..fbd52c9f2f5 100644
--- a/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
+++ b/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
@@ -4,7 +4,7 @@ exports[`EuiSideNavItem is rendered 1`] = `
 <div
   class="euiSideNavItem"
 >
-  <button
+  <div
     class="euiSideNavItemButton"
   >
     <span
@@ -12,14 +12,15 @@ exports[`EuiSideNavItem is rendered 1`] = `
     >
       <span
         class="euiSideNavItemButton__label"
-      />
+      >
+        <button
+          aria-label="aria-label"
+          class="testClass1 testClass2"
+          data-test-subj="test subject string"
+        />
+      </span>
     </span>
-  </button>
-  <button
-    aria-label="aria-label"
-    class="testClass1 testClass2"
-    data-test-subj="test subject string"
-  />
+  </div>
 </div>
 `;
 
@@ -27,7 +28,7 @@ exports[`EuiSideNavItem isSelected defaults to false 1`] = `
 <div
   class="euiSideNavItem"
 >
-  <button
+  <div
     class="euiSideNavItemButton"
   >
     <span
@@ -35,10 +36,11 @@ exports[`EuiSideNavItem isSelected defaults to false 1`] = `
     >
       <span
         class="euiSideNavItemButton__label"
-      />
+      >
+        <button />
+      </span>
     </span>
-  </button>
-  <button />
+  </div>
 </div>
 `;
 
@@ -46,7 +48,7 @@ exports[`EuiSideNavItem isSelected is rendered when specified as true 1`] = `
 <div
   class="euiSideNavItem"
 >
-  <button
+  <div
     class="euiSideNavItemButton euiSideNavItemButton-isSelected"
   >
     <span
@@ -54,10 +56,11 @@ exports[`EuiSideNavItem isSelected is rendered when specified as true 1`] = `
     >
       <span
         class="euiSideNavItemButton__label"
-      />
+      >
+        <button />
+      </span>
     </span>
-  </button>
-  <button />
+  </div>
 </div>
 `;
 
@@ -65,7 +68,7 @@ exports[`EuiSideNavItem preserves child's classes 1`] = `
 <div
   class="euiSideNavItem"
 >
-  <button
+  <div
     class="euiSideNavItemButton"
   >
     <span
@@ -73,11 +76,12 @@ exports[`EuiSideNavItem preserves child's classes 1`] = `
     >
       <span
         class="euiSideNavItemButton__label"
-      />
+      >
+        <button
+          class="test"
+        />
+      </span>
     </span>
-  </button>
-  <button
-    class="test"
-  />
+  </div>
 </div>
 `;
diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss
index e360c658d4b..db5622f36b2 100644
--- a/src/components/side_nav/_side_nav_item.scss
+++ b/src/components/side_nav/_side_nav_item.scss
@@ -10,14 +10,16 @@
   padding: $euiSizeXS / 2 0;
   color: $euiColorFullShade; /* 2 */
 
-  &:hover {
-    text-decoration: underline;
-  }
+  &.euiSideNavItemButton--isClickable {
+    &:hover {
+      text-decoration: underline;
+    }
 
-  // Focus state background regardless of index/selected state.
-  &:focus {
-    background-color: $euiFocusBackgroundColor !important;
-    color: $euiColorPrimary !important;
+    // Focus state background regardless of index/selected state.
+    &:focus {
+      background-color: $euiFocusBackgroundColor !important;
+      color: $euiColorPrimary !important;
+    }
   }
 
   &.euiSideNavItemButton-isOpen {
diff --git a/src/components/side_nav/side_nav_item.js b/src/components/side_nav/side_nav_item.js
index 0d35f695503..cb3345d909d 100644
--- a/src/components/side_nav/side_nav_item.js
+++ b/src/components/side_nav/side_nav_item.js
@@ -21,14 +21,25 @@ const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
     );
   }
 
+  else if (onClick) {
+    return (
+      <button
+        className={className}
+        onClick={onClick}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  }
+
   return (
-    <button
+    <div
       className={className}
-      onClick={onClick}
       {...rest}
     >
       {children}
-    </button>
+    </div>
   );
 };
 
@@ -71,6 +82,7 @@ export const EuiSideNavItem = ({
   });
 
   const buttonClasses = classNames('euiSideNavItemButton', {
+    'euiSideNavItemButton--isClickable': onClick || href,
     'euiSideNavItemButton-isOpen': depth > 0 && isOpen && !isSelected,
     'euiSideNavItemButton-isSelected': isSelected,
   });

From 32cc6ff1066a038912036a79426b3a286ca549dd Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 21 Feb 2018 19:03:23 -0500
Subject: [PATCH 2/2] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b26de23bcbf..e2ce5f32c5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ No public interface changes since `0.0.23`.
 - Added `EuiInMemoryTable`, which encapsulates sorting, searching, selection, and pagination state
 and logic ([#390](https://github.com/elastic/eui/pull/390))
 - Added stack trace information to `EuiErrorBoundary` ([#428](https://github.com/elastic/eui/pull/428))
+- Removed hover and focus states from non-selectable `EuiSideNavItem`s ([#434](https://github.com/elastic/eui/pull/434))
 
 **Bug fixes**