[EuiButtonGroup] Improve interaction states

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Improved `EuiButtonGroup` focus, hover, selected and disabled states ([#4142](https://github.com/elastic/eui/pull/4142))
 - Added `display` prop to `EuiToolTip` for common display block needs ([#4148](https://github.com/elastic/eui/pull/4148))
 
 **Bug fixes**

src/components/button/button_group/_button_group.scss

@@ -47,9 +47,4 @@
     border: 1px solid $euiFormBorderColor;
     overflow: visible;
   }
-
-  .euiButtonGroupButton {
-    // Add 2 to the border radius to account for the background-clip
-    border-radius: $euiFormControlCompressedBorderRadius + 2;
-  }
 }

src/components/button/button_group/_button_group_button.scss

@@ -45,41 +45,7 @@
     color: $euiButtonColorDisabledText;
 
     &.euiButtonGroupButton-isSelected {
-      // Only increase the contrast of background color to text to 2.0 for disabled
       color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
-    }
-  }
-}
-
-.euiButtonGroupButton__textShift {
-  @include euiTextShift;
-}
-
-/**
- * Medium and Small sizing (regular button style)
- */
-
-// sass-lint:disable nesting-depth
-.euiButtonGroup--medium,
-.euiButtonGroup--small {
-  .euiButtonGroupButton {
-    border: $euiBorderThin;
-
-    &:not(:first-child) {
-      margin-left: -1px;
-    }
-
-    &:first-child {
-      border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
-    }
-
-    &:last-child {
-      border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
-    }
-  }
-
-  .euiButtonGroupButton-isDisabled {
-    &.euiButtonGroupButton-isSelected {
       background-color: $euiButtonColorDisabled;
       border-color: $euiButtonColorDisabled;
 
@@ -93,9 +59,10 @@
   }
 
   @each $name, $color in $euiButtonTypes {
-    .euiButtonGroupButton--#{$name}:not([class*='isDisabled']) {
+    &.euiButtonGroupButton--#{$name}:not([class*='isDisabled']) {
       @if ($name == 'ghost') {
         // Ghost is unique and ALWAYS sits against a dark background.
+        // Compressed styles don't support ghost color, it defaults to the text color
         color: $color;
       } @else if ($name == 'text') {
         // The default color is lighter than the normal text color, make the it the text color
@@ -117,8 +84,10 @@
         &:hover,
         &:focus,
         &:focus-within {
-          background-color: darken($color, 5%);
-          border-color: darken($color, 5%);
+          $darkHighlightBg: darken($color, 5%);
+
+          background-color: $darkHighlightBg;
+          border-color: $darkHighlightBg;
         }
       }
 
@@ -129,6 +98,33 @@
       }
     }
   }
+}
+
+.euiButtonGroupButton__textShift {
+  @include euiTextShift;
+}
+
+/**
+ * Medium and Small sizing (regular button style)
+ */
+
+.euiButtonGroup--medium,
+.euiButtonGroup--small {
+  .euiButtonGroupButton {
+    border: $euiBorderThin;
+
+    &:not(:first-child) {
+      margin-left: -1px;
+    }
+
+    &:first-child {
+      border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
+    }
+
+    &:last-child {
+      border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
+    }
+  }
 
   // Fix ghost/disabled look specifically
   .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost {
@@ -180,36 +176,13 @@
 
     &.euiButtonGroupButton-isSelected {
       font-weight: $euiFontWeightSemiBold;
-      background-color: $euiFormInputGroupLabelBackground;
     }
 
     &:not([class*='isDisabled']) {
-      color: $euiColorDarkShade;
-
-      &:hover,
-      &:focus,
-      &:focus-within {
-        background-color: transparentize($euiFormInputGroupLabelBackground, .5);
-      }
-
       &:focus,
       &:focus-within {
         outline: 2px solid $euiFocusRingColor;
       }
     }
   }
-
-  @each $name, $color in $euiButtonTypes {
-    .euiButtonGroupButton--#{$name}:not([class*='isDisabled']) {
-      &.euiButtonGroupButton-isSelected {
-        @if ($name == 'text') {
-          // The default color is lighter than the normal text color, make the it the text color
-          color: $euiTextColor;
-        } @else {
-          // Other colors need to check their contrast against the page background color.
-          color: makeHighContrastColor($color, $euiPageBackgroundColor);
-        }
-      }
-    }
-  }
 }

src/components/button/button_group/button_group.tsx

@@ -117,7 +117,7 @@ export type EuiButtonGroupProps = CommonProps & {
       }
   );
 
-type Props = Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange'> &
+type Props = Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange' | 'color'> &
   EuiButtonGroupProps;
 
 const groupSizeToClassNameMap = {