From 918bebd2f2f274ff35a7d7390dbccfc47f995956 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Wed, 1 Apr 2020 19:43:31 -0500
Subject: [PATCH] fixing more style things

---
 .../button/__snapshots__/button.test.tsx.snap |   9 +-
 src/components/button/_button.scss            |  42 ++---
 src/components/button/button.tsx              |   8 +-
 .../__snapshots__/button_group.test.tsx.snap  | 150 +++++++++---------
 .../button/button_group/_button_group.scss    |  45 ++++--
 .../button/button_group/button_group.tsx      |  13 +-
 6 files changed, 128 insertions(+), 139 deletions(-)

diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index 4df2e87c8ca..ab0a4a4f56e 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -165,7 +165,6 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButton__icon"
       data-euiicon-type="user"
     />
@@ -187,7 +186,6 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButton__icon"
       data-euiicon-type="user"
     />
@@ -209,7 +207,6 @@ exports[`EuiButton props iconType is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButton__icon"
       data-euiicon-type="user"
     />
@@ -222,7 +219,7 @@ exports[`EuiButton props iconType is rendered 1`] = `
 
 exports[`EuiButton props isDisabled is rendered 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton--disabled"
   disabled=""
   type="button"
 >
@@ -238,7 +235,7 @@ exports[`EuiButton props isDisabled is rendered 1`] = `
 
 exports[`EuiButton props isDisabled renders a button even when href is defined 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton--disabled"
   disabled=""
   type="button"
 >
@@ -254,7 +251,7 @@ exports[`EuiButton props isDisabled renders a button even when href is defined 1
 
 exports[`EuiButton props isLoading is rendered 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton--disabled"
   disabled=""
   type="button"
 >
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index f8d863afd70..0116e8d94ea 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -31,28 +31,22 @@
     }
   }
 
-  &:hover,
-  &:active {
-    @include euiSlightShadowHover;
-  }
+  &:not(.euiButton--disabled) {
+    &:hover,
+    &:active {
+      @include euiSlightShadowHover;
+    }
 
-  &:enabled {
     &:hover,
     &:focus {
       background-color: transparentize($euiColorPrimary, .9);
     }
   }
 
-  &:disabled,
   &.euiButton--disabled {
     color: $euiButtonColorDisabledText;
     border-color: $euiButtonColorDisabled;
-    pointer-events: none;
-
-    .euiButton__content {
-      pointer-events: auto;
-      cursor: not-allowed;
-    }
+    cursor: not-allowed;
 
     .euiButton__spinner {
       border-color: euiLoadingSpinnerBorderColors(currentColor);
@@ -63,19 +57,6 @@
       color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
       background-color: $euiButtonColorDisabled;
       border-color: $euiButtonColorDisabled;
-
-      &:hover,
-      &:focus {
-        background-color: $euiButtonColorDisabled;
-        border-color: $euiButtonColorDisabled;
-      }
-    }
-
-    &:hover,
-    &:focus {
-      @include euiSlightShadow;
-
-      text-decoration: none;
     }
   }
 }
@@ -105,7 +86,7 @@
 
       color: $fillTextColor;
 
-      &:enabled {
+      &:not(.euiButton--disabled) {
         &:hover,
         &:focus {
           background-color: darken($color, 5%);
@@ -114,7 +95,7 @@
       }
     }
 
-    &:enabled {
+    &:not(.euiButton--disabled) {
       $shadowColor: $euiShadowColor;
       @if ($name == 'ghost') {
         $shadowColor: $euiColorInk;
@@ -129,18 +110,13 @@
       &:focus {
         @include euiSlightShadowHover($shadowColor);
         background-color: transparentize($color, .9);
-
-        @if ($name == 'disabled') {
-          cursor: not-allowed;
-        }
       }
     }
   }
 }
 
 // Fix ghost/disabled look specifically
-.euiButton:disabled.euiButton--ghost,
-.euiButton--disabled.euiButton--ghost, {
+.euiButton--disabled.euiButton--ghost {
   &,
   &:hover,
   &:focus {
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 3b0f46f60e6..8e247ce6832 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -133,6 +133,7 @@ export const EuiButton: FunctionComponent<Props> = ({
     {
       'euiButton--fill': fill,
       'euiButton--fullWidth': fullWidth,
+      'euiButton--disabled': isDisabled,
     }
   );
 
@@ -153,12 +154,7 @@ export const EuiButton: FunctionComponent<Props> = ({
     buttonIcon = <EuiLoadingSpinner className="euiButton__spinner" size="m" />;
   } else if (iconType) {
     buttonIcon = (
-      <EuiIcon
-        className="euiButton__icon"
-        type={iconType}
-        size="m"
-        aria-hidden="true"
-      />
+      <EuiIcon className="euiButton__icon" type={iconType} size="m" />
     );
   }
 
diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
index b7502a6cf50..8a1b9635a29 100644
--- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
+++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiButtonGroup is rendered 1`] = `
   </legend>
   <div
     aria-label="aria-label"
-    class="euiButtonGroup testClass1 testClass2"
+    class="euiButtonGroup euiButtonGroup--text testClass1 testClass2"
   />
 </fieldset>
 `;
@@ -26,10 +26,10 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--compressed"
+    class="euiButtonGroup euiButtonGroup--text euiButtonGroup--compressed"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -44,7 +44,7 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -59,7 +59,7 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -87,10 +87,10 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -105,7 +105,7 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -120,7 +120,7 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -148,10 +148,10 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -166,7 +166,7 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -181,7 +181,7 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -209,10 +209,10 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--danger"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--danger euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--danger euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -227,7 +227,7 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--danger euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--danger euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -242,7 +242,7 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--danger euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--danger euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -270,10 +270,10 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--ghost"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--ghost euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--ghost euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -288,7 +288,7 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--ghost euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--ghost euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -303,7 +303,7 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--ghost euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--ghost euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -331,10 +331,10 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--primary"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--primary euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--primary euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -349,7 +349,7 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--primary euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--primary euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -364,7 +364,7 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--primary euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--primary euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -392,10 +392,10 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--secondary"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--secondary euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--secondary euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -410,7 +410,7 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--secondary euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--secondary euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -425,7 +425,7 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--secondary euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--secondary euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -453,10 +453,10 @@ exports[`EuiButtonGroup props color text is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -471,7 +471,7 @@ exports[`EuiButtonGroup props color text is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -486,7 +486,7 @@ exports[`EuiButtonGroup props color text is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -514,10 +514,10 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--warning"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--warning euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--warning euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -532,7 +532,7 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--warning euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--warning euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -547,7 +547,7 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--warning euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--warning euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -575,10 +575,10 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--fill euiButton--small euiButtonGroup__button euiButtonGroup__button--selected"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--fill euiButton--small euiButtonGroup__button euiButton--no-hover euiButtonGroup__button--selected"
     >
       <input
         checked=""
@@ -594,7 +594,7 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -609,7 +609,7 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -637,10 +637,10 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text euiButtonGroup--disabled"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--disabled euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--disabled euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -656,7 +656,7 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--disabled euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--disabled euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -672,7 +672,7 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--disabled euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--disabled euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -701,10 +701,10 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--fullWidth"
+    class="euiButtonGroup euiButtonGroup--text euiButtonGroup--fullWidth"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -719,7 +719,7 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -734,7 +734,7 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -762,10 +762,10 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButtonGroup__toggle--isIconOnly euiButton--small euiButtonGroup__button euiButtonGroup__button--iconOnly"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButtonGroup__toggle--isIconOnly euiButton--small euiButtonGroup__button euiButton--no-hover euiButtonGroup__button--iconOnly"
     >
       <input
         class="euiButtonGroup__input"
@@ -784,7 +784,7 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButtonGroup__toggle--isIconOnly euiButton--small euiButtonGroup__button euiButtonGroup__button--iconOnly"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButtonGroup__toggle--isIconOnly euiButton--small euiButtonGroup__button euiButton--no-hover euiButtonGroup__button--iconOnly"
     >
       <input
         class="euiButtonGroup__input"
@@ -803,7 +803,7 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButtonGroup__toggle--isIconOnly euiButton--small euiButtonGroup__button euiButtonGroup__button--iconOnly"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButtonGroup__toggle--isIconOnly euiButton--small euiButtonGroup__button euiButton--no-hover euiButtonGroup__button--iconOnly"
     >
       <input
         class="euiButtonGroup__input"
@@ -835,10 +835,10 @@ exports[`EuiButtonGroup props legend is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -853,7 +853,7 @@ exports[`EuiButtonGroup props legend is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -868,7 +868,7 @@ exports[`EuiButtonGroup props legend is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -896,10 +896,10 @@ exports[`EuiButtonGroup props name is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -915,7 +915,7 @@ exports[`EuiButtonGroup props name is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -931,7 +931,7 @@ exports[`EuiButtonGroup props name is rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -960,10 +960,10 @@ exports[`EuiButtonGroup props options are rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -978,7 +978,7 @@ exports[`EuiButtonGroup props options are rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -993,7 +993,7 @@ exports[`EuiButtonGroup props options are rendered 1`] = `
       </label>
     </div>
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
     >
       <input
         class="euiButtonGroup__input"
@@ -1021,10 +1021,10 @@ exports[`EuiButtonGroup props options can pass down data-test-subj 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text"
   >
     <div
-      class="euiButton euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--no-hover euiButtonGroup__toggle euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
       data-test-subj="test"
     >
       <input
@@ -1054,11 +1054,11 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text"
   >
     <button
       aria-pressed="true"
-      class="euiButton euiButton--text euiButton--small euiButtonGroup__button euiButtonGroup__button--selected euiButton--fill"
+      class="euiButton euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover euiButtonGroup__button--selected euiButton--fill"
       id="button00"
       type="button"
     >
@@ -1074,7 +1074,7 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
     </button>
     <button
       aria-pressed="true"
-      class="euiButton euiButton--text euiButton--small euiButtonGroup__button euiButtonGroup__button--selected euiButton--fill"
+      class="euiButton euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover euiButtonGroup__button--selected euiButton--fill"
       id="button01"
       type="button"
     >
@@ -1090,7 +1090,7 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButton euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
       id="button02"
       type="button"
     >
@@ -1118,11 +1118,11 @@ exports[`EuiButtonGroup props type of multi is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup"
+    class="euiButtonGroup euiButtonGroup--text"
   >
     <button
       aria-pressed="false"
-      class="euiButton euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
       id="button00"
       type="button"
     >
@@ -1138,7 +1138,7 @@ exports[`EuiButtonGroup props type of multi is rendered 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButton euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
       id="button01"
       type="button"
     >
@@ -1154,7 +1154,7 @@ exports[`EuiButtonGroup props type of multi is rendered 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButton euiButton--text euiButton--small euiButtonGroup__button"
+      class="euiButton euiButton--text euiButton--small euiButtonGroup__button euiButton--no-hover"
       id="button02"
       type="button"
     >
diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index c995319fcdb..016e2955991 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -1,33 +1,39 @@
 .euiButtonGroup {
   max-width: 100%;
   display: flex;
+  border-radius: $euiBorderRadius;
 
   .euiButton {
     min-width: auto;
     border-radius: 0;
     border-right-width: 0;
-    transition: none;
-    transform: none;
-    animation: none;
 
     &:not(.euiButton--fill) {
       border-color: $euiButtonToggleBorderColor;
     }
 
+    &,
     &:hover,
+    &:focus,
     &:active {
       transition: none;
       transform: none;
       animation: none;
+      box-shadow: none;
+    }
+
+    &.euiButton--disabled:hover {
+      text-decoration: none;
+      cursor: not-allowed;
     }
   }
 
+  .euiButton--fill + .euiButton {
+    border-left-color: transparent;
+  }
+
   &:not(.euiButtonGroup--compressed) {
     .euiButton {
-      &:enabled {
-        @include euiSlightShadow;
-      }
-
       &[aria-pressed='true'] + [aria-pressed='true'] {
         box-shadow: -1px 0 0 transparentize($euiColorEmptyShade, .9);
       }
@@ -46,6 +52,20 @@
   }
 }
 
+@each $name, $color in $euiButtonTypes {
+  .euiButtonGroup--#{$name}:not(.euiButtonGroup--disabled) {
+    $shadowColor: $euiShadowColor;
+    @if ($name == 'ghost') {
+      $shadowColor: $euiColorInk;
+    } @else if (lightness($euiTextColor) < 50) {
+      // Only if this is the light theme do we use the button variant color to colorize the shadow
+      $shadowColor: desaturate($color, 60%);
+    }
+
+    @include euiSlightShadow($shadowColor);
+  }
+}
+
 .euiButtonGroup__fieldset {
   display: inline-block;
   max-width: 100%;
@@ -67,7 +87,11 @@
 
 .euiButtonGroup__label {
   white-space: nowrap;
-  cursor: pointer;
+  cursor: inherit;
+
+  .euiButton--disabled & {
+    pointer-events: none;
+  }
 }
 
 .euiButtonGroup__button--iconOnly {
@@ -120,7 +144,6 @@
     padding: 2px;
     background-clip: content-box;
 
-    &:not(.euiButtonGroup__button--selected):not(:disabled),
     &:not(.euiButtonGroup__button--selected):not(.euiButton--disabled) {
       color: $euiColorDarkShade;
     }
@@ -131,10 +154,6 @@
     }
   }
 
-  .euiButtonGroup__input:enabled:hover + .euiButtonGroup__label {
-    background-color: transparentize($euiFormInputGroupLabelBackground, .5);
-  }
-
   .euiButtonGroup__button--selected {
     font-weight: $euiFontWeightSemiBold;
     background-color: $euiFormInputGroupLabelBackground;
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 76d05544c30..fd73ae27909 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -69,9 +69,11 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
 }) => {
   const classes = classNames(
     'euiButtonGroup',
+    `euiButtonGroup--${color}`,
     {
       'euiButtonGroup--fullWidth': isFullWidth,
       'euiButtonGroup--compressed': buttonSize === 'compressed',
+      'euiButtonGroup--disabled': isDisabled,
     },
     className
   );
@@ -113,6 +115,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
           }
           const buttonClasses = classNames(
             'euiButtonGroup__button',
+            'euiButton--no-hover',
             {
               'euiButtonGroup__button--selected': isSelectedState,
               'euiButtonGroup__button--iconOnly': isIconOnly,
@@ -149,6 +152,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
 
           const wrapperClasses = classNames(
             'euiButton',
+            'euiButton--no-hover',
             'euiButtonGroup__toggle',
             color ? colorToClassNameMap[color] : null,
             {
@@ -162,13 +166,10 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
           );
 
           const icon = iconType && (
-            <EuiIcon
-              type={iconType}
-              color={color}
-              size={buttonSize === 'compressed' ? 's' : buttonSize}
-            />
+            <EuiIcon type={iconType} color={color} size="m" />
           );
 
+          const isActuallyDisabled = optionDisabled || isDisabled;
           return (
             <div className={wrapperClasses} key={index} {...rest}>
               <input
@@ -178,7 +179,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
                 onChange={() => onChange(id, value)}
                 checked={isSelectedState}
                 data-test-subj={dataTestSubj}
-                disabled={optionDisabled || isDisabled}
+                disabled={isActuallyDisabled}
                 value={value}
                 type="radio"
                 {...rest}