From 34e804f9bec6fa64a302b69d20b3c77b402303c3 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 20 Aug 2020 11:09:07 -0400
Subject: [PATCH 01/34] Moved changes over from old PR

---
 .../button/button_group/_button_group.scss    | 207 +++++++++++-------
 .../button/button_group/_index.scss           |   2 +
 .../button/button_group/button_group.test.tsx | 110 +++++-----
 .../button/button_group/button_group.tsx      | 149 +++++--------
 src/components/button/button_group/index.ts   |   7 +-
 5 files changed, 242 insertions(+), 233 deletions(-)

diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index 6251cf8fec0..737c09d3d2a 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -1,77 +1,140 @@
 .euiButtonGroup {
   max-width: 100%;
   display: flex;
-}
+  border-radius: $euiBorderRadius;
 
-.euiButtonGroup__fieldset {
-  display: inline-block;
-  max-width: 100%;
+  .euiButton {
+    border-radius: 0;
+    margin-left: -1px;
 
-  &--fullWidth {
-    display: block;
+    &: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;
+    }
   }
-}
 
-.euiButtonGroup--fullWidth {
-  .euiButtonGroup__toggle {
-    flex: 1;
+  .euiButton--fill {
+    z-index: 0;
+  }
+
+  .euiButtonGroup__button--iconOnly,
+  .euiButtonGroup__toggle--iconOnly {
+    min-width: auto;
+  }
+
+  .euiButton--fill + .euiButton {
+    border-left-color: transparent;
+  }
+
+  &:not(.euiButtonGroup--compressed) {
+    .euiButton {
+      &[aria-pressed='true'] + [aria-pressed='true'] {
+        box-shadow: -1px 0 0 transparentize($euiColorEmptyShade, .9);
+      }
+
+      &:first-child {
+        border-top-left-radius: $euiBorderRadius;
+        border-bottom-left-radius: $euiBorderRadius;
+      }
+
+      &:last-child {
+        border-top-right-radius: $euiBorderRadius;
+        border-bottom-right-radius: $euiBorderRadius;
+      }
+    }
   }
 }
 
-.euiButtonGroup__toggle {
-  margin-left: -1px;
-  z-index: 1;
+@each $name, $color in $euiButtonTypes {
+  .euiButtonGroup--#{$name}:not(.euiButtonGroup--compressed) {
+    @if ($name == 'ghost') {
+      // Ghost is unique and ALWAYS sits against a dark background.
+      color: $color;
+    } @else 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);
+    }
 
-  // DO NOT Transform
-  // sass-lint:disable-block no-important
-  transition: none !important;
-  transform: none !important;
-  animation: none !important;
+    $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%);
+    }
 
-  &[class*='checked'] {
-    z-index: 2; // Raise it above the simply bordered versions for crisper lines
+    @include euiSlightShadow($shadowColor);
 
-    // add a slight divider if two selected items are next to each other
-    + [class*='checked'] {
-      box-shadow: -1px 0 0 transparentize($euiColorEmptyShade, .9);
+    .euiButtonGroup__input:focus + .euiButtonGroup__label {
+      background-color: darken($color, 5%);
+      border-color: darken($color, 5%);
+      text-decoration: underline;
     }
   }
+}
 
-  .euiButtonGroup__button {
-    border-radius: 0;
-    width: 100%;
+.euiButtonGroup__button {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 
-    // DO NOT Transform
-    // sass-lint:disable-block no-important
-    transition: none !important;
-    transform: none !important;
-    animation: none !important;
+.euiButtonGroup__fieldset {
+  display: inline-block;
+  max-width: 100%;
 
-    // always the same border color unless it's selected
-    &:not([class*='fill']) {
-      border-color: $euiButtonToggleBorderColor;
-    }
+  &--fullWidth {
+    display: block;
+  }
+}
 
-    // don't colorize the shadows
-    &:enabled {
-      @include euiSlightShadow;
-    }
+.euiButtonGroup__input {
+  @include euiScreenReaderOnly;
+}
+
+.euiButtonGroup--compressed,
+.euiButtonGroup--fullWidth {
+  .euiButtonGroup__toggle {
+    flex: 1;
   }
+}
 
-  &:first-child {
-    margin-left: 0;
+.euiButtonGroup__label {
+  white-space: nowrap;
+  cursor: inherit;
 
-    .euiButtonGroup__button {
-      border-top-left-radius: $euiBorderRadius;
-      border-bottom-left-radius: $euiBorderRadius;
-    }
+  .euiButton--disabled & {
+    pointer-events: none;
   }
+}
 
-  &:last-child .euiButtonGroup__button {
-    border-top-right-radius: $euiBorderRadius;
-    border-bottom-right-radius: $euiBorderRadius;
+.euiButtonGroup__button--iconOnly {
+  .euiButton__content {
+    flex-direction: column;
+    padding: 0 $euiSizeS;
+    justify-content: center;
   }
 
+  .euiIcon {
+    color: inherit;
+    margin: 0;
+  }
 }
 
 @include euiBreakpoint('xs', 's') {
@@ -79,13 +142,9 @@
     display: block;
   }
 
-  .euiButtonGroup__toggle {
+  .euiButtonGroup__button {
     flex: 1;
     min-width: 0;
-
-    .euiButtonGroup__button {
-      min-width: 0;
-    }
   }
 }
 
@@ -94,45 +153,41 @@
   border-radius: $euiFormControlCompressedBorderRadius;
   background-color: $euiFormBackgroundColor;
 
+  .euiButtonGroup__button:focus,
+  .euiButtonGroup__input:focus + .euiButtonGroup__label {
+    outline: 2px solid $euiFocusRingColor;
+  }
+
   .euiButtonGroup__button {
-    height: $euiFormControlCompressedHeight - 2px;
-    // sass-lint:disable-block no-important
-    box-shadow: none !important;
-    font-size: $euiFontSizeS;
-    min-width: 0;
     border: none;
+    background: none;
     border-radius: $euiBorderRadius;
+    font-size: $euiFontSizeS;
+    height: $euiFormControlCompressedHeight - 2px;
+    box-shadow: none;
+    min-width: 0;
     // Offset the background color from the border by 2px
     // by clipping background to before the padding starts
     padding: 2px;
     background-clip: content-box;
 
-    &:not(.euiButtonGroup__button--selected):not(:disabled) {
+    &:not(.euiButtonGroup__button--selected):not(.euiButton--disabled) {
       color: $euiColorDarkShade;
     }
 
-    .euiButton__content {
-      padding-left: $euiSizeS;
-      padding-right: $euiSizeS;
+    &:hover,
+    &:focus {
+      box-shadow: none;
     }
   }
 
-  .euiButtonGroup__toggle {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .euiButtonToggle__input:enabled:hover + .euiButtonGroup__button,
-  .euiButtonToggle__input:enabled:focus + .euiButtonGroup__button {
-    background-color: transparentize($euiFormInputGroupLabelBackground, .5);
-  }
-
-  .euiButtonToggle__input:enabled:focus + .euiButtonGroup__button {
-    outline: 2px solid $euiFocusRingColor;
-  }
-
   .euiButtonGroup__button--selected {
     font-weight: $euiFontWeightSemiBold;
     background-color: $euiFormInputGroupLabelBackground;
   }
+
+  .euiButton__content {
+    padding-left: $euiSizeS;
+    padding-right: $euiSizeS;
+  }
 }
diff --git a/src/components/button/button_group/_index.scss b/src/components/button/button_group/_index.scss
index 78cfad351a8..0b8adecfa38 100644
--- a/src/components/button/button_group/_index.scss
+++ b/src/components/button/button_group/_index.scss
@@ -1 +1,3 @@
 @import 'button_group';
+@import 'button_group_single_button';
+@import 'button_group_multi_button';
diff --git a/src/components/button/button_group/button_group.test.tsx b/src/components/button/button_group/button_group.test.tsx
index 46ffcba1a43..00ef893035f 100644
--- a/src/components/button/button_group/button_group.test.tsx
+++ b/src/components/button/button_group/button_group.test.tsx
@@ -19,12 +19,24 @@
 
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../../test';
+import { requiredProps as commonProps } from '../../../test';
 
-import { EuiButtonGroup, GroupButtonSize } from './button_group';
+import { EuiButtonGroup } from './button_group';
+import { EuiButtonGroupProps } from './types';
 import { COLORS } from '../button';
 
-const SIZES: GroupButtonSize[] = ['s', 'm', 'compressed'];
+const SIZES: Array<EuiButtonGroupProps['buttonSize']> = [
+  's',
+  'm',
+  'compressed',
+];
+
+const requiredProps = {
+  legend: 'test',
+  onChange: () => {},
+  options: [],
+  ...commonProps,
+};
 
 const options = [
   {
@@ -44,7 +56,7 @@ const options = [
 describe('EuiButtonGroup', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiButtonGroup onChange={() => {}} {...requiredProps} />
+      <EuiButtonGroup type="single" idSelected="" {...requiredProps} />
     );
 
     expect(component).toMatchSnapshot();
@@ -54,23 +66,12 @@ describe('EuiButtonGroup', () => {
     describe('options', () => {
       it('are rendered', () => {
         const component = render(
-          <EuiButtonGroup onChange={() => {}} options={options} />
-        );
-
-        expect(component).toMatchSnapshot();
-      });
-
-      it('can pass down data-test-subj', () => {
-        const options2 = [
-          {
-            id: 'button00',
-            label: 'Option one',
-            'data-test-subj': 'test',
-          },
-        ];
-
-        const component = render(
-          <EuiButtonGroup onChange={() => {}} options={options2} />
+          <EuiButtonGroup
+            type="single"
+            idSelected=""
+            {...requiredProps}
+            options={options}
+          />
         );
 
         expect(component).toMatchSnapshot();
@@ -82,7 +83,9 @@ describe('EuiButtonGroup', () => {
         test(`${size} is rendered`, () => {
           const component = render(
             <EuiButtonGroup
-              onChange={() => {}}
+              type="single"
+              idSelected=""
+              {...requiredProps}
               buttonSize={size}
               options={options}
             />
@@ -96,7 +99,13 @@ describe('EuiButtonGroup', () => {
     describe('isDisabled', () => {
       it('is rendered', () => {
         const component = render(
-          <EuiButtonGroup onChange={() => {}} isDisabled options={options} />
+          <EuiButtonGroup
+            type="single"
+            idSelected=""
+            {...requiredProps}
+            isDisabled
+            options={options}
+          />
         );
 
         expect(component).toMatchSnapshot();
@@ -106,7 +115,13 @@ describe('EuiButtonGroup', () => {
     describe('isFullWidth', () => {
       it('is rendered', () => {
         const component = render(
-          <EuiButtonGroup onChange={() => {}} isFullWidth options={options} />
+          <EuiButtonGroup
+            type="single"
+            idSelected=""
+            {...requiredProps}
+            isFullWidth
+            options={options}
+          />
         );
 
         expect(component).toMatchSnapshot();
@@ -116,7 +131,13 @@ describe('EuiButtonGroup', () => {
     describe('isIconOnly', () => {
       it('is rendered', () => {
         const component = render(
-          <EuiButtonGroup onChange={() => {}} isIconOnly options={options} />
+          <EuiButtonGroup
+            type="single"
+            idSelected=""
+            {...requiredProps}
+            isIconOnly
+            options={options}
+          />
         );
 
         expect(component).toMatchSnapshot();
@@ -128,7 +149,9 @@ describe('EuiButtonGroup', () => {
         test(`${color} is rendered`, () => {
           const component = render(
             <EuiButtonGroup
-              onChange={() => {}}
+              type="single"
+              idSelected=""
+              {...requiredProps}
               color={color}
               options={options}
             />
@@ -139,36 +162,13 @@ describe('EuiButtonGroup', () => {
       });
     });
 
-    describe('legend', () => {
-      it('is rendered', () => {
-        const component = render(
-          <EuiButtonGroup
-            onChange={() => {}}
-            legend="legend"
-            options={options}
-          />
-        );
-
-        expect(component).toMatchSnapshot();
-      });
-    });
-
-    describe('name', () => {
-      it('is rendered', () => {
-        const component = render(
-          <EuiButtonGroup onChange={() => {}} name="name" options={options} />
-        );
-
-        expect(component).toMatchSnapshot();
-      });
-    });
-
     describe('idSelected', () => {
       it('is rendered', () => {
         const component = render(
           <EuiButtonGroup
-            onChange={() => {}}
-            idSelected="button00"
+            type="single"
+            idSelected={options[0].id}
+            {...requiredProps}
             options={options}
           />
         );
@@ -180,7 +180,7 @@ describe('EuiButtonGroup', () => {
     describe('type of multi', () => {
       it('is rendered', () => {
         const component = render(
-          <EuiButtonGroup onChange={() => {}} type="multi" options={options} />
+          <EuiButtonGroup type="multi" {...requiredProps} options={options} />
         );
 
         expect(component).toMatchSnapshot();
@@ -189,9 +189,9 @@ describe('EuiButtonGroup', () => {
       it('idToSelectedMap is rendered', () => {
         const component = render(
           <EuiButtonGroup
-            onChange={() => {}}
+            {...requiredProps}
             type="multi"
-            idToSelectedMap={{ button00: true, button01: true }}
+            idToSelectedMap={{ [options[0].id]: true, [options[1].id]: true }}
             options={options}
           />
         );
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 63750ccf3ce..228be85ebe4 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -17,53 +17,12 @@
  * under the License.
  */
 
-import React, { ReactNode, FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
-
+import React, { FunctionComponent, HTMLAttributes } from 'react';
 import { EuiScreenReaderOnly } from '../../accessibility';
-import { ToggleType } from '../../toggle';
-
-import { EuiButtonToggle } from '../button_toggle';
-import { CommonProps } from '../../common';
-
-import { ButtonColor } from '../button';
-import { ButtonContentIconSide } from '../button_content';
-import { IconType } from '../../icon';
-
-export interface EuiButtonGroupIdToSelectedMap {
-  [id: string]: boolean;
-}
-
-export type GroupButtonSize = 's' | 'm' | 'compressed';
-
-export interface EuiButtonGroupOption extends CommonProps {
-  id: string;
-  label: ReactNode;
-  name?: string;
-  isDisabled?: boolean;
-  value?: any;
-  iconSide?: ButtonContentIconSide;
-  iconType?: IconType;
-}
-
-export interface EuiButtonGroupProps extends CommonProps {
-  options?: EuiButtonGroupOption[];
-  onChange: (id: string, value?: any) => void;
-  /**
-   * Typical sizing is `s`. Medium `m` size should be reserved for major features.
-   * `compressed` is meant to be used alongside and within compressed forms.
-   */
-  buttonSize?: GroupButtonSize;
-  isDisabled?: boolean;
-  isFullWidth?: boolean;
-  isIconOnly?: boolean;
-  idSelected?: string;
-  legend?: string;
-  color?: ButtonColor;
-  name?: string;
-  type?: ToggleType;
-  idToSelectedMap?: EuiButtonGroupIdToSelectedMap;
-}
+import { EuiButtonGroupMultiButton } from './button_group_multi_button';
+import { EuiButtonGroupSingleButton } from './button_group_single_button';
+import { EuiButtonGroupProps } from './types';
 
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
   EuiButtonGroupProps;
@@ -72,24 +31,33 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
   className,
   buttonSize = 's',
   color = 'text',
-  idSelected,
+  idSelected = '',
   idToSelectedMap = {},
-  isDisabled,
-  isFullWidth,
-  isIconOnly,
-  name,
+  isDisabled = false,
+  isFullWidth = false,
+  isIconOnly = false,
   legend,
   onChange,
   options = [],
   type = 'single',
-  'data-test-subj': dataTestSubj,
   ...rest
 }) => {
+  // Compressed style can't support `ghost` color because it's more like a form field than a button
+  const badColorCombo = buttonSize === 'compressed' && color === 'ghost';
+  const resolvedColor = badColorCombo ? 'text' : color;
+  if (badColorCombo) {
+    console.warn(
+      'EuiButtonGroup of compressed size does not support the ghost color. It will render as text instead.'
+    );
+  }
+
   const classes = classNames(
     'euiButtonGroup',
-    [`euiButtonGroup--${buttonSize}`],
+    `euiButtonGroup--${resolvedColor}`,
     {
       'euiButtonGroup--fullWidth': isFullWidth,
+      'euiButtonGroup--compressed': buttonSize === 'compressed',
+      'euiButtonGroup--disabled': isDisabled,
     },
     className
   );
@@ -98,67 +66,50 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
     'euiButtonGroup__fieldset--fullWidth': isFullWidth,
   });
 
-  let legendNode;
-  if (legend) {
-    legendNode = (
+  return (
+    <fieldset className={fieldsetClasses}>
       <EuiScreenReaderOnly>
         <legend>{legend}</legend>
       </EuiScreenReaderOnly>
-    );
-  }
-
-  return (
-    <fieldset className={fieldsetClasses}>
-      {legendNode}
 
       <div className={classes} {...rest}>
         {options.map((option, index) => {
-          const {
-            id,
-            name: optionName,
-            value,
-            isDisabled: optionDisabled,
-            className,
-            ...rest
-          } = option;
-
-          let isSelectedState;
-          if (type === 'multi') {
-            isSelectedState = idToSelectedMap[id] || false;
-          } else {
-            isSelectedState = id === idSelected;
-          }
-
-          let fill;
-          if (buttonSize !== 'compressed') {
-            fill = isSelectedState;
-          }
-          const buttonClasses = classNames(
+          const optionClasses = classNames(
             'euiButtonGroup__button',
+            'euiButton--no-hover',
             {
-              'euiButtonGroup__button--selected': isSelectedState,
+              'euiButtonGroup__button--iconOnly': isIconOnly,
             },
-            className
+            option.className
           );
 
+          if (type === 'single') {
+            return (
+              <EuiButtonGroupSingleButton
+                key={index}
+                {...option}
+                idSelected={idSelected}
+                size={buttonSize}
+                isIconOnly={isIconOnly}
+                isGroupDisabled={isDisabled}
+                color={resolvedColor}
+                onChange={onChange}
+                className={optionClasses}
+              />
+            );
+          }
+
           return (
-            <EuiButtonToggle
-              className={buttonClasses}
-              toggleClassName="euiButtonGroup__toggle"
-              id={id}
+            <EuiButtonGroupMultiButton
               key={index}
-              value={value}
-              color={color}
-              fill={fill}
-              isDisabled={optionDisabled || isDisabled}
+              {...option}
+              idToSelectedMap={idToSelectedMap}
+              color={resolvedColor}
+              size={buttonSize}
               isIconOnly={isIconOnly}
-              isSelected={isSelectedState}
-              name={optionName || name}
-              onChange={() => onChange(id, value)}
-              size={buttonSize === 'compressed' ? 's' : buttonSize}
-              type={type}
-              data-test-subj={dataTestSubj}
-              {...rest}
+              isGroupDisabled={isDisabled}
+              onChange={onChange}
+              className={optionClasses}
             />
           );
         })}
diff --git a/src/components/button/button_group/index.ts b/src/components/button/button_group/index.ts
index 5e8f193e409..2e0c747810b 100644
--- a/src/components/button/button_group/index.ts
+++ b/src/components/button/button_group/index.ts
@@ -17,8 +17,9 @@
  * under the License.
  */
 
+export { EuiButtonGroup } from './button_group';
 export {
-  EuiButtonGroup,
-  EuiButtonGroupOption,
+  EuiButtonSingleGroupOptionProps,
+  EuiButtonMultiGroupOptionProps,
   EuiButtonGroupProps,
-} from './button_group';
+} from './types';

From e4bf21e1e0dd85ed1b91a461887adf6b77d8ba44 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 20 Aug 2020 11:10:28 -0400
Subject: [PATCH 02/34] Moved changes over from old PR

---
 .../_button_group_multi_button.scss           |   0
 .../_button_group_single_button.scss          |   0
 .../button_group_multi_button.tsx             |  81 +++++++++++
 .../button_group_single_button.tsx            | 100 +++++++++++++
 src/components/button/button_group/types.tsx  | 136 ++++++++++++++++++
 5 files changed, 317 insertions(+)
 create mode 100644 src/components/button/button_group/_button_group_multi_button.scss
 create mode 100644 src/components/button/button_group/_button_group_single_button.scss
 create mode 100644 src/components/button/button_group/button_group_multi_button.tsx
 create mode 100644 src/components/button/button_group/button_group_single_button.tsx
 create mode 100644 src/components/button/button_group/types.tsx

diff --git a/src/components/button/button_group/_button_group_multi_button.scss b/src/components/button/button_group/_button_group_multi_button.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/components/button/button_group/_button_group_single_button.scss b/src/components/button/button_group/_button_group_single_button.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/components/button/button_group/button_group_multi_button.tsx b/src/components/button/button_group/button_group_multi_button.tsx
new file mode 100644
index 00000000000..88fc78fe385
--- /dev/null
+++ b/src/components/button/button_group/button_group_multi_button.tsx
@@ -0,0 +1,81 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import classNames from 'classnames';
+import React, { FunctionComponent } from 'react';
+import { EuiScreenReaderOnly } from '../../accessibility';
+import { EuiButton } from '../button';
+import {
+  ButtonGroupOptionProps,
+  EuiButtonMultiGroupOptionProps,
+} from './types';
+
+type Props = {
+  idToSelectedMap: { [id: string]: boolean };
+} & ButtonGroupOptionProps &
+  EuiButtonMultiGroupOptionProps;
+
+export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
+  id,
+  label,
+  isDisabled,
+  className,
+  iconType,
+  iconSide,
+  idToSelectedMap,
+  size,
+  color,
+  isIconOnly,
+  isGroupDisabled,
+  onChange,
+  ...rest
+}) => {
+  const isSelectedState = idToSelectedMap[id] || false;
+  const badColorCombo = size === 'compressed' && color === 'ghost';
+  const buttonClasses = classNames(
+    'euiButtonGroup__toggle',
+    {
+      'euiButtonGroup__button--selected': isSelectedState,
+    },
+    className
+  );
+
+  return (
+    <EuiButton
+      className={buttonClasses}
+      id={id}
+      color={badColorCombo ? 'text' : color}
+      fill={size !== 'compressed' && isSelectedState}
+      isDisabled={isDisabled || isGroupDisabled}
+      aria-pressed={isSelectedState}
+      size={size === 'compressed' ? 's' : size}
+      onClick={() => onChange(id)}
+      iconSide={iconSide}
+      iconType={iconType}
+      {...rest}>
+      {isIconOnly ? (
+        <EuiScreenReaderOnly>
+          <span>{label}</span>
+        </EuiScreenReaderOnly>
+      ) : (
+        <>{label}</>
+      )}
+    </EuiButton>
+  );
+};
diff --git a/src/components/button/button_group/button_group_single_button.tsx b/src/components/button/button_group/button_group_single_button.tsx
new file mode 100644
index 00000000000..98a0cb8c6b9
--- /dev/null
+++ b/src/components/button/button_group/button_group_single_button.tsx
@@ -0,0 +1,100 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import classNames from 'classnames';
+import React, { FunctionComponent } from 'react';
+import { EuiScreenReaderOnly } from '../../accessibility';
+import { EuiIcon } from '../../icon';
+import {
+  ButtonGroupOptionProps,
+  EuiButtonSingleGroupOptionProps,
+} from './types';
+
+type Props = {
+  idSelected: string;
+} & ButtonGroupOptionProps &
+  EuiButtonSingleGroupOptionProps;
+
+export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
+  id,
+  value,
+  label,
+  isDisabled,
+  className,
+  iconType,
+  iconSide = 'left',
+  idSelected,
+  isGroupDisabled,
+  isIconOnly,
+  size,
+  name,
+  color,
+  onChange,
+  ...rest
+}) => {
+  const isSelectedState = id === idSelected;
+  const fill = size !== 'compressed' && isSelectedState;
+  const wrapperClasses = classNames(
+    'euiButton',
+    'euiButton--no-hover',
+    'euiButtonGroup__toggle',
+    {
+      'euiButtonGroup__button--selected': isSelectedState,
+      'euiButton--disabled': isGroupDisabled || isDisabled,
+      'euiButtonGroup__toggle--iconOnly': isIconOnly,
+      'euiButton--fill': fill,
+      'euiButton--small': size === 'compressed' || size === 's',
+      'euiButton--ghost': size !== 'compressed' && color === 'ghost',
+    },
+    className
+  );
+  const icon = iconType && <EuiIcon type={iconType} color={color} size="m" />;
+
+  return (
+    <div className={wrapperClasses}>
+      <input
+        id={id}
+        className="euiButtonGroup__input"
+        name={name}
+        onChange={() => onChange(id, value)}
+        checked={isSelectedState}
+        disabled={isGroupDisabled || isDisabled}
+        value={value}
+        type="radio"
+        {...rest}
+      />
+      <label htmlFor={id} className="euiButton__content euiButtonGroup__label">
+        {isIconOnly ? (
+          <>
+            <EuiScreenReaderOnly>
+              <span>{label}</span>
+            </EuiScreenReaderOnly>
+            {icon}
+          </>
+        ) : (
+          <>
+            {iconSide === 'left' && icon}
+            <span className="euiButton__text">{label}</span>
+            {iconSide === 'right' && icon}
+          </>
+        )}
+      </label>
+    </div>
+  );
+};
diff --git a/src/components/button/button_group/types.tsx b/src/components/button/button_group/types.tsx
new file mode 100644
index 00000000000..9f2a97c6e62
--- /dev/null
+++ b/src/components/button/button_group/types.tsx
@@ -0,0 +1,136 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ReactNode } from 'react';
+import { CommonProps } from '../../common';
+import { IconType } from '../../icon';
+import { ButtonColor } from '../button';
+import { ButtonContentIconSide } from '../button_content';
+
+export type ButtonGroupOptionProps = {
+  color: EuiButtonGroupProps['color'];
+  size: EuiButtonGroupProps['buttonSize'];
+  isIconOnly: EuiButtonGroupProps['isIconOnly'];
+  isGroupDisabled: EuiButtonGroupProps['isDisabled'];
+  onChange: EuiButtonGroupProps['onChange'];
+};
+
+export type EuiButtonMultiGroupOptionProps = EuiButtonGroupOptionProps;
+export type EuiButtonSingleGroupOptionProps = EuiButtonGroupOptionProps & {
+  /**
+   * The `name` attribute for radio inputs
+   */
+  name?: string;
+  /**
+   * The value of the radio input.
+   */
+  value?: any;
+};
+
+type EuiButtonGroupOptionProps = CommonProps & {
+  /**
+   * Each option must have a unique `id` for maintaining selection
+   */
+  id: string;
+  /**
+   * Each option must have a `label` even for icons which will be applied as the `aria-label`
+   */
+  label: ReactNode;
+  isDisabled?: boolean;
+  /**
+   * Any `type` accepted by EuiIcon
+   */
+  iconType?: IconType;
+  iconSide?: ButtonContentIconSide;
+};
+
+export type EuiButtonGroupProps = CommonProps & {
+  /**
+   * Typical sizing is `s`. Medium `m` size should be reserved for major features.
+   * `compressed` is meant to be used alongside and within compressed forms.
+   */
+  buttonSize?: 's' | 'm' | 'compressed';
+  isDisabled?: boolean;
+  /**
+   * Expands the whole group to the full width of the container.
+   * Each button gets equal widths no matter the content
+   */
+  isFullWidth?: boolean;
+  /**
+   * Hides the label to only show the `iconType` provided by the `option`
+   */
+  isIconOnly?: boolean;
+
+  /**
+   * A hidden group title (required for accessibility)
+   */
+  legend: string;
+  /**
+   * Compressed styles don't support `ghost` color (Color will be changed to "text")
+   */
+  color?: ButtonColor;
+  /**
+   * Actual type is `'single' | 'multi'`.
+   * Determines how the selection of the group should be handled.
+   * With `'single'` only one option can be selected at a time (similar to radio group).
+   * With `'multi'` multiple options selected (similar to checkbox group).
+   */
+  type?: 'single' | 'multi';
+
+  /**
+   * An array of #EuiButtonSingleGroupOptionProps or #EuiButtonMultiGroupOptionProps
+   */
+  options: EuiButtonSingleGroupOptionProps[] | EuiButtonMultiGroupOptionProps[];
+} & (
+    | {
+        type: 'single';
+        /**
+         * An array of #EuiButtonSingleGroupOptionProps
+         */
+        options: EuiButtonSingleGroupOptionProps[];
+        /**
+         * Styles the selected option to look selected (usually with `fill`)
+         * Only used in `type='single'`.
+         */
+        idSelected: string;
+        /**
+         * Returns the `id` of the clicked option and the `value`
+         * (`value` only in `type='single'`)
+         */
+        onChange: (id: string, value?: any) => void;
+        idToSelectedMap?: never;
+      }
+    | {
+        type: 'multi';
+        /**
+         * An array of #EuiButtonMultiGroupOptionProps
+         */
+        options: EuiButtonMultiGroupOptionProps[];
+        /**
+         * A map of `id`s as keys with the selected boolean values.
+         * Only used in `type='multi'`.
+         */
+        idToSelectedMap?: { [id: string]: boolean };
+        /**
+         * Returns the `id` of the clicked option
+         */
+        onChange: (id: string) => void;
+        idSelected?: never;
+      }
+  );

From fb5fd51ecb67d1d156c515c9f9bf7a4d44099b62 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 20 Aug 2020 11:47:33 -0400
Subject: [PATCH 03/34] Cleanup multi button

---
 .../button_group/button_group_multi_button.tsx     | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/button/button_group/button_group_multi_button.tsx b/src/components/button/button_group/button_group_multi_button.tsx
index 88fc78fe385..d7eb48707ef 100644
--- a/src/components/button/button_group/button_group_multi_button.tsx
+++ b/src/components/button/button_group/button_group_multi_button.tsx
@@ -32,22 +32,26 @@ type Props = {
   EuiButtonMultiGroupOptionProps;
 
 export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
+  className,
   id,
   label,
   isDisabled,
-  className,
-  iconType,
-  iconSide,
+  isGroupDisabled,
   idToSelectedMap,
   size,
   color,
   isIconOnly,
-  isGroupDisabled,
   onChange,
   ...rest
 }) => {
   const isSelectedState = idToSelectedMap[id] || false;
   const badColorCombo = size === 'compressed' && color === 'ghost';
+  if (badColorCombo) {
+    console.warn(
+      'EuiButtonGroup of compressed size does not support the ghost color. It will render as text instead.'
+    );
+  }
+
   const buttonClasses = classNames(
     'euiButtonGroup__toggle',
     {
@@ -66,8 +70,6 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
       aria-pressed={isSelectedState}
       size={size === 'compressed' ? 's' : size}
       onClick={() => onChange(id)}
-      iconSide={iconSide}
-      iconType={iconType}
       {...rest}>
       {isIconOnly ? (
         <EuiScreenReaderOnly>

From 24a96235c3070626324d008a32db59730c8db4f5 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 20 Aug 2020 12:18:27 -0400
Subject: [PATCH 04/34] Fix up single button

---
 .../button_group_single_button.tsx            | 61 +++++++++----------
 1 file changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/components/button/button_group/button_group_single_button.tsx b/src/components/button/button_group/button_group_single_button.tsx
index 98a0cb8c6b9..98af099ee32 100644
--- a/src/components/button/button_group/button_group_single_button.tsx
+++ b/src/components/button/button_group/button_group_single_button.tsx
@@ -20,11 +20,11 @@
 import classNames from 'classnames';
 import React, { FunctionComponent } from 'react';
 import { EuiScreenReaderOnly } from '../../accessibility';
-import { EuiIcon } from '../../icon';
 import {
   ButtonGroupOptionProps,
   EuiButtonSingleGroupOptionProps,
 } from './types';
+import { EuiButtonDisplay } from '../button';
 
 type Props = {
   idSelected: string;
@@ -37,8 +37,6 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
   label,
   isDisabled,
   className,
-  iconType,
-  iconSide = 'left',
   idSelected,
   isGroupDisabled,
   isIconOnly,
@@ -49,52 +47,49 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
   ...rest
 }) => {
   const isSelectedState = id === idSelected;
-  const fill = size !== 'compressed' && isSelectedState;
-  const wrapperClasses = classNames(
-    'euiButton',
-    'euiButton--no-hover',
+  const badColorCombo = size === 'compressed' && color === 'ghost';
+  if (badColorCombo) {
+    console.warn(
+      'EuiButtonGroup of compressed size does not support the ghost color. It will render as text instead.'
+    );
+  }
+
+  const buttonClasses = classNames(
     'euiButtonGroup__toggle',
     {
       'euiButtonGroup__button--selected': isSelectedState,
-      'euiButton--disabled': isGroupDisabled || isDisabled,
-      'euiButtonGroup__toggle--iconOnly': isIconOnly,
-      'euiButton--fill': fill,
-      'euiButton--small': size === 'compressed' || size === 's',
-      'euiButton--ghost': size !== 'compressed' && color === 'ghost',
     },
     className
   );
-  const icon = iconType && <EuiIcon type={iconType} color={color} size="m" />;
 
   return (
-    <div className={wrapperClasses}>
+    <EuiButtonDisplay
+      element="label"
+      htmlFor={id}
+      className={buttonClasses}
+      color={badColorCombo ? 'text' : color}
+      fill={size !== 'compressed' && isSelectedState}
+      isDisabled={isDisabled || isGroupDisabled}
+      aria-pressed={isSelectedState}
+      size={size === 'compressed' ? 's' : size}
+      onClick={() => onChange(id, value)}
+      {...rest}>
       <input
         id={id}
         className="euiButtonGroup__input"
         name={name}
-        onChange={() => onChange(id, value)}
         checked={isSelectedState}
         disabled={isGroupDisabled || isDisabled}
         value={value}
         type="radio"
-        {...rest}
       />
-      <label htmlFor={id} className="euiButton__content euiButtonGroup__label">
-        {isIconOnly ? (
-          <>
-            <EuiScreenReaderOnly>
-              <span>{label}</span>
-            </EuiScreenReaderOnly>
-            {icon}
-          </>
-        ) : (
-          <>
-            {iconSide === 'left' && icon}
-            <span className="euiButton__text">{label}</span>
-            {iconSide === 'right' && icon}
-          </>
-        )}
-      </label>
-    </div>
+      {isIconOnly ? (
+        <EuiScreenReaderOnly>
+          <span>{label}</span>
+        </EuiScreenReaderOnly>
+      ) : (
+        <>{label}</>
+      )}
+    </EuiButtonDisplay>
   );
 };

From 0c3f3970ec2549afe1c50f8f4d7cf5e2f1698834 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 20 Aug 2020 14:51:12 -0400
Subject: [PATCH 05/34] Clean slate with styles

---
 src-docs/src/views/button/button_group.js     |   2 +
 src/components/button/_button.scss            |  20 +-
 .../button/button_group/_button_group.scss    | 346 ++++++++----------
 .../_button_group_multi_button.scss           |   0
 .../_button_group_single_button.scss          |   0
 .../button/button_group/_index.scss           |   3 +-
 .../button/button_group/button_group.tsx      |  11 -
 .../button_group_multi_button.tsx             |  21 +-
 .../button_group_single_button.tsx            |  23 +-
 9 files changed, 186 insertions(+), 240 deletions(-)
 delete mode 100644 src/components/button/button_group/_button_group_multi_button.scss
 delete mode 100644 src/components/button/button_group/_button_group_single_button.scss

diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index f54514806b8..d1d208ac1b2 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -190,6 +190,7 @@ export default () => {
     <Fragment>
       <EuiButtonGroup
         legend="This is a basic group"
+        name="basic"
         options={toggleButtons}
         idSelected={toggleIdSelected}
         onChange={(id) => onChange(id)}
@@ -239,6 +240,7 @@ export default () => {
       &nbsp;&nbsp;
       <EuiButtonGroup
         legend="Text style"
+        name="Text style"
         options={toggleButtonsIconsMulti}
         idToSelectedMap={toggleIconIdToSelectedMap}
         onChange={(id) => onChangeIconsMulti(id)}
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index ea7f3a05b91..00e57f45285 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -30,14 +30,14 @@
 
   &:enabled {
     &:hover,
-    &:focus {
+    &:focus,
+    &:focus-within {
       background-color: transparentize($euiColorPrimary, .9);
     }
   }
 
   &:disabled {
     @include euiButtonContentDisabled;
-
     color: $euiButtonColorDisabledText;
     border-color: $euiButtonColorDisabled;
 
@@ -48,16 +48,17 @@
       border-color: $euiButtonColorDisabled;
 
       &:hover,
-      &:focus {
+      &:focus,
+      &:focus-within {
         background-color: $euiButtonColorDisabled;
         border-color: $euiButtonColorDisabled;
       }
     }
 
     &:hover,
-    &:focus {
+    &:focus,
+    &:focus-within {
       @include euiSlightShadow;
-
       text-decoration: none;
     }
   }
@@ -90,7 +91,8 @@
 
       &:enabled {
         &:hover,
-        &:focus {
+        &:focus,
+        &:focus-within {
           background-color: darken($color, 5%);
           border-color: darken($color, 5%);
         }
@@ -109,7 +111,8 @@
       @include euiSlightShadow($shadowColor);
 
       &:hover,
-      &:focus {
+      &:focus,
+      &:focus-within {
         @include euiSlightShadowHover($shadowColor);
         background-color: transparentize($color, .9);
 
@@ -125,7 +128,8 @@
 .euiButton:disabled.euiButton--ghost {
   &,
   &:hover,
-  &:focus {
+  &:focus,
+  &:focus-within {
     @include euiSlightShadow($euiColorInk);
     color: $euiButtonColorGhostDisabled;
     border-color: $euiButtonColorGhostDisabled;
diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index 737c09d3d2a..b2f612bbc90 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -1,193 +1,163 @@
-.euiButtonGroup {
-  max-width: 100%;
-  display: flex;
-  border-radius: $euiBorderRadius;
-
-  .euiButton {
-    border-radius: 0;
-    margin-left: -1px;
-
-    &: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 {
-    z-index: 0;
-  }
-
-  .euiButtonGroup__button--iconOnly,
-  .euiButtonGroup__toggle--iconOnly {
-    min-width: auto;
-  }
-
-  .euiButton--fill + .euiButton {
-    border-left-color: transparent;
-  }
-
-  &:not(.euiButtonGroup--compressed) {
-    .euiButton {
-      &[aria-pressed='true'] + [aria-pressed='true'] {
-        box-shadow: -1px 0 0 transparentize($euiColorEmptyShade, .9);
-      }
-
-      &:first-child {
-        border-top-left-radius: $euiBorderRadius;
-        border-bottom-left-radius: $euiBorderRadius;
-      }
-
-      &:last-child {
-        border-top-right-radius: $euiBorderRadius;
-        border-bottom-right-radius: $euiBorderRadius;
-      }
-    }
-  }
-}
-
-@each $name, $color in $euiButtonTypes {
-  .euiButtonGroup--#{$name}:not(.euiButtonGroup--compressed) {
-    @if ($name == 'ghost') {
-      // Ghost is unique and ALWAYS sits against a dark background.
-      color: $color;
-    } @else 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);
-    }
-
-    $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__input:focus + .euiButtonGroup__label {
-      background-color: darken($color, 5%);
-      border-color: darken($color, 5%);
-      text-decoration: underline;
-    }
-  }
-}
-
-.euiButtonGroup__button {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
+// .euiButtonGroup {
+//   max-width: 100%;
+//   display: flex;
+//   border-radius: $euiBorderRadius;
+
+//   .euiButtonGroup__button {
+//     border-radius: 0;
+//     margin-left: -1px;
+//     min-width: auto;
+
+//     &:not([class*='fill']) {
+//       border-color: $euiButtonToggleBorderColor;
+//     }
+
+//     &,
+//     &:hover,
+//     &:focus,
+//     &:active {
+//       transition: none;
+//       transform: none;
+//       animation: none;
+//       box-shadow: none;
+//     }
+
+//     &[class*='disabled']:hover {
+//       text-decoration: none;
+//       cursor: not-allowed;
+//     }
+
+//     &[class*='fill'] {
+//       z-index: 0;
+//     }
+//   }
+
+//   &:not(.euiButtonGroup--compressed) {
+//     .euiButtonGroup__button {
+//       &:first-child {
+//         border-top-left-radius: $euiBorderRadius;
+//         border-bottom-left-radius: $euiBorderRadius;
+//       }
+
+//       &:last-child {
+//         border-top-right-radius: $euiBorderRadius;
+//         border-bottom-right-radius: $euiBorderRadius;
+//       }
+//     }
+
+//     .euiButtonGroup__button--selected + .euiButtonGroup__button--selected {
+//       box-shadow: -1px 0 0 transparentize($euiColorEmptyShade, .9);
+//     }
+//   }
+// }
+
+// @each $name, $color in $euiButtonTypes {
+//   .euiButtonGroup--#{$name}:not(.euiButtonGroup--compressed) {
+//     @if ($name == 'ghost') {
+//       // Ghost is unique and ALWAYS sits against a dark background.
+//       color: $color;
+//     } @else 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);
+//     }
+
+//     $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__input:focus + .euiButtonGroup__label {
+//       background-color: darken($color, 5%);
+//       border-color: darken($color, 5%);
+//       text-decoration: underline;
+//     }
+//   }
+// }
+
+// .euiButtonGroup__button {
+//   text-overflow: ellipsis;
+//   overflow: hidden;
+// }
+
+// .euiButtonGroup__fieldset {
+//   display: inline-block;
+//   max-width: 100%;
+
+//   &--fullWidth {
+//     display: block;
+//   }
+// }
+
+// .euiButtonGroup__input {
+//   @include euiScreenReaderOnly;
+// }
+
+// .euiButtonGroup--compressed,
+// .euiButtonGroup--fullWidth {
+//   .euiButtonGroup__button {
+//     flex: 1;
+//   }
+// }
 
-.euiButtonGroup__fieldset {
-  display: inline-block;
-  max-width: 100%;
-
-  &--fullWidth {
-    display: block;
-  }
-}
-
-.euiButtonGroup__input {
-  @include euiScreenReaderOnly;
-}
-
-.euiButtonGroup--compressed,
-.euiButtonGroup--fullWidth {
-  .euiButtonGroup__toggle {
-    flex: 1;
-  }
-}
-
-.euiButtonGroup__label {
-  white-space: nowrap;
-  cursor: inherit;
-
-  .euiButton--disabled & {
-    pointer-events: none;
-  }
-}
-
-.euiButtonGroup__button--iconOnly {
-  .euiButton__content {
-    flex-direction: column;
-    padding: 0 $euiSizeS;
-    justify-content: center;
-  }
-
-  .euiIcon {
-    color: inherit;
-    margin: 0;
-  }
-}
 
 @include euiBreakpoint('xs', 's') {
-  .euiButtonGroup__fieldset {
-    display: block;
-  }
-
-  .euiButtonGroup__button {
-    flex: 1;
-    min-width: 0;
-  }
+  // .euiButtonGroup__fieldset {
+  //   display: block;
+  // }
+
+  // .euiButtonGroup__button {
+  //   flex: 1;
+  //   min-width: 0;
+  // }
 }
 
-.euiButtonGroup--compressed {
-  border: 1px solid $euiFormBorderColor;
-  border-radius: $euiFormControlCompressedBorderRadius;
-  background-color: $euiFormBackgroundColor;
-
-  .euiButtonGroup__button:focus,
-  .euiButtonGroup__input:focus + .euiButtonGroup__label {
-    outline: 2px solid $euiFocusRingColor;
-  }
-
-  .euiButtonGroup__button {
-    border: none;
-    background: none;
-    border-radius: $euiBorderRadius;
-    font-size: $euiFontSizeS;
-    height: $euiFormControlCompressedHeight - 2px;
-    box-shadow: none;
-    min-width: 0;
-    // Offset the background color from the border by 2px
-    // by clipping background to before the padding starts
-    padding: 2px;
-    background-clip: content-box;
-
-    &:not(.euiButtonGroup__button--selected):not(.euiButton--disabled) {
-      color: $euiColorDarkShade;
-    }
-
-    &:hover,
-    &:focus {
-      box-shadow: none;
-    }
-  }
-
-  .euiButtonGroup__button--selected {
-    font-weight: $euiFontWeightSemiBold;
-    background-color: $euiFormInputGroupLabelBackground;
-  }
-
-  .euiButton__content {
-    padding-left: $euiSizeS;
-    padding-right: $euiSizeS;
-  }
-}
+// .euiButtonGroup--compressed {
+//   border: 1px solid $euiFormBorderColor;
+//   border-radius: $euiFormControlCompressedBorderRadius;
+//   background-color: $euiFormBackgroundColor;
+
+//   .euiButtonGroup__button {
+//     border: none;
+//     background: none;
+//     border-radius: $euiBorderRadius;
+//     font-size: $euiFontSizeS;
+//     height: $euiFormControlCompressedHeight - 2px;
+//     box-shadow: none;
+//     min-width: 0;
+//     // Offset the background color from the border by 2px
+//     // by clipping background to before the padding starts
+//     padding: 2px;
+//     background-clip: content-box;
+
+//     &:not(.euiButtonGroup__button--selected):not(.euiButton--disabled) {
+//       color: $euiColorDarkShade;
+//     }
+
+//     &:hover,
+//     &:focus {
+//       box-shadow: none;
+//     }
+
+//     &:focus {
+//       outline: 2px solid $euiFocusRingColor;
+//     }
+//   }
+
+//   .euiButtonGroup__button--selected {
+//     font-weight: $euiFontWeightSemiBold;
+//     background-color: $euiFormInputGroupLabelBackground;
+//   }
+
+//   // .euiButton__content {
+//   //   padding-left: $euiSizeS;
+//   //   padding-right: $euiSizeS;
+//   // }
+// }
diff --git a/src/components/button/button_group/_button_group_multi_button.scss b/src/components/button/button_group/_button_group_multi_button.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/components/button/button_group/_button_group_single_button.scss b/src/components/button/button_group/_button_group_single_button.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/components/button/button_group/_index.scss b/src/components/button/button_group/_index.scss
index 0b8adecfa38..dd9e2fa377b 100644
--- a/src/components/button/button_group/_index.scss
+++ b/src/components/button/button_group/_index.scss
@@ -1,3 +1,2 @@
 @import 'button_group';
-@import 'button_group_single_button';
-@import 'button_group_multi_button';
+@import 'button_group_button';
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 228be85ebe4..b5774fd20df 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -74,15 +74,6 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
 
       <div className={classes} {...rest}>
         {options.map((option, index) => {
-          const optionClasses = classNames(
-            'euiButtonGroup__button',
-            'euiButton--no-hover',
-            {
-              'euiButtonGroup__button--iconOnly': isIconOnly,
-            },
-            option.className
-          );
-
           if (type === 'single') {
             return (
               <EuiButtonGroupSingleButton
@@ -94,7 +85,6 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
                 isGroupDisabled={isDisabled}
                 color={resolvedColor}
                 onChange={onChange}
-                className={optionClasses}
               />
             );
           }
@@ -109,7 +99,6 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
               isIconOnly={isIconOnly}
               isGroupDisabled={isDisabled}
               onChange={onChange}
-              className={optionClasses}
             />
           );
         })}
diff --git a/src/components/button/button_group/button_group_multi_button.tsx b/src/components/button/button_group/button_group_multi_button.tsx
index d7eb48707ef..25b4c0f79a3 100644
--- a/src/components/button/button_group/button_group_multi_button.tsx
+++ b/src/components/button/button_group/button_group_multi_button.tsx
@@ -19,7 +19,6 @@
 
 import classNames from 'classnames';
 import React, { FunctionComponent } from 'react';
-import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButton } from '../button';
 import {
   ButtonGroupOptionProps,
@@ -46,16 +45,11 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
 }) => {
   const isSelectedState = idToSelectedMap[id] || false;
   const badColorCombo = size === 'compressed' && color === 'ghost';
-  if (badColorCombo) {
-    console.warn(
-      'EuiButtonGroup of compressed size does not support the ghost color. It will render as text instead.'
-    );
-  }
 
   const buttonClasses = classNames(
-    'euiButtonGroup__toggle',
+    'euiButtonGroupButton',
     {
-      'euiButtonGroup__button--selected': isSelectedState,
+      'euiButtonGroupButton--selected': isSelectedState,
     },
     className
   );
@@ -70,14 +64,11 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
       aria-pressed={isSelectedState}
       size={size === 'compressed' ? 's' : size}
       onClick={() => onChange(id)}
+      textProps={{
+        className: isIconOnly ? 'euiScreenReaderOnly' : undefined,
+      }}
       {...rest}>
-      {isIconOnly ? (
-        <EuiScreenReaderOnly>
-          <span>{label}</span>
-        </EuiScreenReaderOnly>
-      ) : (
-        <>{label}</>
-      )}
+      {label}
     </EuiButton>
   );
 };
diff --git a/src/components/button/button_group/button_group_single_button.tsx b/src/components/button/button_group/button_group_single_button.tsx
index 98af099ee32..a8b17175316 100644
--- a/src/components/button/button_group/button_group_single_button.tsx
+++ b/src/components/button/button_group/button_group_single_button.tsx
@@ -19,7 +19,6 @@
 
 import classNames from 'classnames';
 import React, { FunctionComponent } from 'react';
-import { EuiScreenReaderOnly } from '../../accessibility';
 import {
   ButtonGroupOptionProps,
   EuiButtonSingleGroupOptionProps,
@@ -48,16 +47,11 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
 }) => {
   const isSelectedState = id === idSelected;
   const badColorCombo = size === 'compressed' && color === 'ghost';
-  if (badColorCombo) {
-    console.warn(
-      'EuiButtonGroup of compressed size does not support the ghost color. It will render as text instead.'
-    );
-  }
 
   const buttonClasses = classNames(
-    'euiButtonGroup__toggle',
+    'euiButtonGroupButton',
     {
-      'euiButtonGroup__button--selected': isSelectedState,
+      'euiButtonGroupButton--selected': isSelectedState,
     },
     className
   );
@@ -73,23 +67,20 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
       aria-pressed={isSelectedState}
       size={size === 'compressed' ? 's' : size}
       onClick={() => onChange(id, value)}
+      textProps={{
+        className: isIconOnly ? 'euiScreenReaderOnly' : undefined,
+      }}
       {...rest}>
       <input
         id={id}
-        className="euiButtonGroup__input"
+        className="euiScreenReaderOnly"
         name={name}
         checked={isSelectedState}
         disabled={isGroupDisabled || isDisabled}
         value={value}
         type="radio"
       />
-      {isIconOnly ? (
-        <EuiScreenReaderOnly>
-          <span>{label}</span>
-        </EuiScreenReaderOnly>
-      ) : (
-        <>{label}</>
-      )}
+      {label}
     </EuiButtonDisplay>
   );
 };

From ed50d7a897a5f4a661c65ca56b6baca5d1ece97c Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 20 Aug 2020 14:51:24 -0400
Subject: [PATCH 06/34] Clean slate with styles

---
 src/components/button/button_group/_button_group_button.scss | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/components/button/button_group/_button_group_button.scss

diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss
new file mode 100644
index 00000000000..e69de29bb2d

From 7875ebaf91ea5b83633e06dda61177605050e033 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 20 Aug 2020 15:27:05 -0400
Subject: [PATCH 07/34] [EuiButton] add `minWidth` prop

---
 src-docs/src/views/button/playground.js       |  6 +++++
 .../button/__snapshots__/button.test.tsx.snap | 16 +++++++++++++
 src/components/button/button.test.tsx         |  8 +++++++
 src/components/button/button.tsx              | 23 ++++++++++++++++++-
 .../button_group_multi_button.tsx             |  1 +
 .../button_group_single_button.tsx            |  3 ++-
 6 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
index bb61586582e..91950b9b415 100644
--- a/src-docs/src/views/button/playground.js
+++ b/src-docs/src/views/button/playground.js
@@ -4,6 +4,7 @@ import {
   propUtilityForPlayground,
   iconValidator,
 } from '../../services/playground';
+import { number } from 'prop-types';
 
 export default () => {
   const docgenInfo = Array.isArray(EuiButton.__docgenInfo)
@@ -20,6 +21,11 @@ export default () => {
     hidden: true,
   };
 
+  propsToUse.minWidth = {
+    ...propsToUse.minWidth,
+    type: PropTypes.Number,
+  };
+
   const setGhostBackground = {
     color: 'ghost',
   };
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index fb283b97522..9793bcbde4d 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -303,6 +303,22 @@ exports[`EuiButton props isLoading is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButton props minWidth is rendered 1`] = `
+<button
+  class="euiButton euiButton--primary"
+  style="min-width:0"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButton__content"
+  >
+    <span
+      class="euiButton__text"
+    />
+  </span>
+</button>
+`;
+
 exports[`EuiButton props size m is rendered 1`] = `
 <button
   class="euiButton euiButton--primary"
diff --git a/src/components/button/button.test.tsx b/src/components/button/button.test.tsx
index 63b856e8196..0c86c52ae55 100644
--- a/src/components/button/button.test.tsx
+++ b/src/components/button/button.test.tsx
@@ -76,6 +76,14 @@ describe('EuiButton', () => {
       });
     });
 
+    describe('minWidth', () => {
+      it('is rendered', () => {
+        const component = render(<EuiButton minWidth={0} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
     describe('iconType', () => {
       it('is rendered', () => {
         const component = render(<EuiButton iconType="user" />);
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index c230b0d2214..ae8a21d7e28 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -17,7 +17,12 @@
  * under the License.
  */
 
-import React, { FunctionComponent, Ref, ButtonHTMLAttributes } from 'react';
+import React, {
+  FunctionComponent,
+  Ref,
+  ButtonHTMLAttributes,
+  CSSProperties,
+} from 'react';
 import classNames from 'classnames';
 
 import {
@@ -93,6 +98,10 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
    * Extends the button to 100% width
    */
   fullWidth?: boolean;
+  /**
+   * Override the default minimum width
+   */
+  minWidth?: CSSProperties['minWidth'];
   /**
    * Force disables the button and changes the icon to a loading spinner
    */
@@ -101,6 +110,7 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
    * Object of props passed to the <span/> wrapping the button's content
    */
   contentProps?: EuiButtonContentType;
+  style?: CSSProperties;
 }
 
 export interface EuiButtonDisplayProps extends EuiButtonProps {
@@ -129,6 +139,8 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
       textProps,
       fullWidth,
       element = 'button',
+      minWidth,
+      style,
       ...rest
     },
     ref
@@ -168,10 +180,19 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
       </EuiButtonContent>
     );
 
+    let calculatedStyle: CSSProperties | undefined = style;
+    if (minWidth !== undefined || minWidth !== null) {
+      calculatedStyle = {
+        ...calculatedStyle,
+        minWidth,
+      };
+    }
+
     return React.createElement(
       element,
       {
         className: classes,
+        style: calculatedStyle,
         ref,
         ...rest,
       },
diff --git a/src/components/button/button_group/button_group_multi_button.tsx b/src/components/button/button_group/button_group_multi_button.tsx
index 25b4c0f79a3..e7da9b2b6a0 100644
--- a/src/components/button/button_group/button_group_multi_button.tsx
+++ b/src/components/button/button_group/button_group_multi_button.tsx
@@ -64,6 +64,7 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
       aria-pressed={isSelectedState}
       size={size === 'compressed' ? 's' : size}
       onClick={() => onChange(id)}
+      minWidth={0}
       textProps={{
         className: isIconOnly ? 'euiScreenReaderOnly' : undefined,
       }}
diff --git a/src/components/button/button_group/button_group_single_button.tsx b/src/components/button/button_group/button_group_single_button.tsx
index a8b17175316..4c0cb7acb34 100644
--- a/src/components/button/button_group/button_group_single_button.tsx
+++ b/src/components/button/button_group/button_group_single_button.tsx
@@ -64,12 +64,12 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
       color={badColorCombo ? 'text' : color}
       fill={size !== 'compressed' && isSelectedState}
       isDisabled={isDisabled || isGroupDisabled}
-      aria-pressed={isSelectedState}
       size={size === 'compressed' ? 's' : size}
       onClick={() => onChange(id, value)}
       textProps={{
         className: isIconOnly ? 'euiScreenReaderOnly' : undefined,
       }}
+      minWidth={0}
       {...rest}>
       <input
         id={id}
@@ -79,6 +79,7 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
         disabled={isGroupDisabled || isDisabled}
         value={value}
         type="radio"
+        onChange={() => onChange(id, value)}
       />
       {label}
     </EuiButtonDisplay>

From 4a0f2855bd501c44bad04ae37ba2fe865e548aaa Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 20 Aug 2020 16:04:03 -0400
Subject: [PATCH 08/34] Semi-fix disabled states

---
 src-docs/src/views/button/button_group.js              |  2 ++
 src/components/button/_button.scss                     | 10 +++++-----
 .../button/button_group/_button_group_button.scss      |  8 ++++++++
 src/components/button/button_group/button_group.tsx    |  4 ++--
 .../button/button_group/button_group_multi_button.tsx  |  3 ---
 .../button/button_group/button_group_single_button.tsx |  8 ++++----
 src/components/button/button_group/types.tsx           |  2 +-
 src/global_styling/mixins/_button.scss                 |  6 +++---
 .../eui-amsterdam/global_styling/mixins/_button.scss   |  4 ++--
 src/themes/eui-amsterdam/overrides/_button.scss        |  6 +++---
 10 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index d1d208ac1b2..15faf32510f 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -89,6 +89,7 @@ export default () => {
       id: `${idPrefix3}2`,
       label: 'Align right',
       iconType: 'editorAlignRight',
+      isDisabled: true,
     },
   ];
 
@@ -104,6 +105,7 @@ export default () => {
       label: 'Italic',
       name: 'italic',
       iconType: 'editorItalic',
+      isDisabled: true,
     },
     {
       id: `${idPrefix3}5`,
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 00e57f45285..9bafed16bc3 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -28,7 +28,7 @@
     @include euiSlightShadowHover;
   }
 
-  &:enabled {
+  &:not([class*='isDisabled']) {
     &:hover,
     &:focus,
     &:focus-within {
@@ -36,7 +36,7 @@
     }
   }
 
-  &:disabled {
+  &.euiButton-isDisabled {
     @include euiButtonContentDisabled;
     color: $euiButtonColorDisabledText;
     border-color: $euiButtonColorDisabled;
@@ -89,7 +89,7 @@
 
       color: $fillTextColor;
 
-      &:enabled {
+      &:not([class*='isDisabled']) {
         &:hover,
         &:focus,
         &:focus-within {
@@ -99,7 +99,7 @@
       }
     }
 
-    &:enabled {
+    &:not([class*='isDisabled']) {
       $shadowColor: $euiShadowColor;
       @if ($name == 'ghost') {
         $shadowColor: $euiColorInk;
@@ -125,7 +125,7 @@
 }
 
 // Fix ghost/disabled look specifically
-.euiButton:disabled.euiButton--ghost {
+.euiButton.euiButton-isDisabled.euiButton--ghost {
   &,
   &:hover,
   &:focus,
diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss
index e69de29bb2d..15fa6f0817d 100644
--- a/src/components/button/button_group/_button_group_button.scss
+++ b/src/components/button/button_group/_button_group_button.scss
@@ -0,0 +1,8 @@
+.euiButtonGroupButton {
+  // Remove transforms from all states
+  transform: none !important;
+
+  &:focus-within {
+
+  }
+}
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index b5774fd20df..cfc98ef7472 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -82,7 +82,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
                 idSelected={idSelected}
                 size={buttonSize}
                 isIconOnly={isIconOnly}
-                isGroupDisabled={isDisabled}
+                isDisabled={isDisabled || option.isDisabled}
                 color={resolvedColor}
                 onChange={onChange}
               />
@@ -97,7 +97,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
               color={resolvedColor}
               size={buttonSize}
               isIconOnly={isIconOnly}
-              isGroupDisabled={isDisabled}
+              isDisabled={isDisabled || option.isDisabled}
               onChange={onChange}
             />
           );
diff --git a/src/components/button/button_group/button_group_multi_button.tsx b/src/components/button/button_group/button_group_multi_button.tsx
index e7da9b2b6a0..e2704aad4a1 100644
--- a/src/components/button/button_group/button_group_multi_button.tsx
+++ b/src/components/button/button_group/button_group_multi_button.tsx
@@ -34,8 +34,6 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
   className,
   id,
   label,
-  isDisabled,
-  isGroupDisabled,
   idToSelectedMap,
   size,
   color,
@@ -60,7 +58,6 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
       id={id}
       color={badColorCombo ? 'text' : color}
       fill={size !== 'compressed' && isSelectedState}
-      isDisabled={isDisabled || isGroupDisabled}
       aria-pressed={isSelectedState}
       size={size === 'compressed' ? 's' : size}
       onClick={() => onChange(id)}
diff --git a/src/components/button/button_group/button_group_single_button.tsx b/src/components/button/button_group/button_group_single_button.tsx
index 4c0cb7acb34..b9812bdca2c 100644
--- a/src/components/button/button_group/button_group_single_button.tsx
+++ b/src/components/button/button_group/button_group_single_button.tsx
@@ -37,7 +37,6 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
   isDisabled,
   className,
   idSelected,
-  isGroupDisabled,
   isIconOnly,
   size,
   name,
@@ -58,12 +57,13 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
 
   return (
     <EuiButtonDisplay
-      element="label"
       htmlFor={id}
+      element={isDisabled ? 'button' : 'label'} // Not sure if this is the best way to handle disabled labels from incurring clicks
       className={buttonClasses}
       color={badColorCombo ? 'text' : color}
       fill={size !== 'compressed' && isSelectedState}
-      isDisabled={isDisabled || isGroupDisabled}
+      isDisabled={isDisabled}
+      disabled={isDisabled}
       size={size === 'compressed' ? 's' : size}
       onClick={() => onChange(id, value)}
       textProps={{
@@ -76,7 +76,7 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
         className="euiScreenReaderOnly"
         name={name}
         checked={isSelectedState}
-        disabled={isGroupDisabled || isDisabled}
+        disabled={isDisabled}
         value={value}
         type="radio"
         onChange={() => onChange(id, value)}
diff --git a/src/components/button/button_group/types.tsx b/src/components/button/button_group/types.tsx
index 9f2a97c6e62..3f002ec7d56 100644
--- a/src/components/button/button_group/types.tsx
+++ b/src/components/button/button_group/types.tsx
@@ -27,7 +27,7 @@ export type ButtonGroupOptionProps = {
   color: EuiButtonGroupProps['color'];
   size: EuiButtonGroupProps['buttonSize'];
   isIconOnly: EuiButtonGroupProps['isIconOnly'];
-  isGroupDisabled: EuiButtonGroupProps['isDisabled'];
+  // isGroupDisabled: EuiButtonGroupProps['isDisabled'];
   onChange: EuiButtonGroupProps['onChange'];
 };
 
diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss
index f5069625e8a..5c176de596c 100644
--- a/src/global_styling/mixins/_button.scss
+++ b/src/global_styling/mixins/_button.scss
@@ -16,7 +16,7 @@
 @mixin euiButtonFocus {
   transition: all $euiAnimSpeedNormal ease-in-out;
 
-  &:hover:not(:disabled) {
+  &:hover:not([class*='isDisabled']) {
     transform: translateY(-1px);
   }
 
@@ -24,7 +24,7 @@
     animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
   }
 
-  &:active:not(:disabled) {
+  &:active:not([class*='isDisabled']) {
     transform: translateY(1px);
   }
 }
@@ -43,7 +43,7 @@
   // focus states should come after all default styles
   @include euiButtonFocus;
 
-  &:hover:not(:disabled),
+  &:hover:not([class*='isDisabled']),
   &:focus {
     text-decoration: underline;
   }
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss
index 33479a57304..cc269d1c748 100644
--- a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss
+++ b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss
@@ -11,7 +11,7 @@
   // focus states should come after all default styles
   @include euiButtonFocus;
 
-  &:hover:not(:disabled),
+  &:hover:not([class*='isDisabled']),
   &:focus {
     text-decoration: underline;
   }
@@ -28,7 +28,7 @@
   // But still use transparency
   background-color: transparentize($color, $transparency);
 
-  &:enabled {
+  &:not([class*='isDisabled']) {
     &:hover,
     &:focus {
       background-color: transparentize($color, lightOrDarkTheme(.9, .65));
diff --git a/src/themes/eui-amsterdam/overrides/_button.scss b/src/themes/eui-amsterdam/overrides/_button.scss
index d4d22be0452..618f8f21c2e 100644
--- a/src/themes/eui-amsterdam/overrides/_button.scss
+++ b/src/themes/eui-amsterdam/overrides/_button.scss
@@ -9,7 +9,7 @@
   // Added exclusion of the `ghost` type of button
   // so as not to override those specific styles from default theme
   // And the only style that needs to change is the non-filled version
-  &:disabled:not(.euiButton--ghost):not(.euiButton--fill) {
+  &.euiButton-isDisabled:not(.euiButton--ghost):not(.euiButton--fill) {
     $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 70%);
     background-color: transparentize($euiButtonColorDisabled, .7);
     color: makeHighContrastColor($euiButtonColorDisabled, $backgroundColorSimulated, 2);
@@ -34,7 +34,7 @@
       color: makeHighContrastColor($color, $backgroundColorSimulated);
     }
 
-    &.euiButton--fill:enabled {
+    &.euiButton--fill:not([class*='isDisabled']) {
       &:hover,
       &:focus {
         background-color: darken($color, 10%);
@@ -44,7 +44,7 @@
 }
 
 // Fix ghost/disabled look specifically
-.euiButton:disabled.euiButton--ghost:not(.euiButton--fill) {
+.euiButton.euiButton-isDisabled.euiButton--ghost:not(.euiButton--fill) {
   &,
   &:hover,
   &:focus {

From c7fb7e32475bc3c491eb3607169ac3a0c1467f8e Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 20 Aug 2020 17:23:23 -0400
Subject: [PATCH 09/34] Trying to fix styles as EuiButton

---
 .../button/button_group/_button_group.scss    | 81 +++++++------------
 .../button_group/_button_group_button.scss    | 29 +++++++
 .../button_group_single_button.tsx            |  4 +-
 src/components/button/button_group/types.tsx  |  1 -
 4 files changed, 62 insertions(+), 53 deletions(-)

diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index b2f612bbc90..2da820e407a 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -1,37 +1,24 @@
-// .euiButtonGroup {
-//   max-width: 100%;
-//   display: flex;
-//   border-radius: $euiBorderRadius;
-
-//   .euiButtonGroup__button {
-//     border-radius: 0;
-//     margin-left: -1px;
-//     min-width: auto;
-
-//     &:not([class*='fill']) {
-//       border-color: $euiButtonToggleBorderColor;
-//     }
+.euiButtonGroup__fieldset {
+  display: inline-block;
+  max-width: 100%;
 
-//     &,
-//     &:hover,
-//     &:focus,
-//     &:active {
-//       transition: none;
-//       transform: none;
-//       animation: none;
-//       box-shadow: none;
-//     }
+  &--fullWidth {
+    display: block;
+  }
+}
 
-//     &[class*='disabled']:hover {
-//       text-decoration: none;
-//       cursor: not-allowed;
-//     }
+.euiButtonGroup {
+  max-width: 100%;
+  display: flex;
 
-//     &[class*='fill'] {
-//       z-index: 0;
-//     }
-//   }
+  // Non-compressed version only
+  &:not(.euiButtonGroup--compressed) {
+    .euiButtonGroup__button {
+    }
+  }
+}
 
+// .euiButtonGroup {
 //   &:not(.euiButtonGroup--compressed) {
 //     .euiButtonGroup__button {
 //       &:first-child {
@@ -87,38 +74,30 @@
 //   overflow: hidden;
 // }
 
-// .euiButtonGroup__fieldset {
-//   display: inline-block;
-//   max-width: 100%;
-
-//   &--fullWidth {
-//     display: block;
-//   }
-// }
 
 // .euiButtonGroup__input {
 //   @include euiScreenReaderOnly;
 // }
 
 // .euiButtonGroup--compressed,
-// .euiButtonGroup--fullWidth {
+.euiButtonGroup--fullWidth {
+  .euiButtonGroupButton {
+    flex: 1;
+  }
+}
+
+
+// @include euiBreakpoint('xs', 's') {
+//   .euiButtonGroup__fieldset {
+//     display: block;
+//   }
+
 //   .euiButtonGroup__button {
 //     flex: 1;
+//     min-width: 0;
 //   }
 // }
 
-
-@include euiBreakpoint('xs', 's') {
-  // .euiButtonGroup__fieldset {
-  //   display: block;
-  // }
-
-  // .euiButtonGroup__button {
-  //   flex: 1;
-  //   min-width: 0;
-  // }
-}
-
 // .euiButtonGroup--compressed {
 //   border: 1px solid $euiFormBorderColor;
 //   border-radius: $euiFormControlCompressedBorderRadius;
diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss
index 15fa6f0817d..4ccbe9c2ba4 100644
--- a/src/components/button/button_group/_button_group_button.scss
+++ b/src/components/button/button_group/_button_group_button.scss
@@ -1,8 +1,37 @@
 .euiButtonGroupButton {
   // Remove transforms from all states
   transform: none !important;
+  animation: none !important;
+  // Also remove all individual styles that will be be applied to the group instead
+  // box-shadow: none !important;
+  border-radius: 0;
+  margin-left: -1px;
 
   &:focus-within {
+    text-decoration: underline;
+  }
+
+  // Only change the border color when enabled and selected
+  &:not(.euiButtonGroupButton--selected):not([class*='isDisabled']) {
+    border-color: $euiButtonToggleBorderColor;
+  }
+
+  &:not(.euiButtonGroupButton--selected) {
+    z-index: 0;
+  }
 
+  &:first-child {
+    border-top-left-radius: $euiBorderRadius;
+    border-bottom-left-radius: $euiBorderRadius;
+    margin-left: 0;
   }
+
+  &:last-child {
+    border-top-right-radius: $euiBorderRadius;
+    border-bottom-right-radius: $euiBorderRadius;
+  }
+}
+
+.euiButtonGroup__button--selected + .euiButtonGroup__button--selected {
+  box-shadow: -1px 0 0 transparentize($euiColorEmptyShade, .9);
 }
diff --git a/src/components/button/button_group/button_group_single_button.tsx b/src/components/button/button_group/button_group_single_button.tsx
index b9812bdca2c..f6883facfd1 100644
--- a/src/components/button/button_group/button_group_single_button.tsx
+++ b/src/components/button/button_group/button_group_single_button.tsx
@@ -58,10 +58,12 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
   return (
     <EuiButtonDisplay
       htmlFor={id}
-      element={isDisabled ? 'button' : 'label'} // Not sure if this is the best way to handle disabled labels from incurring clicks
+      // TODO: Not sure if this is the best way to handle disabled labels from incurring clicks
+      element={isDisabled ? 'button' : 'label'}
       className={buttonClasses}
       color={badColorCombo ? 'text' : color}
       fill={size !== 'compressed' && isSelectedState}
+      // TODO: Return to why both disabled types are needed
       isDisabled={isDisabled}
       disabled={isDisabled}
       size={size === 'compressed' ? 's' : size}
diff --git a/src/components/button/button_group/types.tsx b/src/components/button/button_group/types.tsx
index 3f002ec7d56..4475f53dda0 100644
--- a/src/components/button/button_group/types.tsx
+++ b/src/components/button/button_group/types.tsx
@@ -27,7 +27,6 @@ export type ButtonGroupOptionProps = {
   color: EuiButtonGroupProps['color'];
   size: EuiButtonGroupProps['buttonSize'];
   isIconOnly: EuiButtonGroupProps['isIconOnly'];
-  // isGroupDisabled: EuiButtonGroupProps['isDisabled'];
   onChange: EuiButtonGroupProps['onChange'];
 };
 

From f433aaafe979a2bc0d1e4265c3589d7d8db0b9fa Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 21 Aug 2020 15:10:53 -0400
Subject: [PATCH 10/34] Styles are working for sizes small & medium in EUI
 theme

---
 src/components/button/_button.scss            |    6 +-
 src/components/button/button.tsx              |   51 +-
 .../__snapshots__/button_group.test.tsx.snap  | 2034 +++++++----------
 .../button/button_group/_button_group.scss    |  140 +-
 .../button_group/_button_group_button.scss    |  138 +-
 .../button/button_group/button_group.tsx      |   12 +-
 .../button_group_multi_button.tsx             |   16 +-
 .../button_group_single_button.tsx            |    5 +-
 8 files changed, 976 insertions(+), 1426 deletions(-)

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 9bafed16bc3..cb49b326797 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -1,5 +1,5 @@
 // This file has lots of modifiers and is somewhat nesty by nature
-//sass-lint:disable nesting-depth
+// sass-lint:disable nesting-depth
 
 // Our base button
 .euiButton {
@@ -115,10 +115,6 @@
       &:focus-within {
         @include euiSlightShadowHover($shadowColor);
         background-color: transparentize($color, .9);
-
-        @if ($name == 'disabled') {
-          cursor: not-allowed;
-        }
       }
     }
   }
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index ae8a21d7e28..5c09e62c826 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -55,19 +55,19 @@ export type ButtonColor =
 
 export type ButtonSize = 's' | 'm';
 
-const colorToClassNameMap: { [color in ButtonColor]: string } = {
-  primary: 'euiButton--primary',
-  secondary: 'euiButton--secondary',
-  warning: 'euiButton--warning',
-  danger: 'euiButton--danger',
-  ghost: 'euiButton--ghost',
-  text: 'euiButton--text',
+export const colorToClassNameMap: { [color in ButtonColor]: string } = {
+  primary: '--primary',
+  secondary: '--secondary',
+  warning: '--warning',
+  danger: '--danger',
+  ghost: '--ghost',
+  text: '--text',
 };
 
 export const COLORS = keysOf(colorToClassNameMap);
 
-const sizeToClassNameMap: { [size in ButtonSize]: string | null } = {
-  s: 'euiButton--small',
+export const sizeToClassNameMap: { [size in ButtonSize]: string | null } = {
+  s: '--small',
   m: null,
 };
 
@@ -114,7 +114,14 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
 }
 
 export interface EuiButtonDisplayProps extends EuiButtonProps {
+  /**
+   * Provide a valid element to render the element as
+   */
   element: 'a' | 'button' | 'span' | 'label';
+  /**
+   * Provide the component's base class name to build the class list on
+   */
+  baseClassName: string;
 }
 
 /**
@@ -126,6 +133,8 @@ export interface EuiButtonDisplayProps extends EuiButtonProps {
 const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
   (
     {
+      element = 'button',
+      baseClassName,
       children,
       className,
       iconType,
@@ -138,7 +147,6 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
       contentProps,
       textProps,
       fullWidth,
-      element = 'button',
       minWidth,
       style,
       ...rest
@@ -146,17 +154,21 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
     ref
   ) => {
     const classes = classNames(
-      'euiButton',
-      color ? colorToClassNameMap[color] : null,
-      size ? sizeToClassNameMap[size] : null,
-      className,
-      {
-        'euiButton--fill': fill,
-        'euiButton--fullWidth': fullWidth,
-        'euiButton-isDisabled': isDisabled,
-      }
+      baseClassName,
+      color ? `${baseClassName}${colorToClassNameMap[color]}` : null,
+      size && sizeToClassNameMap[size]
+        ? `${baseClassName}${sizeToClassNameMap[size]}`
+        : null,
+      fill && `${baseClassName}--fill`,
+      fullWidth && `${baseClassName}--fullWidth`,
+      isDisabled && `${baseClassName}-isDisabled`,
+      className
     );
 
+    /**
+     * Not changing the content or text class names to match baseClassName yet,
+     * as it is a major breaking change.
+     */
     const contentClassNames = classNames(
       'euiButton__content',
       contentProps && contentProps.className
@@ -262,6 +274,7 @@ export const EuiButton: FunctionComponent<Props> = ({
   return (
     <EuiButtonDisplay
       element={element}
+      baseClassName="euiButton"
       ref={buttonRef}
       {...elementProps}
       {...relObj}
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 c895ae057d4..2139eb366ff 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
@@ -4,9 +4,15 @@ exports[`EuiButtonGroup is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
     aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--s testClass1 testClass2"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+    data-test-subj="test subject string"
   />
 </fieldset>
 `;
@@ -15,87 +21,73 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--compressed"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -104,87 +96,73 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--m"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroupnull euiButtonGroup--text testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -193,87 +171,73 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -282,87 +246,73 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--danger euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--danger euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--danger euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -371,87 +321,73 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--ghost euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--ghost euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--ghost euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -460,87 +396,73 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--primary euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--primary euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--primary euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -549,87 +471,73 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--secondary testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--secondary euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--secondary euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--secondary euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -638,87 +546,73 @@ exports[`EuiButtonGroup props color text is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -727,87 +621,73 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--warning euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--warning euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--warning euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -816,88 +696,74 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        checked=""
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButtonGroup__button--selected euiButton--fill"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            checked=""
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -906,93 +772,79 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonToggle--isDisabled euiButtonGroup__toggle"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        disabled=""
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButton-isDisabled"
-        disabled=""
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            disabled=""
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonToggle--isDisabled euiButtonGroup__toggle"
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        disabled=""
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButton-isDisabled"
-        disabled=""
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            disabled=""
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonToggle--isDisabled euiButtonGroup__toggle"
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        disabled=""
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButton-isDisabled"
-        disabled=""
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            disabled=""
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </button>
   </div>
 </fieldset>
 `;
@@ -1001,356 +853,148 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset euiButtonGroup__fieldset--fullWidth"
 >
-  <div
-    class="euiButtonGroup euiButtonGroup--s euiButtonGroup--fullWidth"
+  <legend
+    class="euiScreenReaderOnly"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-    >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          class="euiButtonContent euiButton__content"
-        >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
-        </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-    >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          class="euiButtonContent euiButton__content"
-        >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
-        </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-    >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          class="euiButtonContent euiButton__content"
-        >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
-<fieldset
-  class="euiButtonGroup__fieldset"
->
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
           />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
           />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
           />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props legend is rendered 1`] = `
+exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
   <legend
     class="euiScreenReaderOnly"
   >
-    legend
+    test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
-  >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-    >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          class="euiButtonContent euiButton__content"
-        >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
-        </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-    >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          class="euiButtonContent euiButton__content"
-        >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
-        </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-    >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          class="euiButtonContent euiButton__content"
-        >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
-        </span>
-      </button>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`EuiButtonGroup props name is rendered 1`] = `
-<fieldset
-  class="euiButtonGroup__fieldset"
->
-  <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button00"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        name="name"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text euiScreenReaderOnly"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        name="name"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text euiScreenReaderOnly"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        name="name"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text euiScreenReaderOnly"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -1359,125 +1003,73 @@ exports[`EuiButtonGroup props options are rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
-    >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          class="euiButtonContent euiButton__content"
-        >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
-        </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button00"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            type="radio"
+          />
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button01"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            type="radio"
+          />
+          Option two
         </span>
-      </button>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`EuiButtonGroup props options can pass down data-test-subj 1`] = `
-<fieldset
-  class="euiButtonGroup__fieldset"
->
-  <div
-    class="euiButtonGroup euiButtonGroup--s"
-  >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button02"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        data-test-subj="test"
-        title="Option one"
-        type="radio"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          <input
+            class="euiScreenReaderOnly"
+            id="button02"
+            type="radio"
+          />
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </label>
   </div>
 </fieldset>
 `;
@@ -1486,89 +1078,64 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <button
+      aria-pressed="true"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+      id="button00"
+      style="min-width:0"
     >
-      <input
-        aria-label="Option one"
-        checked=""
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="checkbox"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButtonGroup__button--selected euiButton--fill"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </button>
+    <button
+      aria-pressed="true"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+      id="button01"
+      style="min-width:0"
     >
-      <input
-        aria-label="Option two"
-        checked=""
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="checkbox"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButtonGroup__button--selected euiButton--fill"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </button>
+    <button
+      aria-pressed="false"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      id="button02"
+      style="min-width:0"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="checkbox"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </button>
   </div>
 </fieldset>
 `;
@@ -1577,87 +1144,64 @@ exports[`EuiButtonGroup props type of multi is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--s"
+    aria-label="aria-label"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+    data-test-subj="test subject string"
   >
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+    <button
+      aria-pressed="false"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      id="button00"
+      style="min-width:0"
     >
-      <input
-        aria-label="Option one"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option one"
-        type="checkbox"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button00"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option one
-          </span>
+          Option one
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </button>
+    <button
+      aria-pressed="false"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      id="button01"
+      style="min-width:0"
     >
-      <input
-        aria-label="Option two"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option two"
-        type="checkbox"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button01"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option two
-          </span>
+          Option two
         </span>
-      </button>
-    </div>
-    <div
-      class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+      </span>
+    </button>
+    <button
+      aria-pressed="false"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      id="button02"
+      style="min-width:0"
     >
-      <input
-        aria-label="Option three"
-        class="euiToggle__input euiButtonToggle__input"
-        title="Option three"
-        type="checkbox"
-      />
-      <button
-        class="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
-        id="button02"
-        tabindex="-1"
-        type="button"
+      <span
+        class="euiButtonContent euiButton__content"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButton__text"
         >
-          <span
-            class="euiButton__text"
-          >
-            Option three
-          </span>
+          Option three
         </span>
-      </button>
-    </div>
+      </span>
+    </button>
   </div>
 </fieldset>
 `;
diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index 2da820e407a..ada5bd93128 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -7,136 +7,26 @@
   }
 }
 
-.euiButtonGroup {
-  max-width: 100%;
-  display: flex;
-
-  // Non-compressed version only
-  &:not(.euiButtonGroup--compressed) {
-    .euiButtonGroup__button {
-    }
-  }
-}
-
-// .euiButtonGroup {
-//   &:not(.euiButtonGroup--compressed) {
-//     .euiButtonGroup__button {
-//       &:first-child {
-//         border-top-left-radius: $euiBorderRadius;
-//         border-bottom-left-radius: $euiBorderRadius;
-//       }
-
-//       &:last-child {
-//         border-top-right-radius: $euiBorderRadius;
-//         border-bottom-right-radius: $euiBorderRadius;
-//       }
-//     }
-
-//     .euiButtonGroup__button--selected + .euiButtonGroup__button--selected {
-//       box-shadow: -1px 0 0 transparentize($euiColorEmptyShade, .9);
-//     }
-//   }
-// }
-
-// @each $name, $color in $euiButtonTypes {
-//   .euiButtonGroup--#{$name}:not(.euiButtonGroup--compressed) {
-//     @if ($name == 'ghost') {
-//       // Ghost is unique and ALWAYS sits against a dark background.
-//       color: $color;
-//     } @else 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);
-//     }
-
-//     $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__input:focus + .euiButtonGroup__label {
-//       background-color: darken($color, 5%);
-//       border-color: darken($color, 5%);
-//       text-decoration: underline;
-//     }
-//   }
-// }
-
-// .euiButtonGroup__button {
-//   text-overflow: ellipsis;
-//   overflow: hidden;
-// }
-
-
-// .euiButtonGroup__input {
-//   @include euiScreenReaderOnly;
-// }
-
-// .euiButtonGroup--compressed,
 .euiButtonGroup--fullWidth {
+  width: 100%;
+
   .euiButtonGroupButton {
     flex: 1;
   }
 }
 
+.euiButtonGroup {
+  @include euiSlightShadow;
+  border-radius: $euiBorderRadius + 1px; // Simply for the box-shadow
 
-// @include euiBreakpoint('xs', 's') {
-//   .euiButtonGroup__fieldset {
-//     display: block;
-//   }
-
-//   .euiButtonGroup__button {
-//     flex: 1;
-//     min-width: 0;
-//   }
-// }
-
-// .euiButtonGroup--compressed {
-//   border: 1px solid $euiFormBorderColor;
-//   border-radius: $euiFormControlCompressedBorderRadius;
-//   background-color: $euiFormBackgroundColor;
-
-//   .euiButtonGroup__button {
-//     border: none;
-//     background: none;
-//     border-radius: $euiBorderRadius;
-//     font-size: $euiFontSizeS;
-//     height: $euiFormControlCompressedHeight - 2px;
-//     box-shadow: none;
-//     min-width: 0;
-//     // Offset the background color from the border by 2px
-//     // by clipping background to before the padding starts
-//     padding: 2px;
-//     background-clip: content-box;
-
-//     &:not(.euiButtonGroup__button--selected):not(.euiButton--disabled) {
-//       color: $euiColorDarkShade;
-//     }
-
-//     &:hover,
-//     &:focus {
-//       box-shadow: none;
-//     }
-
-//     &:focus {
-//       outline: 2px solid $euiFocusRingColor;
-//     }
-//   }
-
-//   .euiButtonGroup__button--selected {
-//     font-weight: $euiFontWeightSemiBold;
-//     background-color: $euiFormInputGroupLabelBackground;
-//   }
+  text-decoration: none;
+  max-width: 100%;
+  display: flex;
+  overflow: hidden;
+  transition: all $euiAnimSpeedNormal ease-in-out;
 
-//   // .euiButton__content {
-//   //   padding-left: $euiSizeS;
-//   //   padding-right: $euiSizeS;
-//   // }
-// }
+  &:hover,
+  &:active {
+    @include euiSlightShadowHover;
+  }
+}
diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss
index 4ccbe9c2ba4..edce7d095e9 100644
--- a/src/components/button/button_group/_button_group_button.scss
+++ b/src/components/button/button_group/_button_group_button.scss
@@ -1,37 +1,135 @@
 .euiButtonGroupButton {
-  // Remove transforms from all states
-  transform: none !important;
-  animation: none !important;
-  // Also remove all individual styles that will be be applied to the group instead
-  // box-shadow: none !important;
-  border-radius: 0;
-  margin-left: -1px;
+  @include euiButtonBase;
+  @include euiFont;
+  @include euiFontSize;
 
-  &:focus-within {
-    text-decoration: underline;
+  border: $euiBorderThin;
+  transition: all $euiAnimSpeedNormal ease-in-out;
+
+  .euiButton__content {
+    padding: 0 ($euiSize - $euiSizeXS);
   }
 
-  // Only change the border color when enabled and selected
-  &:not(.euiButtonGroupButton--selected):not([class*='isDisabled']) {
-    border-color: $euiButtonToggleBorderColor;
+  .euiButton__text {
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
-  &:not(.euiButtonGroupButton--selected) {
-    z-index: 0;
+  &:not(:first-child) {
+    margin-left: -1px;
   }
 
   &:first-child {
-    border-top-left-radius: $euiBorderRadius;
-    border-bottom-left-radius: $euiBorderRadius;
-    margin-left: 0;
+    border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
   }
 
   &:last-child {
-    border-top-right-radius: $euiBorderRadius;
-    border-bottom-right-radius: $euiBorderRadius;
+    border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
+  }
+
+  &.euiButtonGroupButton--small {
+    height: $euiButtonHeightSmall;
+    line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off
+  }
+
+  &.euiButtonGroupButton--compressed {
+    height: $euiFormControlCompressedHeight;
+    line-height: $euiFormControlCompressedHeight; // prevents descenders from getting cut off
+  }
+
+  &:not([class*='isDisabled']) {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      background-color: transparentize($euiColorPrimary, .9);
+      text-decoration: underline;
+    }
+  }
+
+  &.euiButtonGroupButton-isDisabled {
+    @include euiButtonContentDisabled;
+    color: $euiButtonColorDisabledText;
+
+    &.euiButtonGroupButton-isSelected {
+      // Only increase the contrast of background color to text to 2.0 for disabled
+      color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
+      background-color: $euiButtonColorDisabled;
+      border-color: $euiButtonColorDisabled;
+
+      &:hover,
+      &:focus,
+      &:focus-within {
+        background-color: $euiButtonColorDisabled;
+        border-color: $euiButtonColorDisabled;
+      }
+    }
+  }
+}
+
+// Create button modifiers based upon the map.
+// sass-lint:disable nesting-depth
+@each $name, $color in $euiButtonTypes {
+  .euiButtonGroupButton--#{$name} {
+    @if ($name == 'ghost') {
+      // Ghost is unique and ALWAYS sits against a dark background.
+      color: $color;
+    } @else 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);
+    }
+
+    &.euiButtonGroupButton-isSelected {
+      background-color: $color;
+      border-color: $color;
+
+      // The function makes that hexes safe for theming
+      $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
+
+      color: $fillTextColor;
+
+      &:not([class*='isDisabled']) {
+        &:hover,
+        &:focus,
+        &:focus-within {
+          background-color: darken($color, 5%);
+          border-color: darken($color, 5%);
+        }
+      }
+    }
+
+    &:not([class*='isDisabled']) {
+      &:hover,
+      &:focus,
+      &:focus-within {
+        background-color: transparentize($color, .9);
+      }
+    }
+  }
+}
+
+// Fix ghost/disabled look specifically
+.euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost {
+  &,
+  &:hover,
+  &:focus,
+  &:focus-within {
+    color: $euiButtonColorGhostDisabled;
+    border-color: $euiButtonColorGhostDisabled;
   }
+
+  &.euiButtonGroupButton-isSelected {
+    background-color: $euiButtonColorGhostDisabled;
+    color: makeHighContrastColor($euiButtonColorGhostDisabled, $euiButtonColorGhostDisabled, 2);
+  }
+}
+
+.euiButtonGroupButton-isSelected {
+  z-index: 0;
 }
 
-.euiButtonGroup__button--selected + .euiButtonGroup__button--selected {
+.euiButtonGroupButton-isSelected + .euiButtonGroupButton-isSelected {
   box-shadow: -1px 0 0 transparentize($euiColorEmptyShade, .9);
 }
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index cfc98ef7472..b4254607e14 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -23,10 +23,16 @@ import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroupMultiButton } from './button_group_multi_button';
 import { EuiButtonGroupSingleButton } from './button_group_single_button';
 import { EuiButtonGroupProps } from './types';
+import { colorToClassNameMap, sizeToClassNameMap } from '../button';
 
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
   EuiButtonGroupProps;
 
+const groupSizeToClassNameMap = {
+  ...sizeToClassNameMap,
+  compressed: '--compressed',
+};
+
 export const EuiButtonGroup: FunctionComponent<Props> = ({
   className,
   buttonSize = 's',
@@ -53,11 +59,11 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
 
   const classes = classNames(
     'euiButtonGroup',
-    `euiButtonGroup--${resolvedColor}`,
+    `euiButtonGroup${groupSizeToClassNameMap[buttonSize]}`,
+    `euiButtonGroup${colorToClassNameMap[resolvedColor]}`,
     {
       'euiButtonGroup--fullWidth': isFullWidth,
-      'euiButtonGroup--compressed': buttonSize === 'compressed',
-      'euiButtonGroup--disabled': isDisabled,
+      'euiButtonGroup--isDisabled': isDisabled,
     },
     className
   );
diff --git a/src/components/button/button_group/button_group_multi_button.tsx b/src/components/button/button_group/button_group_multi_button.tsx
index e2704aad4a1..d9a0cac14de 100644
--- a/src/components/button/button_group/button_group_multi_button.tsx
+++ b/src/components/button/button_group/button_group_multi_button.tsx
@@ -19,7 +19,7 @@
 
 import classNames from 'classnames';
 import React, { FunctionComponent } from 'react';
-import { EuiButton } from '../button';
+import { EuiButtonDisplay } from '../button';
 import {
   ButtonGroupOptionProps,
   EuiButtonMultiGroupOptionProps,
@@ -39,23 +39,27 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
   color,
   isIconOnly,
   onChange,
+  isDisabled,
   ...rest
 }) => {
   const isSelectedState = idToSelectedMap[id] || false;
   const badColorCombo = size === 'compressed' && color === 'ghost';
 
   const buttonClasses = classNames(
-    'euiButtonGroupButton',
     {
-      'euiButtonGroupButton--selected': isSelectedState,
+      'euiButtonGroupButton-isSelected': isSelectedState,
     },
     className
   );
 
   return (
-    <EuiButton
-      className={buttonClasses}
+    <EuiButtonDisplay
+      baseClassName="euiButtonGroupButton"
+      element={'button'}
       id={id}
+      className={buttonClasses}
+      disabled={isDisabled}
+      isDisabled={isDisabled}
       color={badColorCombo ? 'text' : color}
       fill={size !== 'compressed' && isSelectedState}
       aria-pressed={isSelectedState}
@@ -67,6 +71,6 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
       }}
       {...rest}>
       {label}
-    </EuiButton>
+    </EuiButtonDisplay>
   );
 };
diff --git a/src/components/button/button_group/button_group_single_button.tsx b/src/components/button/button_group/button_group_single_button.tsx
index f6883facfd1..a8ae7d48885 100644
--- a/src/components/button/button_group/button_group_single_button.tsx
+++ b/src/components/button/button_group/button_group_single_button.tsx
@@ -48,15 +48,15 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
   const badColorCombo = size === 'compressed' && color === 'ghost';
 
   const buttonClasses = classNames(
-    'euiButtonGroupButton',
     {
-      'euiButtonGroupButton--selected': isSelectedState,
+      'euiButtonGroupButton-isSelected': isSelectedState,
     },
     className
   );
 
   return (
     <EuiButtonDisplay
+      baseClassName="euiButtonGroupButton"
       htmlFor={id}
       // TODO: Not sure if this is the best way to handle disabled labels from incurring clicks
       element={isDisabled ? 'button' : 'label'}
@@ -71,7 +71,6 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
       textProps={{
         className: isIconOnly ? 'euiScreenReaderOnly' : undefined,
       }}
-      minWidth={0}
       {...rest}>
       <input
         id={id}

From 9ca2a35f76140c51eb4e2030f86c57e91d54df69 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 21 Aug 2020 16:42:30 -0400
Subject: [PATCH 11/34] Fix flex and ghost

---
 src-docs/src/views/button/button_group.js     | 28 +++++++++----------
 .../button/button_group/_button_group.scss    | 10 ++++---
 .../button_group/_button_group_button.scss    |  8 ++++++
 .../button_group_multi_button.tsx             |  1 -
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index 15faf32510f..d683f66e4ad 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -140,15 +140,15 @@ export default () => {
     `${idPrefix2}4`
   );
 
-  const onChange = (optionId) => {
+  const onChange = optionId => {
     setToggleIdSelected(optionId);
   };
 
-  const onChangeDisabled = (optionId) => {
+  const onChangeDisabled = optionId => {
     setToggleIdDisabled(optionId);
   };
 
-  const onChangeMulti = (optionId) => {
+  const onChangeMulti = optionId => {
     const newToggleIdToSelectedMap = {
       ...toggleIdToSelectedMap,
       ...{
@@ -158,15 +158,15 @@ export default () => {
     setToggleIdToSelectedMap(newToggleIdToSelectedMap);
   };
 
-  const onChangeIcons = (optionId) => {
+  const onChangeIcons = optionId => {
     setToggleIconIdSelected(optionId);
   };
 
-  const onChangeCompressed = (optionId) => {
+  const onChangeCompressed = optionId => {
     setToggleCompressedIdSelected(optionId);
   };
 
-  const onChangeIconsMulti = (optionId) => {
+  const onChangeIconsMulti = optionId => {
     const newToggleIconIdToSelectedMap = {
       ...toggleIconIdToSelectedMap,
       ...{
@@ -177,7 +177,7 @@ export default () => {
     setToggleIconIdToSelectedMap(newToggleIconIdToSelectedMap);
   };
 
-  const onChangeIconsMultiIcons = (optionId) => {
+  const onChangeIconsMultiIcons = optionId => {
     const newToggleIconIdToSelectedMapIcon = {
       ...toggleIconIdToSelectedMapIcon,
       ...{
@@ -195,7 +195,7 @@ export default () => {
         name="basic"
         options={toggleButtons}
         idSelected={toggleIdSelected}
-        onChange={(id) => onChange(id)}
+        onChange={id => onChange(id)}
       />
       <EuiSpacer size="m" />
       <EuiTitle size="xxs">
@@ -207,7 +207,7 @@ export default () => {
         name="primary"
         options={toggleButtonsMulti}
         idToSelectedMap={toggleIdToSelectedMap}
-        onChange={(id) => onChangeMulti(id)}
+        onChange={id => onChangeMulti(id)}
         color="primary"
         type="multi"
       />
@@ -221,7 +221,7 @@ export default () => {
         name="disabledGroup"
         options={toggleButtonsDisabled}
         idSelected={toggleIdDisabled}
-        onChange={(id) => onChangeDisabled(id)}
+        onChange={id => onChangeDisabled(id)}
         buttonSize="m"
         isDisabled
         isFullWidth
@@ -236,7 +236,7 @@ export default () => {
         name="textAlign"
         options={toggleButtonsIcons}
         idSelected={toggleIconIdSelected}
-        onChange={(id) => onChangeIcons(id)}
+        onChange={id => onChangeIcons(id)}
         isIconOnly
       />
       &nbsp;&nbsp;
@@ -245,7 +245,7 @@ export default () => {
         name="Text style"
         options={toggleButtonsIconsMulti}
         idToSelectedMap={toggleIconIdToSelectedMap}
-        onChange={(id) => onChangeIconsMulti(id)}
+        onChange={id => onChangeIconsMulti(id)}
         type="multi"
         isIconOnly
       />
@@ -263,7 +263,7 @@ export default () => {
           legend="This is a basic group"
           options={toggleButtonsCompressed}
           idSelected={toggleCompressedIdSelected}
-          onChange={(id) => onChangeCompressed(id)}
+          onChange={id => onChangeCompressed(id)}
           buttonSize="compressed"
           isFullWidth
         />
@@ -278,7 +278,7 @@ export default () => {
           className="eui-displayInlineBlock"
           options={toggleButtonsIconsMulti}
           idToSelectedMap={toggleIconIdToSelectedMapIcon}
-          onChange={(id) => onChangeIconsMultiIcons(id)}
+          onChange={id => onChangeIconsMultiIcons(id)}
           type="multi"
           buttonSize="compressed"
           isIconOnly
diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index ada5bd93128..d38fe021a86 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -19,14 +19,16 @@
   @include euiSlightShadow;
   border-radius: $euiBorderRadius + 1px; // Simply for the box-shadow
 
-  text-decoration: none;
   max-width: 100%;
   display: flex;
   overflow: hidden;
   transition: all $euiAnimSpeedNormal ease-in-out;
 
-  &:hover,
-  &:active {
-    @include euiSlightShadowHover;
+  &:not(.euiButtonGroup--isDisabled) {
+    &:hover,
+    &:active,
+    &:focus-within {
+      @include euiSlightShadowHover;
+    }
   }
 }
diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss
index edce7d095e9..e0040e37409 100644
--- a/src/components/button/button_group/_button_group_button.scss
+++ b/src/components/button/button_group/_button_group_button.scss
@@ -6,6 +6,11 @@
   border: $euiBorderThin;
   transition: all $euiAnimSpeedNormal ease-in-out;
 
+  // Allow button to shrink and truncate
+  min-width: 0;
+  flex-shrink: 1;
+  flex-grow: 0;
+
   .euiButton__content {
     padding: 0 ($euiSize - $euiSizeXS);
   }
@@ -117,6 +122,9 @@
   &:focus,
   &:focus-within {
     color: $euiButtonColorGhostDisabled;
+  }
+
+  .euiButtonGroup--isDisabled & {
     border-color: $euiButtonColorGhostDisabled;
   }
 
diff --git a/src/components/button/button_group/button_group_multi_button.tsx b/src/components/button/button_group/button_group_multi_button.tsx
index d9a0cac14de..5c396dac465 100644
--- a/src/components/button/button_group/button_group_multi_button.tsx
+++ b/src/components/button/button_group/button_group_multi_button.tsx
@@ -65,7 +65,6 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
       aria-pressed={isSelectedState}
       size={size === 'compressed' ? 's' : size}
       onClick={() => onChange(id)}
-      minWidth={0}
       textProps={{
         className: isIconOnly ? 'euiScreenReaderOnly' : undefined,
       }}

From 2305f81668b6028671a7930eab32934e37cf3a6f Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Sat, 22 Aug 2020 09:12:37 -0400
Subject: [PATCH 12/34] Finish up styles for EUI theme

---
 .../button/button_group/_button_group.scss    |   9 +
 .../button_group/_button_group_button.scss    | 191 ++++++++++++------
 .../button/button_group/button_group.tsx      |   9 +-
 .../button_group_multi_button.tsx             |  16 +-
 .../button_group_single_button.tsx            |  16 +-
 5 files changed, 155 insertions(+), 86 deletions(-)

diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index d38fe021a86..0cbec257bca 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -31,4 +31,13 @@
       @include euiSlightShadowHover;
     }
   }
+
+  &--compressed {
+    box-shadow: none !important; // sass-lint:disable-line no-important
+    border-radius: $euiFormControlCompressedBorderRadius;
+    background-color: $euiFormBackgroundColor;
+    height: $euiFormControlCompressedHeight;
+    border: 1px solid $euiFormBorderColor;
+    overflow: visible;
+}
 }
diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss
index e0040e37409..7fb5ada3442 100644
--- a/src/components/button/button_group/_button_group_button.scss
+++ b/src/components/button/button_group/_button_group_button.scss
@@ -3,8 +3,9 @@
   @include euiFont;
   @include euiFontSize;
 
-  border: $euiBorderThin;
-  transition: all $euiAnimSpeedNormal ease-in-out;
+  transition: background-color $euiAnimSpeedNormal ease-in-out,
+              border-color $euiAnimSpeedNormal ease-in-out,
+              color $euiAnimSpeedNormal ease-in-out;
 
   // Allow button to shrink and truncate
   min-width: 0;
@@ -12,7 +13,11 @@
   flex-grow: 0;
 
   .euiButton__content {
-    padding: 0 ($euiSize - $euiSizeXS);
+    padding: 0 $euiSizeM;
+  }
+
+  &-isIconOnly .euiButton__content {
+    padding: 0 $euiSizeS;
   }
 
   .euiButton__text {
@@ -20,28 +25,11 @@
     overflow: hidden;
   }
 
-  &:not(:first-child) {
-    margin-left: -1px;
-  }
-
-  &:first-child {
-    border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
-  }
-
-  &:last-child {
-    border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
-  }
-
   &.euiButtonGroupButton--small {
     height: $euiButtonHeightSmall;
     line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off
   }
 
-  &.euiButtonGroupButton--compressed {
-    height: $euiFormControlCompressedHeight;
-    line-height: $euiFormControlCompressedHeight; // prevents descenders from getting cut off
-  }
-
   &:not([class*='isDisabled']) {
     &:hover,
     &:focus,
@@ -58,6 +46,35 @@
     &.euiButtonGroupButton-isSelected {
       // Only increase the contrast of background color to text to 2.0 for disabled
       color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
+    }
+  }
+}
+
+/**
+ * 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;
 
@@ -69,33 +86,29 @@
       }
     }
   }
-}
 
-// Create button modifiers based upon the map.
-// sass-lint:disable nesting-depth
-@each $name, $color in $euiButtonTypes {
-  .euiButtonGroupButton--#{$name} {
-    @if ($name == 'ghost') {
-      // Ghost is unique and ALWAYS sits against a dark background.
-      color: $color;
-    } @else 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);
-    }
+  @each $name, $color in $euiButtonTypes {
+    .euiButtonGroupButton--#{$name}:not([class*='isDisabled']) {
+      @if ($name == 'ghost') {
+        // Ghost is unique and ALWAYS sits against a dark background.
+        color: $color;
+      } @else 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);
+      }
 
-    &.euiButtonGroupButton-isSelected {
-      background-color: $color;
-      border-color: $color;
+      &.euiButtonGroupButton-isSelected {
+        background-color: $color;
+        border-color: $color;
 
-      // The function makes that hexes safe for theming
-      $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
+        // The function makes that hexes safe for theming
+        $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
 
-      color: $fillTextColor;
+        color: $fillTextColor;
 
-      &:not([class*='isDisabled']) {
         &:hover,
         &:focus,
         &:focus-within {
@@ -103,9 +116,7 @@
           border-color: darken($color, 5%);
         }
       }
-    }
 
-    &:not([class*='isDisabled']) {
       &:hover,
       &:focus,
       &:focus-within {
@@ -113,31 +124,87 @@
       }
     }
   }
-}
 
-// Fix ghost/disabled look specifically
-.euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost {
-  &,
-  &:hover,
-  &:focus,
-  &:focus-within {
-    color: $euiButtonColorGhostDisabled;
+  // Fix ghost/disabled look specifically
+  .euiButtonGroupButton.euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost {
+    &,
+    &:hover,
+    &:focus,
+    &:focus-within {
+      color: $euiButtonColorGhostDisabled;
+    }
+
+    .euiButtonGroup--isDisabled & {
+      border-color: $euiButtonColorGhostDisabled;
+    }
+
+    &.euiButtonGroupButton-isSelected {
+      background-color: $euiButtonColorGhostDisabled;
+      color: makeHighContrastColor($euiButtonColorGhostDisabled, $euiButtonColorGhostDisabled, 2);
+    }
   }
 
-  .euiButtonGroup--isDisabled & {
-    border-color: $euiButtonColorGhostDisabled;
+  .euiButtonGroupButton-isSelected {
+    z-index: 0;
   }
 
-  &.euiButtonGroupButton-isSelected {
-    background-color: $euiButtonColorGhostDisabled;
-    color: makeHighContrastColor($euiButtonColorGhostDisabled, $euiButtonColorGhostDisabled, 2);
+  .euiButtonGroupButton-isSelected + .euiButtonGroupButton-isSelected {
+    box-shadow: -1px 0 0 transparentize($euiColorEmptyShade, .9);
   }
 }
 
-.euiButtonGroupButton-isSelected {
-  z-index: 0;
-}
+/**
+ * Compressed (form style)
+ */
+
+.euiButtonGroup--compressed {
+  .euiButtonGroupButton {
+    height: $euiFormControlCompressedHeight - 2px;
+    line-height: $euiFormControlCompressedHeight - 2px; // prevents descenders from getting cut off
+    font-size: $euiFontSizeS;
+    border-radius: $euiBorderRadius;
+    // Offset the background color from the border by 2px
+    // by clipping background to before the padding starts
+    padding: 2px;
+    background-clip: content-box;
+
+    .euiButton__content {
+      padding-left: $euiSizeS;
+      padding-right: $euiSizeS;
+    }
+
+    &.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;
+      }
+    }
+  }
 
-.euiButtonGroupButton-isSelected + .euiButtonGroupButton-isSelected {
-  box-shadow: -1px 0 0 transparentize($euiColorEmptyShade, .9);
+  @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);
+        }
+      }
+    }
+  }
 }
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index b4254607e14..b861033716a 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -23,13 +23,14 @@ import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroupMultiButton } from './button_group_multi_button';
 import { EuiButtonGroupSingleButton } from './button_group_single_button';
 import { EuiButtonGroupProps } from './types';
-import { colorToClassNameMap, sizeToClassNameMap } from '../button';
+import { colorToClassNameMap } from '../button';
 
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
   EuiButtonGroupProps;
 
 const groupSizeToClassNameMap = {
-  ...sizeToClassNameMap,
+  s: '--small',
+  m: '--medium',
   compressed: '--compressed',
 };
 
@@ -85,7 +86,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
               <EuiButtonGroupSingleButton
                 key={index}
                 {...option}
-                idSelected={idSelected}
+                isSelected={option.id === idSelected}
                 size={buttonSize}
                 isIconOnly={isIconOnly}
                 isDisabled={isDisabled || option.isDisabled}
@@ -99,7 +100,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
             <EuiButtonGroupMultiButton
               key={index}
               {...option}
-              idToSelectedMap={idToSelectedMap}
+              isSelected={idToSelectedMap[option.id]}
               color={resolvedColor}
               size={buttonSize}
               isIconOnly={isIconOnly}
diff --git a/src/components/button/button_group/button_group_multi_button.tsx b/src/components/button/button_group/button_group_multi_button.tsx
index 5c396dac465..ba7ba644b33 100644
--- a/src/components/button/button_group/button_group_multi_button.tsx
+++ b/src/components/button/button_group/button_group_multi_button.tsx
@@ -26,7 +26,7 @@ import {
 } from './types';
 
 type Props = {
-  idToSelectedMap: { [id: string]: boolean };
+  isSelected: boolean;
 } & ButtonGroupOptionProps &
   EuiButtonMultiGroupOptionProps;
 
@@ -34,20 +34,17 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
   className,
   id,
   label,
-  idToSelectedMap,
+  isSelected,
   size,
-  color,
   isIconOnly,
   onChange,
   isDisabled,
   ...rest
 }) => {
-  const isSelectedState = idToSelectedMap[id] || false;
-  const badColorCombo = size === 'compressed' && color === 'ghost';
-
   const buttonClasses = classNames(
     {
-      'euiButtonGroupButton-isSelected': isSelectedState,
+      'euiButtonGroupButton-isSelected': isSelected,
+      'euiButtonGroupButton-isIconOnly': isIconOnly,
     },
     className
   );
@@ -60,9 +57,8 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
       className={buttonClasses}
       disabled={isDisabled}
       isDisabled={isDisabled}
-      color={badColorCombo ? 'text' : color}
-      fill={size !== 'compressed' && isSelectedState}
-      aria-pressed={isSelectedState}
+      fill={size !== 'compressed' && isSelected}
+      aria-pressed={isSelected}
       size={size === 'compressed' ? 's' : size}
       onClick={() => onChange(id)}
       textProps={{
diff --git a/src/components/button/button_group/button_group_single_button.tsx b/src/components/button/button_group/button_group_single_button.tsx
index a8ae7d48885..7f25bc4e17f 100644
--- a/src/components/button/button_group/button_group_single_button.tsx
+++ b/src/components/button/button_group/button_group_single_button.tsx
@@ -26,7 +26,7 @@ import {
 import { EuiButtonDisplay } from '../button';
 
 type Props = {
-  idSelected: string;
+  isSelected: boolean;
 } & ButtonGroupOptionProps &
   EuiButtonSingleGroupOptionProps;
 
@@ -36,20 +36,17 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
   label,
   isDisabled,
   className,
-  idSelected,
+  isSelected,
   isIconOnly,
   size,
   name,
-  color,
   onChange,
   ...rest
 }) => {
-  const isSelectedState = id === idSelected;
-  const badColorCombo = size === 'compressed' && color === 'ghost';
-
   const buttonClasses = classNames(
     {
-      'euiButtonGroupButton-isSelected': isSelectedState,
+      'euiButtonGroupButton-isSelected': isSelected,
+      'euiButtonGroupButton-isIconOnly': isIconOnly,
     },
     className
   );
@@ -61,8 +58,7 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
       // TODO: Not sure if this is the best way to handle disabled labels from incurring clicks
       element={isDisabled ? 'button' : 'label'}
       className={buttonClasses}
-      color={badColorCombo ? 'text' : color}
-      fill={size !== 'compressed' && isSelectedState}
+      fill={size !== 'compressed' && isSelected}
       // TODO: Return to why both disabled types are needed
       isDisabled={isDisabled}
       disabled={isDisabled}
@@ -76,7 +72,7 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
         id={id}
         className="euiScreenReaderOnly"
         name={name}
-        checked={isSelectedState}
+        checked={isSelected}
         disabled={isDisabled}
         value={value}
         type="radio"

From 38dcaee055704e0f9ac59c323b382928c2098288 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Sat, 22 Aug 2020 09:50:00 -0400
Subject: [PATCH 13/34] Fixed Amsterdam styles

---
 .../button/button_group/_button_group.scss    |  2 +-
 .../button_group/_button_group_button.scss    |  1 +
 .../overrides/_button_group.scss              | 48 +++++++++++++++----
 3 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index 0cbec257bca..4e83e3295f8 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -39,5 +39,5 @@
     height: $euiFormControlCompressedHeight;
     border: 1px solid $euiFormBorderColor;
     overflow: visible;
-}
+  }
 }
diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss
index 7fb5ada3442..8c3c45ca8fe 100644
--- a/src/components/button/button_group/_button_group_button.scss
+++ b/src/components/button/button_group/_button_group_button.scss
@@ -3,6 +3,7 @@
   @include euiFont;
   @include euiFontSize;
 
+  // sass-lint:disable-block indentation
   transition: background-color $euiAnimSpeedNormal ease-in-out,
               border-color $euiAnimSpeedNormal ease-in-out,
               color $euiAnimSpeedNormal ease-in-out;
diff --git a/src/themes/eui-amsterdam/overrides/_button_group.scss b/src/themes/eui-amsterdam/overrides/_button_group.scss
index 7c1ae611abe..667c1494bed 100644
--- a/src/themes/eui-amsterdam/overrides/_button_group.scss
+++ b/src/themes/eui-amsterdam/overrides/_button_group.scss
@@ -1,14 +1,44 @@
-.euiButtonGroup--compressed {
-  .euiButtonGroup__button {
-    &:not(.euiButtonGroup__button--selected):not(:disabled) {
-      background-color: transparentize($euiColorLightShade, .6);
+.euiButtonGroup {
+  box-shadow: none !important; // sass-lint:disable-line no-important
+}
+
+.euiButtonGroup--medium,
+.euiButtonGroup--small {
+  .euiButtonGroupButton {
+    border: none !important; // sass-lint:disable-line no-important
+  }
+
+  .euiButtonGroupButton-isDisabled:not(.euiButtonGroupButton--ghost):not(.euiButtonGroupButton-isSelected) {
+    $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 70%);
+    background-color: transparentize($euiButtonColorDisabled, .7);
+    color: makeHighContrastColor($euiButtonColorDisabled, $backgroundColorSimulated, 2);
+  }
+
+  // Change the hollow (bordered) buttons to have a transparent background
+  // and no border
+  @each $name, $color in $euiButtonTypes {
+    .euiButtonGroupButton--#{$name} {
+      @include euiButtonDefaultStyle($color);
+
+      @if ($name == 'ghost') {
+        // Ghost is unique and ALWAYS sits against a dark background.
+        $backgroundColorSimulated: mix($euiColorInk, $color, 70%);
+        color: makeHighContrastColor($color, $backgroundColorSimulated);
+      }
     }
   }
 
-  .euiButtonToggle__input:enabled:hover + .euiButtonGroup__button,
-  .euiButtonToggle__input:enabled:focus + .euiButtonGroup__button,
-  .euiButtonGroup__button--selected {
-    background-color: $euiColorDarkShade;
-    color: $euiColorLightestShade;
+  .euiButtonGroupButton-isDisabled.euiButtonGroupButton--ghost:not(.euiButtonGroupButton-isSelected) {
+    &,
+    &:hover,
+    &:focus {
+      background-color: transparentize($euiButtonColorGhostDisabled, .7);
+    }
   }
 }
+
+.euiButtonGroup--small {
+  // Use a moderately smaller radius on small buttons
+  // so that they don't appear completely rounded
+  border-radius: $euiBorderRadius * .667;
+}

From 812e5da6b54a1131bad78d2222c9d3de153dad2c Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 24 Aug 2020 17:06:48 -0400
Subject: [PATCH 14/34] Fixing disabled states

---
 src-docs/src/views/button/button_group.js       |  3 ---
 src/components/button/button.tsx                |  5 ++++-
 .../button/button_group/button_group.tsx        | 12 +++++++++---
 .../button_group/button_group_multi_button.tsx  |  7 +++----
 .../button_group/button_group_single_button.tsx | 17 +++++++++++------
 src/components/button/button_group/types.tsx    | 10 ++++++----
 6 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index d683f66e4ad..0f1337433d7 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -204,7 +204,6 @@ export default () => {
       <EuiSpacer size="s" />
       <EuiButtonGroup
         legend="This is a primary group"
-        name="primary"
         options={toggleButtonsMulti}
         idToSelectedMap={toggleIdToSelectedMap}
         onChange={id => onChangeMulti(id)}
@@ -242,7 +241,6 @@ export default () => {
       &nbsp;&nbsp;
       <EuiButtonGroup
         legend="Text style"
-        name="Text style"
         options={toggleButtonsIconsMulti}
         idToSelectedMap={toggleIconIdToSelectedMap}
         onChange={id => onChangeIconsMulti(id)}
@@ -273,7 +271,6 @@ export default () => {
         </EuiTitle>
         <EuiSpacer size="s" />
         <EuiButtonGroup
-          name="textStyleCompressed"
           legend="Text style"
           className="eui-displayInlineBlock"
           options={toggleButtonsIconsMulti}
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 5c09e62c826..399a05a64a6 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -153,6 +153,8 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
     },
     ref
   ) => {
+    const buttonIsDisabled = isLoading || isDisabled;
+
     const classes = classNames(
       baseClassName,
       color ? `${baseClassName}${colorToClassNameMap[color]}` : null,
@@ -161,7 +163,7 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
         : null,
       fill && `${baseClassName}--fill`,
       fullWidth && `${baseClassName}--fullWidth`,
-      isDisabled && `${baseClassName}-isDisabled`,
+      buttonIsDisabled && `${baseClassName}-isDisabled`,
       className
     );
 
@@ -205,6 +207,7 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
       {
         className: classes,
         style: calculatedStyle,
+        disabled: element === 'button' && buttonIsDisabled,
         ref,
         ...rest,
       },
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index b861033716a..6cafe1052ab 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -22,7 +22,11 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroupMultiButton } from './button_group_multi_button';
 import { EuiButtonGroupSingleButton } from './button_group_single_button';
-import { EuiButtonGroupProps } from './types';
+import {
+  EuiButtonGroupProps,
+  EuiButtonSingleGroupOptionProps,
+  EuiButtonMultiGroupOptionProps,
+} from './types';
 import { colorToClassNameMap } from '../button';
 
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
@@ -44,6 +48,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
   isFullWidth = false,
   isIconOnly = false,
   legend,
+  name,
   onChange,
   options = [],
   type = 'single',
@@ -85,13 +90,14 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
             return (
               <EuiButtonGroupSingleButton
                 key={index}
-                {...option}
+                {...(option as EuiButtonSingleGroupOptionProps)}
                 isSelected={option.id === idSelected}
                 size={buttonSize}
                 isIconOnly={isIconOnly}
                 isDisabled={isDisabled || option.isDisabled}
                 color={resolvedColor}
                 onChange={onChange}
+                name={name}
               />
             );
           }
@@ -99,7 +105,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
           return (
             <EuiButtonGroupMultiButton
               key={index}
-              {...option}
+              {...(option as EuiButtonMultiGroupOptionProps)}
               isSelected={idToSelectedMap[option.id]}
               color={resolvedColor}
               size={buttonSize}
diff --git a/src/components/button/button_group/button_group_multi_button.tsx b/src/components/button/button_group/button_group_multi_button.tsx
index ba7ba644b33..c144e596d45 100644
--- a/src/components/button/button_group/button_group_multi_button.tsx
+++ b/src/components/button/button_group/button_group_multi_button.tsx
@@ -26,7 +26,7 @@ import {
 } from './types';
 
 type Props = {
-  isSelected: boolean;
+  isSelected?: boolean;
 } & ButtonGroupOptionProps &
   EuiButtonMultiGroupOptionProps;
 
@@ -51,11 +51,10 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
 
   return (
     <EuiButtonDisplay
-      baseClassName="euiButtonGroupButton"
-      element={'button'}
       id={id}
+      element={'button'}
+      baseClassName="euiButtonGroupButton"
       className={buttonClasses}
-      disabled={isDisabled}
       isDisabled={isDisabled}
       fill={size !== 'compressed' && isSelected}
       aria-pressed={isSelected}
diff --git a/src/components/button/button_group/button_group_single_button.tsx b/src/components/button/button_group/button_group_single_button.tsx
index 7f25bc4e17f..fe7161689bf 100644
--- a/src/components/button/button_group/button_group_single_button.tsx
+++ b/src/components/button/button_group/button_group_single_button.tsx
@@ -26,7 +26,8 @@ import {
 import { EuiButtonDisplay } from '../button';
 
 type Props = {
-  isSelected: boolean;
+  isSelected?: boolean;
+  name?: string;
 } & ButtonGroupOptionProps &
   EuiButtonSingleGroupOptionProps;
 
@@ -43,6 +44,13 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
   onChange,
   ...rest
 }) => {
+  const element = isDisabled ? 'button' : 'label';
+
+  let elementProps = {};
+  if (element === 'label') {
+    elementProps = { ...elementProps, htmlFor: id };
+  }
+
   const buttonClasses = classNames(
     {
       'euiButtonGroupButton-isSelected': isSelected,
@@ -53,20 +61,17 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
 
   return (
     <EuiButtonDisplay
+      element={element}
       baseClassName="euiButtonGroupButton"
-      htmlFor={id}
-      // TODO: Not sure if this is the best way to handle disabled labels from incurring clicks
-      element={isDisabled ? 'button' : 'label'}
       className={buttonClasses}
       fill={size !== 'compressed' && isSelected}
-      // TODO: Return to why both disabled types are needed
       isDisabled={isDisabled}
-      disabled={isDisabled}
       size={size === 'compressed' ? 's' : size}
       onClick={() => onChange(id, value)}
       textProps={{
         className: isIconOnly ? 'euiScreenReaderOnly' : undefined,
       }}
+      {...elementProps}
       {...rest}>
       <input
         id={id}
diff --git a/src/components/button/button_group/types.tsx b/src/components/button/button_group/types.tsx
index 4475f53dda0..509a50aefc3 100644
--- a/src/components/button/button_group/types.tsx
+++ b/src/components/button/button_group/types.tsx
@@ -32,10 +32,6 @@ export type ButtonGroupOptionProps = {
 
 export type EuiButtonMultiGroupOptionProps = EuiButtonGroupOptionProps;
 export type EuiButtonSingleGroupOptionProps = EuiButtonGroupOptionProps & {
-  /**
-   * The `name` attribute for radio inputs
-   */
-  name?: string;
   /**
    * The value of the radio input.
    */
@@ -99,6 +95,11 @@ export type EuiButtonGroupProps = CommonProps & {
 } & (
     | {
         type: 'single';
+        /**
+         * The `name` attribute for radio inputs;
+         * Required for keeping keyboard navigation contained within the group
+         */
+        name: string;
         /**
          * An array of #EuiButtonSingleGroupOptionProps
          */
@@ -131,5 +132,6 @@ export type EuiButtonGroupProps = CommonProps & {
          */
         onChange: (id: string) => void;
         idSelected?: never;
+        name?: never;
       }
   );

From bfccd9163894bc75f66d144285f77d24f8f9ee4a Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 17 Sep 2020 16:49:06 -0400
Subject: [PATCH 15/34] Update existing tests for button group

---
 .../__snapshots__/button_group.test.tsx.snap  | 1655 ++++++++++++++---
 .../button/button_group/button_group.test.tsx |  175 +-
 2 files changed, 1435 insertions(+), 395 deletions(-)

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 2139eb366ff..27091f9ec75 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
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiButtonGroup is rendered 1`] = `
+exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -10,14 +10,68 @@ exports[`EuiButtonGroup is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
-    data-test-subj="test subject string"
-  />
+    class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+  >
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      id="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option one
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      id="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option two
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = `
+exports[`EuiButtonGroup button props buttonSize compressed is rendered for single 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -27,9 +81,7 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
   >
     <label
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
@@ -38,12 +90,17 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
             id="button00"
+            name="test"
             type="radio"
           />
           Option one
@@ -57,42 +114,53 @@ exports[`EuiButtonGroup props buttonSize compressed is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
             id="button01"
+            name="test"
             type="radio"
           />
           Option two
         </span>
       </span>
     </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button02"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
+            disabled=""
             id="button02"
+            name="test"
             type="radio"
           />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
+exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -102,9 +170,78 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroupnull euiButtonGroup--text testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
+  >
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text"
+      id="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option one
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text"
+      id="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option two
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
+</fieldset>
+`;
+
+exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
+<fieldset
+  class="euiButtonGroup__fieldset"
+>
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
+  <div
+    class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
   >
     <label
       class="euiButtonGroupButton euiButtonGroupButton--text"
@@ -113,12 +250,17 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
             id="button00"
+            name="test"
             type="radio"
           />
           Option one
@@ -132,42 +274,53 @@ exports[`EuiButtonGroup props buttonSize m is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
             id="button01"
+            name="test"
             type="radio"
           />
           Option two
         </span>
       </span>
     </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text"
-      for="button02"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
+      disabled=""
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
+            disabled=""
             id="button02"
+            name="test"
             type="radio"
           />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props buttonSize s is rendered 1`] = `
+exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -177,72 +330,68 @@ exports[`EuiButtonGroup props buttonSize s is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
-    <label
+    <button
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button00"
+      id="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button00"
-            type="radio"
-          />
           Option one
         </span>
       </span>
-    </label>
-    <label
+    </button>
+    <button
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button01"
+      id="button01"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button01"
-            type="radio"
-          />
           Option two
         </span>
       </span>
-    </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button02"
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button02"
-            type="radio"
-          />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props color danger is rendered 1`] = `
+exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -252,23 +401,26 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       for="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
             id="button00"
+            name="test"
             type="radio"
           />
           Option one
@@ -276,48 +428,59 @@ exports[`EuiButtonGroup props color danger is rendered 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       for="button01"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
             id="button01"
+            name="test"
             type="radio"
           />
           Option two
         </span>
       </span>
     </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
-      for="button02"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
+            disabled=""
             id="button02"
+            name="test"
             type="radio"
           />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props color ghost is rendered 1`] = `
+exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -327,72 +490,68 @@ exports[`EuiButtonGroup props color ghost is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
   >
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
-      for="button00"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
+      id="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button00"
-            type="radio"
-          />
           Option one
         </span>
       </span>
-    </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
-      for="button01"
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
+      id="button01"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button01"
-            type="radio"
-          />
           Option two
         </span>
       </span>
-    </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
-      for="button02"
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button02"
-            type="radio"
-          />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props color primary is rendered 1`] = `
+exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -402,23 +561,26 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
+      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
       for="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
             id="button00"
+            name="test"
             type="radio"
           />
           Option one
@@ -426,48 +588,59 @@ exports[`EuiButtonGroup props color primary is rendered 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
+      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
       for="button01"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
             id="button01"
+            name="test"
             type="radio"
           />
           Option two
         </span>
       </span>
     </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
-      for="button02"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
+            disabled=""
             id="button02"
+            name="test"
             type="radio"
           />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props color secondary is rendered 1`] = `
+exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -477,72 +650,870 @@ exports[`EuiButtonGroup props color secondary is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--secondary testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost"
   >
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
-      for="button00"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
+      id="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button00"
-            type="radio"
-          />
           Option one
         </span>
       </span>
-    </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
-      for="button01"
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
+      id="button01"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button01"
-            type="radio"
-          />
           Option two
         </span>
       </span>
-    </label>
-    <label
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
+</fieldset>
+`;
+
+exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
+<fieldset
+  class="euiButtonGroup__fieldset"
+>
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
+  <div
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost"
+  >
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
+      for="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            name="test"
+            type="radio"
+          />
+          Option one
+        </span>
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
+      for="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            name="test"
+            type="radio"
+          />
+          Option two
+        </span>
+      </span>
+    </label>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            disabled=""
+            id="button02"
+            name="test"
+            type="radio"
+          />
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
+</fieldset>
+`;
+
+exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
+<fieldset
+  class="euiButtonGroup__fieldset"
+>
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
+  <div
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
+  >
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
+      id="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option one
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
+      id="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option two
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
+</fieldset>
+`;
+
+exports[`EuiButtonGroup button props color primary is rendered for single 1`] = `
+<fieldset
+  class="euiButtonGroup__fieldset"
+>
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
+  <div
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
+  >
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
+      for="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            name="test"
+            type="radio"
+          />
+          Option one
+        </span>
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
+      for="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            name="test"
+            type="radio"
+          />
+          Option two
+        </span>
+      </span>
+    </label>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            disabled=""
+            id="button02"
+            name="test"
+            type="radio"
+          />
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
+</fieldset>
+`;
+
+exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] = `
+<fieldset
+  class="euiButtonGroup__fieldset"
+>
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
+  <div
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--secondary"
+  >
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
+      id="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option one
+        </span>
+      </span>
+    </button>
+    <button
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
-      for="button02"
+      id="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option two
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
+</fieldset>
+`;
+
+exports[`EuiButtonGroup button props color secondary is rendered for single 1`] = `
+<fieldset
+  class="euiButtonGroup__fieldset"
+>
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
+  <div
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--secondary"
+  >
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
+      for="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            name="test"
+            type="radio"
+          />
+          Option one
+        </span>
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
+      for="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            name="test"
+            type="radio"
+          />
+          Option two
+        </span>
+      </span>
+    </label>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            disabled=""
+            id="button02"
+            name="test"
+            type="radio"
+          />
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
+</fieldset>
+`;
+
+exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
+<fieldset
+  class="euiButtonGroup__fieldset"
+>
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
+  <div
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  >
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      id="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option one
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      id="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option two
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
+</fieldset>
+`;
+
+exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
+<fieldset
+  class="euiButtonGroup__fieldset"
+>
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
+  <div
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  >
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            name="test"
+            type="radio"
+          />
+          Option one
+        </span>
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      for="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            name="test"
+            type="radio"
+          />
+          Option two
+        </span>
+      </span>
+    </label>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            disabled=""
+            id="button02"
+            name="test"
+            type="radio"
+          />
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
+</fieldset>
+`;
+
+exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
+<fieldset
+  class="euiButtonGroup__fieldset"
+>
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
+  <div
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
+  >
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
+      id="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option one
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
+      id="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option two
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
+</fieldset>
+`;
+
+exports[`EuiButtonGroup button props color warning is rendered for single 1`] = `
+<fieldset
+  class="euiButtonGroup__fieldset"
+>
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
+  <div
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
+  >
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
+      for="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            name="test"
+            type="radio"
+          />
+          Option one
+        </span>
+      </span>
+    </label>
+    <label
+      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
+      for="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            name="test"
+            type="radio"
+          />
+          Option two
+        </span>
+      </span>
+    </label>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          <input
+            class="euiScreenReaderOnly"
+            disabled=""
+            id="button02"
+            name="test"
+            type="radio"
+          />
+          Option three
+        </span>
+      </span>
+    </button>
+  </div>
+</fieldset>
+`;
+
+exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
+<fieldset
+  class="euiButtonGroup__fieldset"
+>
+  <legend
+    class="euiScreenReaderOnly"
+  >
+    test
+  </legend>
+  <div
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
+  >
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button00"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option one
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button01"
+    >
+      <span
+        class="euiButtonContent euiButton__content"
+      >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
+        <span
+          class="euiButton__text"
+        >
+          Option two
+        </span>
+      </span>
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button02"
-            type="radio"
-          />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props color text is rendered 1`] = `
+exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -552,74 +1523,90 @@ exports[`EuiButtonGroup props color text is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
   >
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button00"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
+            disabled=""
             id="button00"
+            name="test"
             type="radio"
           />
           Option one
         </span>
       </span>
-    </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button01"
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
+            disabled=""
             id="button01"
+            name="test"
             type="radio"
           />
           Option two
         </span>
       </span>
-    </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button02"
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
+            disabled=""
             id="button02"
+            name="test"
             type="radio"
           />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props color warning is rendered 1`] = `
+exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup__fieldset euiButtonGroup__fieldset--fullWidth"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -627,74 +1614,70 @@ exports[`EuiButtonGroup props color warning is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
   >
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
-      for="button00"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      id="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button00"
-            type="radio"
-          />
           Option one
         </span>
       </span>
-    </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
-      for="button01"
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      id="button01"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button01"
-            type="radio"
-          />
           Option two
         </span>
       </span>
-    </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
-      for="button02"
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button02"
-            type="radio"
-          />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props idSelected is rendered 1`] = `
+exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup__fieldset euiButtonGroup__fieldset--fullWidth"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -702,24 +1685,26 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       for="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
-            checked=""
             class="euiScreenReaderOnly"
             id="button00"
+            name="test"
             type="radio"
           />
           Option one
@@ -733,42 +1718,53 @@ exports[`EuiButtonGroup props idSelected is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
             id="button01"
+            name="test"
             type="radio"
           />
           Option two
         </span>
       </span>
     </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button02"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
+            disabled=""
             id="button02"
+            name="test"
             type="radio"
           />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
+exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -778,69 +1774,59 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
-      disabled=""
-      for="button00"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
+      id="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiScreenReaderOnly"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button00"
-            type="radio"
-          />
           Option one
         </span>
       </span>
     </button>
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
-      disabled=""
-      for="button01"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
+      id="button01"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiScreenReaderOnly"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button01"
-            type="radio"
-          />
           Option two
         </span>
       </span>
     </button>
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
       disabled=""
-      for="button02"
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiScreenReaderOnly"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -849,9 +1835,9 @@ exports[`EuiButtonGroup props isDisabled is rendered 1`] = `
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props isFullWidth is rendered 1`] = `
+exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset euiButtonGroup__fieldset--fullWidth"
+  class="euiButtonGroup__fieldset"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -859,23 +1845,26 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
       for="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiScreenReaderOnly"
         >
           <input
             class="euiScreenReaderOnly"
             id="button00"
+            name="test"
             type="radio"
           />
           Option one
@@ -883,48 +1872,59 @@ exports[`EuiButtonGroup props isFullWidth is rendered 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
       for="button01"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiScreenReaderOnly"
         >
           <input
             class="euiScreenReaderOnly"
             id="button01"
+            name="test"
             type="radio"
           />
           Option two
         </span>
       </span>
     </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button02"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
+      disabled=""
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiScreenReaderOnly"
         >
           <input
             class="euiScreenReaderOnly"
+            disabled=""
             id="button02"
+            name="test"
             type="radio"
           />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
+exports[`EuiButtonGroup button props selection idSelected is rendered for single 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -934,23 +1934,27 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
       for="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="euiButton__text"
         >
           <input
+            checked=""
             class="euiScreenReaderOnly"
             id="button00"
+            name="test"
             type="radio"
           />
           Option one
@@ -964,42 +1968,53 @@ exports[`EuiButtonGroup props isIconOnly is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
             id="button01"
+            name="test"
             type="radio"
           />
           Option two
         </span>
       </span>
     </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button02"
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="euiButton__text"
         >
           <input
             class="euiScreenReaderOnly"
+            disabled=""
             id="button02"
+            name="test"
             type="radio"
           />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props options are rendered 1`] = `
+exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for multi 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -1009,72 +2024,70 @@ exports[`EuiButtonGroup props options are rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button00"
+    <button
+      aria-pressed="true"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+      id="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button00"
-            type="radio"
-          />
           Option one
         </span>
       </span>
-    </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button01"
+    </button>
+    <button
+      aria-pressed="true"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+      id="button01"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button01"
-            type="radio"
-          />
           Option two
         </span>
       </span>
-    </label>
-    <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button02"
+    </button>
+    <button
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            id="button02"
-            type="radio"
-          />
           Option three
         </span>
       </span>
-    </label>
+    </button>
   </div>
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
+exports[`EuiButtonGroup type multi is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -1089,14 +2102,16 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
     data-test-subj="test subject string"
   >
     <button
-      aria-pressed="true"
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button00"
-      style="min-width:0"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
@@ -1105,14 +2120,16 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
       </span>
     </button>
     <button
-      aria-pressed="true"
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
-      style="min-width:0"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
@@ -1121,14 +2138,17 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
       </span>
     </button>
     <button
-      aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
       id="button02"
-      style="min-width:0"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
@@ -1140,7 +2160,7 @@ exports[`EuiButtonGroup props type of multi idToSelectedMap is rendered 1`] = `
 </fieldset>
 `;
 
-exports[`EuiButtonGroup props type of multi is rendered 1`] = `
+exports[`EuiButtonGroup type single is rendered 1`] = `
 <fieldset
   class="euiButtonGroup__fieldset"
 >
@@ -1154,50 +2174,75 @@ exports[`EuiButtonGroup props type of multi is rendered 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
     data-test-subj="test subject string"
   >
-    <button
-      aria-pressed="false"
+    <label
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      id="button00"
-      style="min-width:0"
+      for="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
+          <input
+            class="euiScreenReaderOnly"
+            id="button00"
+            name="test"
+            type="radio"
+          />
           Option one
         </span>
       </span>
-    </button>
-    <button
-      aria-pressed="false"
+    </label>
+    <label
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      id="button01"
-      style="min-width:0"
+      for="button01"
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
+          <input
+            class="euiScreenReaderOnly"
+            id="button01"
+            name="test"
+            type="radio"
+          />
           Option two
         </span>
       </span>
-    </button>
+    </label>
     <button
-      aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      id="button02"
-      style="min-width:0"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      disabled=""
     >
       <span
         class="euiButtonContent euiButton__content"
       >
+        <div
+          class="euiButtonContent__icon"
+          data-euiicon-type="bolt"
+        />
         <span
           class="euiButton__text"
         >
+          <input
+            class="euiScreenReaderOnly"
+            disabled=""
+            id="button02"
+            name="test"
+            type="radio"
+          />
           Option three
         </span>
       </span>
diff --git a/src/components/button/button_group/button_group.test.tsx b/src/components/button/button_group/button_group.test.tsx
index 00ef893035f..817d2846cf4 100644
--- a/src/components/button/button_group/button_group.test.tsx
+++ b/src/components/button/button_group/button_group.test.tsx
@@ -31,64 +31,72 @@ const SIZES: Array<EuiButtonGroupProps['buttonSize']> = [
   'compressed',
 ];
 
-const requiredProps = {
-  legend: 'test',
-  onChange: () => {},
-  options: [],
-  ...commonProps,
-};
-
 const options = [
   {
     id: 'button00',
     label: 'Option one',
+    iconType: 'bolt',
   },
   {
     id: 'button01',
     label: 'Option two',
+    iconType: 'bolt',
   },
   {
     id: 'button02',
     label: 'Option three',
+    iconType: 'bolt',
+    isDisabled: true,
   },
 ];
 
-describe('EuiButtonGroup', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiButtonGroup type="single" idSelected="" {...requiredProps} />
-    );
+const requiredSingleProps: EuiButtonGroupProps = {
+  type: 'single',
+  legend: 'test',
+  onChange: () => {},
+  options,
+  name: 'test',
+  idSelected: '',
+};
 
-    expect(component).toMatchSnapshot();
-  });
+const requiredMultiProps: EuiButtonGroupProps = {
+  type: 'multi',
+  legend: 'test',
+  onChange: () => {},
+  options,
+};
 
-  describe('props', () => {
-    describe('options', () => {
-      it('are rendered', () => {
-        const component = render(
-          <EuiButtonGroup
-            type="single"
-            idSelected=""
-            {...requiredProps}
-            options={options}
-          />
-        );
+describe('EuiButtonGroup', () => {
+  describe('type', () => {
+    test('single is rendered', () => {
+      const component = render(
+        <EuiButtonGroup {...requiredSingleProps} {...commonProps} />
+      );
 
-        expect(component).toMatchSnapshot();
-      });
+      expect(component).toMatchSnapshot();
     });
+    test('multi is rendered', () => {
+      const component = render(
+        <EuiButtonGroup {...requiredMultiProps} {...commonProps} />
+      );
 
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('button props', () => {
     describe('buttonSize', () => {
-      SIZES.forEach((size) => {
-        test(`${size} is rendered`, () => {
+      SIZES.forEach(size => {
+        test(`${size} is rendered for single`, () => {
           const component = render(
-            <EuiButtonGroup
-              type="single"
-              idSelected=""
-              {...requiredProps}
-              buttonSize={size}
-              options={options}
-            />
+            <EuiButtonGroup {...requiredSingleProps} buttonSize={size} />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+        test(`${size} is rendered for multi`, () => {
+          const component = render(
+            <EuiButtonGroup {...requiredMultiProps} buttonSize={size} />
           );
 
           expect(component).toMatchSnapshot();
@@ -97,15 +105,16 @@ describe('EuiButtonGroup', () => {
     });
 
     describe('isDisabled', () => {
-      it('is rendered', () => {
+      it('is rendered for single', () => {
         const component = render(
-          <EuiButtonGroup
-            type="single"
-            idSelected=""
-            {...requiredProps}
-            isDisabled
-            options={options}
-          />
+          <EuiButtonGroup {...requiredSingleProps} isDisabled />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+      it('is rendered for multi', () => {
+        const component = render(
+          <EuiButtonGroup {...requiredMultiProps} isDisabled />
         );
 
         expect(component).toMatchSnapshot();
@@ -113,15 +122,16 @@ describe('EuiButtonGroup', () => {
     });
 
     describe('isFullWidth', () => {
-      it('is rendered', () => {
+      it('is rendered for single', () => {
         const component = render(
-          <EuiButtonGroup
-            type="single"
-            idSelected=""
-            {...requiredProps}
-            isFullWidth
-            options={options}
-          />
+          <EuiButtonGroup {...requiredSingleProps} isFullWidth />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+      it('is rendered for multi', () => {
+        const component = render(
+          <EuiButtonGroup {...requiredMultiProps} isFullWidth />
         );
 
         expect(component).toMatchSnapshot();
@@ -129,15 +139,16 @@ describe('EuiButtonGroup', () => {
     });
 
     describe('isIconOnly', () => {
-      it('is rendered', () => {
+      it('is rendered for single', () => {
         const component = render(
-          <EuiButtonGroup
-            type="single"
-            idSelected=""
-            {...requiredProps}
-            isIconOnly
-            options={options}
-          />
+          <EuiButtonGroup {...requiredSingleProps} isIconOnly />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+      it('is rendered for multi', () => {
+        const component = render(
+          <EuiButtonGroup {...requiredMultiProps} isIconOnly />
         );
 
         expect(component).toMatchSnapshot();
@@ -145,54 +156,38 @@ describe('EuiButtonGroup', () => {
     });
 
     describe('color', () => {
-      COLORS.forEach((color) => {
-        test(`${color} is rendered`, () => {
+      COLORS.forEach(color => {
+        test(`${color} is rendered for single`, () => {
           const component = render(
-            <EuiButtonGroup
-              type="single"
-              idSelected=""
-              {...requiredProps}
-              color={color}
-              options={options}
-            />
+            <EuiButtonGroup {...requiredSingleProps} color={color} />
           );
 
           expect(component).toMatchSnapshot();
         });
-      });
-    });
-
-    describe('idSelected', () => {
-      it('is rendered', () => {
-        const component = render(
-          <EuiButtonGroup
-            type="single"
-            idSelected={options[0].id}
-            {...requiredProps}
-            options={options}
-          />
-        );
+        test(`${color} is rendered for multi`, () => {
+          const component = render(
+            <EuiButtonGroup {...requiredMultiProps} color={color} />
+          );
 
-        expect(component).toMatchSnapshot();
+          expect(component).toMatchSnapshot();
+        });
       });
     });
 
-    describe('type of multi', () => {
-      it('is rendered', () => {
+    describe('selection', () => {
+      it('idSelected is rendered for single', () => {
         const component = render(
-          <EuiButtonGroup type="multi" {...requiredProps} options={options} />
+          <EuiButtonGroup {...requiredSingleProps} idSelected={options[0].id} />
         );
 
         expect(component).toMatchSnapshot();
       });
 
-      it('idToSelectedMap is rendered', () => {
+      it('idToSelectedMap is rendered for multi', () => {
         const component = render(
           <EuiButtonGroup
-            {...requiredProps}
-            type="multi"
+            {...requiredMultiProps}
             idToSelectedMap={{ [options[0].id]: true, [options[1].id]: true }}
-            options={options}
           />
         );
 

From 972ec07cd96bbaf8d32e9ad0580766e24c1c15a7 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 17 Sep 2020 17:43:23 -0400
Subject: [PATCH 16/34] Merging to a single button compontent

---
 src/components/button/button.tsx              |  4 +-
 .../button/button_group/button_group.tsx      | 28 ++------
 .../button_group_multi_button.tsx             | 67 ++++++++++++++++---
 .../button_group_single_button.tsx            | 14 ++--
 src/components/button/button_group/types.tsx  |  1 +
 5 files changed, 76 insertions(+), 38 deletions(-)

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 399a05a64a6..b29bd32bc13 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -22,6 +22,7 @@ import React, {
   Ref,
   ButtonHTMLAttributes,
   CSSProperties,
+  HTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
 
@@ -78,6 +79,7 @@ export const SIZES = keysOf(sizeToClassNameMap);
  * `iconType`, `iconSide`, and `textProps`
  */
 export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
+  // children?: ReactNode;
   /**
    * Make button a solid color for prominence
    */
@@ -113,7 +115,7 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
   style?: CSSProperties;
 }
 
-export interface EuiButtonDisplayProps extends EuiButtonProps {
+export type EuiButtonDisplayProps = EuiButtonProps & HTMLAttributes<HTMLElement> & {
   /**
    * Provide a valid element to render the element as
    */
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 6cafe1052ab..72af7094d1b 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -21,11 +21,9 @@ import classNames from 'classnames';
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroupMultiButton } from './button_group_multi_button';
-import { EuiButtonGroupSingleButton } from './button_group_single_button';
 import {
   EuiButtonGroupProps,
   EuiButtonSingleGroupOptionProps,
-  EuiButtonMultiGroupOptionProps,
 } from './types';
 import { colorToClassNameMap } from '../button';
 
@@ -78,6 +76,8 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
     'euiButtonGroup__fieldset--fullWidth': isFullWidth,
   });
 
+  const typeIsSingle = type === 'single';
+
   return (
     <fieldset className={fieldsetClasses}>
       <EuiScreenReaderOnly>
@@ -86,31 +86,17 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
 
       <div className={classes} {...rest}>
         {options.map((option, index) => {
-          if (type === 'single') {
-            return (
-              <EuiButtonGroupSingleButton
-                key={index}
-                {...(option as EuiButtonSingleGroupOptionProps)}
-                isSelected={option.id === idSelected}
-                size={buttonSize}
-                isIconOnly={isIconOnly}
-                isDisabled={isDisabled || option.isDisabled}
-                color={resolvedColor}
-                onChange={onChange}
-                name={name}
-              />
-            );
-          }
-
           return (
             <EuiButtonGroupMultiButton
               key={index}
-              {...(option as EuiButtonMultiGroupOptionProps)}
-              isSelected={idToSelectedMap[option.id]}
+              name={name}
+              isDisabled={isDisabled}
+              {...(option as EuiButtonSingleGroupOptionProps)}
+              type={typeIsSingle ? 'label' : 'button'}
+              isSelected={typeIsSingle ? option.id === idSelected : idToSelectedMap[option.id]}
               color={resolvedColor}
               size={buttonSize}
               isIconOnly={isIconOnly}
-              isDisabled={isDisabled || option.isDisabled}
               onChange={onChange}
             />
           );
diff --git a/src/components/button/button_group/button_group_multi_button.tsx b/src/components/button/button_group/button_group_multi_button.tsx
index c144e596d45..4d9d69fc7b7 100644
--- a/src/components/button/button_group/button_group_multi_button.tsx
+++ b/src/components/button/button_group/button_group_multi_button.tsx
@@ -26,21 +26,71 @@ import {
 } from './types';
 
 type Props = {
+  /**
+   * Styles the selected button to look selected (usually with `fill`)
+   */
   isSelected?: boolean;
+  /**
+   * Name of the whole group for 'single'.
+   */
+  name?: string;
+  /**
+   * The value of the radio input for 'single'.
+   */
+  value?: string;
+  /**
+   * Element to display based on single or multi
+   */
+  type: 'button' | 'label';
 } & ButtonGroupOptionProps &
   EuiButtonMultiGroupOptionProps;
 
 export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
   className,
   id,
-  label,
-  isSelected,
-  size,
+  isDisabled,
   isIconOnly,
+  isSelected,
+  label,
+  name,
   onChange,
-  isDisabled,
+  size,
+  value,
+  type = 'button',
   ...rest
 }) => {
+  // Force element to be a button if disabled
+  const element = isDisabled ? 'button' : type;
+
+  let elementProps = {};
+  let singleInput;
+  if (element === 'label') {
+    elementProps = {
+      ...elementProps,
+      htmlFor: id,
+      onClick: () => onChange(id, value)
+    };
+    singleInput = (
+      <input
+        id={id}
+        className="euiScreenReaderOnly"
+        name={name}
+        checked={isSelected}
+        disabled={isDisabled}
+        value={value}
+        type="radio"
+        onChange={() => onChange(id, value)}
+      />
+    );
+  } else {
+    elementProps = {
+      ...elementProps,
+      id,
+      'aria-pressed': isSelected,
+      onClick: () => onChange(id),
+    }
+  }
+
   const buttonClasses = classNames(
     {
       'euiButtonGroupButton-isSelected': isSelected,
@@ -51,19 +101,18 @@ export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
 
   return (
     <EuiButtonDisplay
-      id={id}
-      element={'button'}
       baseClassName="euiButtonGroupButton"
       className={buttonClasses}
-      isDisabled={isDisabled}
+      element={element}
       fill={size !== 'compressed' && isSelected}
-      aria-pressed={isSelected}
+      isDisabled={isDisabled}
       size={size === 'compressed' ? 's' : size}
-      onClick={() => onChange(id)}
       textProps={{
         className: isIconOnly ? 'euiScreenReaderOnly' : undefined,
       }}
+      {...elementProps}
       {...rest}>
+      {singleInput}
       {label}
     </EuiButtonDisplay>
   );
diff --git a/src/components/button/button_group/button_group_single_button.tsx b/src/components/button/button_group/button_group_single_button.tsx
index fe7161689bf..43a67a2747b 100644
--- a/src/components/button/button_group/button_group_single_button.tsx
+++ b/src/components/button/button_group/button_group_single_button.tsx
@@ -32,16 +32,16 @@ type Props = {
   EuiButtonSingleGroupOptionProps;
 
 export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
+  className,
   id,
-  value,
-  label,
   isDisabled,
-  className,
-  isSelected,
   isIconOnly,
-  size,
+  isSelected,
+  label,
   name,
   onChange,
+  size,
+  value,
   ...rest
 }) => {
   const element = isDisabled ? 'button' : 'label';
@@ -61,13 +61,13 @@ export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
 
   return (
     <EuiButtonDisplay
-      element={element}
       baseClassName="euiButtonGroupButton"
       className={buttonClasses}
+      element={element}
       fill={size !== 'compressed' && isSelected}
       isDisabled={isDisabled}
-      size={size === 'compressed' ? 's' : size}
       onClick={() => onChange(id, value)}
+      size={size === 'compressed' ? 's' : size}
       textProps={{
         className: isIconOnly ? 'euiScreenReaderOnly' : undefined,
       }}
diff --git a/src/components/button/button_group/types.tsx b/src/components/button/button_group/types.tsx
index 509a50aefc3..ce104c8b872 100644
--- a/src/components/button/button_group/types.tsx
+++ b/src/components/button/button_group/types.tsx
@@ -23,6 +23,7 @@ import { IconType } from '../../icon';
 import { ButtonColor } from '../button';
 import { ButtonContentIconSide } from '../button_content';
 
+/** INTERNAL */
 export type ButtonGroupOptionProps = {
   color: EuiButtonGroupProps['color'];
   size: EuiButtonGroupProps['buttonSize'];

From f5f5fc2c91571c218a778e74f73ba6d8565900fd Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 17 Sep 2020 18:17:22 -0400
Subject: [PATCH 17/34] Merging to a single button compontent. Part II and
 fixing types

---
 src-docs/src/views/button/button_example.js   |  11 +-
 src/components/button/button_content.tsx      |   6 +
 .../__snapshots__/button_group.test.tsx.snap  | 256 ++++++++----------
 .../button/button_group/button_group.test.tsx |   4 +-
 .../button/button_group/button_group.tsx      | 105 ++++++-
 ...lti_button.tsx => button_group_button.tsx} |  20 +-
 .../button_group_single_button.tsx            |  89 ------
 src/components/button/button_group/index.ts   |   7 +-
 src/components/button/button_group/types.tsx  | 138 ----------
 9 files changed, 242 insertions(+), 394 deletions(-)
 rename src/components/button/button_group/{button_group_multi_button.tsx => button_group_button.tsx} (87%)
 delete mode 100644 src/components/button/button_group/button_group_single_button.tsx
 delete mode 100644 src/components/button/button_group/types.tsx

diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index e557bd1db61..b3da5d90849 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -1,9 +1,7 @@
 import React from 'react';
-
 import { Link } from 'react-router-dom';
 
 import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -16,8 +14,11 @@ import {
   EuiCallOut,
   EuiText,
 } from '../../../../src/components';
+
+import { EuiButtonGroupOptionProps } from '!!prop-loader!../../../../src/components/button/button_group/button_group';
+
 import Guidelines from './guidelines';
-import buttonConfig from './playground';
+import Playground from './playground';
 
 import Button from './button';
 const buttonSource = require('!!raw-loader!./button');
@@ -358,7 +359,7 @@ export const ButtonExample = {
       ),
       demo: <ButtonGroup />,
       snippet: buttonGroupSnippet,
-      props: { EuiButtonGroup },
+      props: { EuiButtonGroup, EuiButtonGroupOptionProps },
     },
     {
       title: 'Ghost',
@@ -390,5 +391,5 @@ export const ButtonExample = {
     },
   ],
   guidelines: <Guidelines />,
-  playground: buttonConfig,
+  playground: Playground,
 };
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
index 9df9aa6d3a5..cb51a88bcd6 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -41,7 +41,13 @@ export type EuiButtonContentType = HTMLAttributes<HTMLSpanElement>;
  * This component is simply a helper component for reuse within other button components
  */
 export interface EuiButtonContentProps extends CommonProps {
+  /**
+   * Any `type` accepted by EuiIcon
+   */
   iconType?: IconType;
+  /**
+   * Can only be one side `left` or `right`
+   */
   iconSide?: ButtonContentIconSide;
   isLoading?: boolean;
   /**
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 27091f9ec75..4a06bd48fbe 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
@@ -13,7 +13,9 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -84,7 +86,9 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
     class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -132,8 +136,10 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -145,13 +151,6 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -173,7 +172,9 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -244,7 +245,9 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
     class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -292,8 +295,10 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -305,13 +310,6 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -333,7 +331,9 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -404,7 +404,9 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -452,8 +454,10 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -465,13 +469,6 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -493,7 +490,9 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -564,7 +563,9 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -612,8 +613,10 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -625,13 +628,6 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -653,7 +649,9 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -724,7 +722,9 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -772,8 +772,10 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -785,13 +787,6 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -813,7 +808,9 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -884,7 +881,9 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -932,8 +931,10 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -945,13 +946,6 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -973,7 +967,9 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--secondary"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -1044,7 +1040,9 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--secondary"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -1092,8 +1090,10 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1105,13 +1105,6 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -1133,7 +1126,9 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -1204,7 +1199,9 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -1252,8 +1249,10 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1265,13 +1264,6 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -1293,7 +1285,9 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -1364,7 +1358,9 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -1412,8 +1408,10 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1425,13 +1423,6 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -1453,7 +1444,9 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled testClass1 testClass2"
+      data-test-subj="test subject string"
       disabled=""
       id="button00"
     >
@@ -1526,8 +1519,12 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      aria-label="aria-label"
+      aria-pressed="false"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled testClass1 testClass2"
+      data-test-subj="test subject string"
       disabled=""
+      id="button00"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1539,20 +1536,15 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button00"
-            name="test"
-            type="radio"
-          />
           Option one
         </span>
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button01"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1564,20 +1556,15 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button01"
-            name="test"
-            type="radio"
-          />
           Option two
         </span>
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1589,13 +1576,6 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -1617,7 +1597,9 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -1688,7 +1670,9 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -1736,8 +1720,10 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1749,13 +1735,6 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -1777,7 +1756,9 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -1848,7 +1829,9 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -1896,8 +1879,10 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1909,13 +1894,6 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
         <span
           class="euiButton__text euiScreenReaderOnly"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -1937,7 +1915,9 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -1986,8 +1966,10 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1999,13 +1981,6 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
@@ -2027,8 +2002,10 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
     class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
   >
     <button
+      aria-label="aria-label"
       aria-pressed="true"
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -2102,7 +2079,9 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
     data-test-subj="test subject string"
   >
     <button
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       id="button00"
     >
       <span
@@ -2175,7 +2154,9 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
     data-test-subj="test subject string"
   >
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+      aria-label="aria-label"
+      class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
+      data-test-subj="test subject string"
       for="button00"
     >
       <span
@@ -2223,8 +2204,10 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       </span>
     </label>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
+      id="button02"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2236,13 +2219,6 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
         <span
           class="euiButton__text"
         >
-          <input
-            class="euiScreenReaderOnly"
-            disabled=""
-            id="button02"
-            name="test"
-            type="radio"
-          />
           Option three
         </span>
       </span>
diff --git a/src/components/button/button_group/button_group.test.tsx b/src/components/button/button_group/button_group.test.tsx
index 817d2846cf4..764b43f5bf9 100644
--- a/src/components/button/button_group/button_group.test.tsx
+++ b/src/components/button/button_group/button_group.test.tsx
@@ -21,8 +21,7 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps as commonProps } from '../../../test';
 
-import { EuiButtonGroup } from './button_group';
-import { EuiButtonGroupProps } from './types';
+import { EuiButtonGroup, EuiButtonGroupProps } from './button_group';
 import { COLORS } from '../button';
 
 const SIZES: Array<EuiButtonGroupProps['buttonSize']> = [
@@ -36,6 +35,7 @@ const options = [
     id: 'button00',
     label: 'Option one',
     iconType: 'bolt',
+    ...commonProps,
   },
   {
     id: 'button01',
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 72af7094d1b..5848da42bdc 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -18,14 +18,101 @@
  */
 
 import classNames from 'classnames';
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
 import { EuiScreenReaderOnly } from '../../accessibility';
-import { EuiButtonGroupMultiButton } from './button_group_multi_button';
-import {
-  EuiButtonGroupProps,
-  EuiButtonSingleGroupOptionProps,
-} from './types';
-import { colorToClassNameMap } from '../button';
+import { EuiButtonGroupButton } from './button_group_button';
+import { colorToClassNameMap, ButtonColor } from '../button';
+import { EuiButtonContentProps } from '../button_content';
+import { CommonProps } from 'src/components/common';
+
+export interface EuiButtonGroupOptionProps extends EuiButtonContentProps, CommonProps {
+  /**
+   * Each option must have a unique `id` for maintaining selection
+   */
+  id: string;
+  /**
+   * Each option must have a `label` even for icons which will be applied as the `aria-label`
+   */
+  label: ReactNode;
+  isDisabled?: boolean;
+  /**
+   * The value of the radio input.
+   */
+  value?: any;
+};
+
+export type EuiButtonGroupProps = CommonProps & {
+  /**
+   * Typical sizing is `s`. Medium `m` size should be reserved for major features.
+   * `compressed` is meant to be used alongside and within compressed forms.
+   */
+  buttonSize?: 's' | 'm' | 'compressed';
+  isDisabled?: boolean;
+  /**
+   * Expands the whole group to the full width of the container.
+   * Each button gets equal widths no matter the content
+   */
+  isFullWidth?: boolean;
+  /**
+   * Hides the label to only show the `iconType` provided by the `option`
+   */
+  isIconOnly?: boolean;
+
+  /**
+   * A hidden group title (required for accessibility)
+   */
+  legend: string;
+  /**
+   * Compressed styles don't support `ghost` color (Color will be changed to "text")
+   */
+  color?: ButtonColor;
+  /**
+   * Actual type is `'single' | 'multi'`.
+   * Determines how the selection of the group should be handled.
+   * With `'single'` only one option can be selected at a time (similar to radio group).
+   * With `'multi'` multiple options selected (similar to checkbox group).
+   */
+  type?: 'single' | 'multi';
+
+  /**
+   * An array of #EuiButtonGroupOptionProps
+   */
+  options: EuiButtonGroupOptionProps[];
+} & (
+    | {
+      type: 'single';
+      /**
+       * The `name` attribute for radio inputs;
+       * Required for keeping keyboard navigation contained within the group
+       */
+      name: string;
+      /**
+       * Styles the selected option to look selected (usually with `fill`)
+       * Only used in `type='single'`.
+       */
+      idSelected: string;
+      /**
+       * Returns the `id` of the clicked option and the `value`
+       * (`value` only in `type='single'`)
+       */
+      onChange: (id: string, value?: any) => void;
+      idToSelectedMap?: never;
+    }
+    | {
+      type: 'multi';
+      /**
+       * A map of `id`s as keys with the selected boolean values.
+       * Only used in `type='multi'`.
+       */
+      idToSelectedMap?: { [id: string]: boolean };
+      /**
+       * Returns the `id` of the clicked option
+       */
+      onChange: (id: string) => void;
+      idSelected?: never;
+      name?: never;
+    }
+  );
 
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
   EuiButtonGroupProps;
@@ -87,11 +174,11 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
       <div className={classes} {...rest}>
         {options.map((option, index) => {
           return (
-            <EuiButtonGroupMultiButton
+            <EuiButtonGroupButton
               key={index}
               name={name}
               isDisabled={isDisabled}
-              {...(option as EuiButtonSingleGroupOptionProps)}
+              {...(option as EuiButtonGroupOptionProps)}
               type={typeIsSingle ? 'label' : 'button'}
               isSelected={typeIsSingle ? option.id === idSelected : idToSelectedMap[option.id]}
               color={resolvedColor}
diff --git a/src/components/button/button_group/button_group_multi_button.tsx b/src/components/button/button_group/button_group_button.tsx
similarity index 87%
rename from src/components/button/button_group/button_group_multi_button.tsx
rename to src/components/button/button_group/button_group_button.tsx
index 4d9d69fc7b7..379ef7fc8a5 100644
--- a/src/components/button/button_group/button_group_multi_button.tsx
+++ b/src/components/button/button_group/button_group_button.tsx
@@ -21,11 +21,11 @@ import classNames from 'classnames';
 import React, { FunctionComponent } from 'react';
 import { EuiButtonDisplay } from '../button';
 import {
-  ButtonGroupOptionProps,
-  EuiButtonMultiGroupOptionProps,
-} from './types';
+  EuiButtonGroupOptionProps,
+  EuiButtonGroupProps,
+} from './button_group';
 
-type Props = {
+type Props = EuiButtonGroupOptionProps & {
   /**
    * Styles the selected button to look selected (usually with `fill`)
    */
@@ -42,10 +42,16 @@ type Props = {
    * Element to display based on single or multi
    */
   type: 'button' | 'label';
-} & ButtonGroupOptionProps &
-  EuiButtonMultiGroupOptionProps;
+  /**
+   * Props to inherit from the group
+   */
+  color: EuiButtonGroupProps['color'];
+  size: EuiButtonGroupProps['buttonSize'];
+  isIconOnly: EuiButtonGroupProps['isIconOnly'];
+  onChange: EuiButtonGroupProps['onChange'];
+};
 
-export const EuiButtonGroupMultiButton: FunctionComponent<Props> = ({
+export const EuiButtonGroupButton: FunctionComponent<Props> = ({
   className,
   id,
   isDisabled,
diff --git a/src/components/button/button_group/button_group_single_button.tsx b/src/components/button/button_group/button_group_single_button.tsx
deleted file mode 100644
index 43a67a2747b..00000000000
--- a/src/components/button/button_group/button_group_single_button.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import classNames from 'classnames';
-import React, { FunctionComponent } from 'react';
-import {
-  ButtonGroupOptionProps,
-  EuiButtonSingleGroupOptionProps,
-} from './types';
-import { EuiButtonDisplay } from '../button';
-
-type Props = {
-  isSelected?: boolean;
-  name?: string;
-} & ButtonGroupOptionProps &
-  EuiButtonSingleGroupOptionProps;
-
-export const EuiButtonGroupSingleButton: FunctionComponent<Props> = ({
-  className,
-  id,
-  isDisabled,
-  isIconOnly,
-  isSelected,
-  label,
-  name,
-  onChange,
-  size,
-  value,
-  ...rest
-}) => {
-  const element = isDisabled ? 'button' : 'label';
-
-  let elementProps = {};
-  if (element === 'label') {
-    elementProps = { ...elementProps, htmlFor: id };
-  }
-
-  const buttonClasses = classNames(
-    {
-      'euiButtonGroupButton-isSelected': isSelected,
-      'euiButtonGroupButton-isIconOnly': isIconOnly,
-    },
-    className
-  );
-
-  return (
-    <EuiButtonDisplay
-      baseClassName="euiButtonGroupButton"
-      className={buttonClasses}
-      element={element}
-      fill={size !== 'compressed' && isSelected}
-      isDisabled={isDisabled}
-      onClick={() => onChange(id, value)}
-      size={size === 'compressed' ? 's' : size}
-      textProps={{
-        className: isIconOnly ? 'euiScreenReaderOnly' : undefined,
-      }}
-      {...elementProps}
-      {...rest}>
-      <input
-        id={id}
-        className="euiScreenReaderOnly"
-        name={name}
-        checked={isSelected}
-        disabled={isDisabled}
-        value={value}
-        type="radio"
-        onChange={() => onChange(id, value)}
-      />
-      {label}
-    </EuiButtonDisplay>
-  );
-};
diff --git a/src/components/button/button_group/index.ts b/src/components/button/button_group/index.ts
index 2e0c747810b..e1f27153750 100644
--- a/src/components/button/button_group/index.ts
+++ b/src/components/button/button_group/index.ts
@@ -17,9 +17,8 @@
  * under the License.
  */
 
-export { EuiButtonGroup } from './button_group';
 export {
-  EuiButtonSingleGroupOptionProps,
-  EuiButtonMultiGroupOptionProps,
+  EuiButtonGroup,
+  EuiButtonGroupOptionProps,
   EuiButtonGroupProps,
-} from './types';
+} from './button_group';
diff --git a/src/components/button/button_group/types.tsx b/src/components/button/button_group/types.tsx
deleted file mode 100644
index ce104c8b872..00000000000
--- a/src/components/button/button_group/types.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { ReactNode } from 'react';
-import { CommonProps } from '../../common';
-import { IconType } from '../../icon';
-import { ButtonColor } from '../button';
-import { ButtonContentIconSide } from '../button_content';
-
-/** INTERNAL */
-export type ButtonGroupOptionProps = {
-  color: EuiButtonGroupProps['color'];
-  size: EuiButtonGroupProps['buttonSize'];
-  isIconOnly: EuiButtonGroupProps['isIconOnly'];
-  onChange: EuiButtonGroupProps['onChange'];
-};
-
-export type EuiButtonMultiGroupOptionProps = EuiButtonGroupOptionProps;
-export type EuiButtonSingleGroupOptionProps = EuiButtonGroupOptionProps & {
-  /**
-   * The value of the radio input.
-   */
-  value?: any;
-};
-
-type EuiButtonGroupOptionProps = CommonProps & {
-  /**
-   * Each option must have a unique `id` for maintaining selection
-   */
-  id: string;
-  /**
-   * Each option must have a `label` even for icons which will be applied as the `aria-label`
-   */
-  label: ReactNode;
-  isDisabled?: boolean;
-  /**
-   * Any `type` accepted by EuiIcon
-   */
-  iconType?: IconType;
-  iconSide?: ButtonContentIconSide;
-};
-
-export type EuiButtonGroupProps = CommonProps & {
-  /**
-   * Typical sizing is `s`. Medium `m` size should be reserved for major features.
-   * `compressed` is meant to be used alongside and within compressed forms.
-   */
-  buttonSize?: 's' | 'm' | 'compressed';
-  isDisabled?: boolean;
-  /**
-   * Expands the whole group to the full width of the container.
-   * Each button gets equal widths no matter the content
-   */
-  isFullWidth?: boolean;
-  /**
-   * Hides the label to only show the `iconType` provided by the `option`
-   */
-  isIconOnly?: boolean;
-
-  /**
-   * A hidden group title (required for accessibility)
-   */
-  legend: string;
-  /**
-   * Compressed styles don't support `ghost` color (Color will be changed to "text")
-   */
-  color?: ButtonColor;
-  /**
-   * Actual type is `'single' | 'multi'`.
-   * Determines how the selection of the group should be handled.
-   * With `'single'` only one option can be selected at a time (similar to radio group).
-   * With `'multi'` multiple options selected (similar to checkbox group).
-   */
-  type?: 'single' | 'multi';
-
-  /**
-   * An array of #EuiButtonSingleGroupOptionProps or #EuiButtonMultiGroupOptionProps
-   */
-  options: EuiButtonSingleGroupOptionProps[] | EuiButtonMultiGroupOptionProps[];
-} & (
-    | {
-        type: 'single';
-        /**
-         * The `name` attribute for radio inputs;
-         * Required for keeping keyboard navigation contained within the group
-         */
-        name: string;
-        /**
-         * An array of #EuiButtonSingleGroupOptionProps
-         */
-        options: EuiButtonSingleGroupOptionProps[];
-        /**
-         * Styles the selected option to look selected (usually with `fill`)
-         * Only used in `type='single'`.
-         */
-        idSelected: string;
-        /**
-         * Returns the `id` of the clicked option and the `value`
-         * (`value` only in `type='single'`)
-         */
-        onChange: (id: string, value?: any) => void;
-        idToSelectedMap?: never;
-      }
-    | {
-        type: 'multi';
-        /**
-         * An array of #EuiButtonMultiGroupOptionProps
-         */
-        options: EuiButtonMultiGroupOptionProps[];
-        /**
-         * A map of `id`s as keys with the selected boolean values.
-         * Only used in `type='multi'`.
-         */
-        idToSelectedMap?: { [id: string]: boolean };
-        /**
-         * Returns the `id` of the clicked option
-         */
-        onChange: (id: string) => void;
-        idSelected?: never;
-        name?: never;
-      }
-  );

From 87fb16655b07a73787a7ce2507d2b34658a11309 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 17 Sep 2020 19:03:42 -0400
Subject: [PATCH 18/34] Fixing styles and a11y

---
 .../__snapshots__/button_group.test.tsx.snap  | 162 +++++++++++-------
 .../button/button_group/_button_group.scss    |  46 +++--
 .../button/button_group/button_group.tsx      |  10 +-
 .../button_group/button_group_button.tsx      |  10 +-
 .../overrides/_button_group.scss              |   9 +-
 5 files changed, 146 insertions(+), 91 deletions(-)

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 4a06bd48fbe..04c0b8d347c 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
@@ -2,7 +2,7 @@
 
 exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -10,10 +10,11 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -33,6 +34,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
     >
@@ -51,6 +53,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -75,7 +78,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
 
 exports[`EuiButtonGroup button props buttonSize compressed is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -83,7 +86,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -161,7 +164,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
 
 exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -169,10 +172,11 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -192,6 +196,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text"
       id="button01"
     >
@@ -210,6 +215,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -234,7 +240,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -242,7 +248,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -320,7 +326,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -328,10 +334,11 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -351,6 +358,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
     >
@@ -369,6 +377,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -393,7 +402,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -401,7 +410,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -479,7 +488,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -487,10 +496,11 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -510,6 +520,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
       id="button01"
     >
@@ -528,6 +539,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -552,7 +564,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -560,7 +572,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -638,7 +650,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -646,10 +658,11 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -669,6 +682,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
       id="button01"
     >
@@ -687,6 +701,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -711,7 +726,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -719,7 +734,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -797,7 +812,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -805,10 +820,11 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -828,6 +844,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
       id="button01"
     >
@@ -846,6 +863,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -870,7 +888,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color primary is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -878,7 +896,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -956,7 +974,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
 
 exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--secondary"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -964,10 +982,11 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--secondary"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -987,6 +1006,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
       id="button01"
     >
@@ -1005,6 +1025,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -1029,7 +1050,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
 
 exports[`EuiButtonGroup button props color secondary is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--secondary"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1037,7 +1058,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--secondary"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -1115,7 +1136,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
 
 exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1123,10 +1144,11 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -1146,6 +1168,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
     >
@@ -1164,6 +1187,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -1188,7 +1212,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1196,7 +1220,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -1274,7 +1298,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1282,10 +1306,11 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -1305,6 +1330,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
       id="button01"
     >
@@ -1323,6 +1349,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -1347,7 +1374,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color warning is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1355,7 +1382,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -1433,7 +1460,8 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
 
 exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
+  disabled=""
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1441,10 +1469,11 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled testClass1 testClass2"
       data-test-subj="test subject string"
       disabled=""
@@ -1465,6 +1494,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button01"
@@ -1484,6 +1514,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -1508,7 +1539,8 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
+  disabled=""
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1516,7 +1548,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
@@ -1586,7 +1618,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset euiButtonGroup__fieldset--fullWidth"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1594,10 +1626,11 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -1617,6 +1650,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
     >
@@ -1635,6 +1669,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -1659,7 +1694,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset euiButtonGroup__fieldset--fullWidth"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1667,7 +1702,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -1745,7 +1780,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1753,10 +1788,11 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -1776,6 +1812,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
       id="button01"
     >
@@ -1794,6 +1831,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
       disabled=""
       id="button02"
@@ -1818,7 +1856,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1826,7 +1864,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -1904,7 +1942,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props selection idSelected is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1912,7 +1950,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
@@ -1991,7 +2029,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
 
 exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -1999,7 +2037,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
     test
   </legend>
   <div
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
@@ -2042,6 +2080,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -2066,7 +2105,9 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
 
 exports[`EuiButtonGroup type multi is rendered 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  aria-label="aria-label"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+  data-test-subj="test subject string"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -2074,12 +2115,11 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup__buttons"
   >
     <button
       aria-label="aria-label"
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
       id="button00"
@@ -2099,6 +2139,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
       id="button01"
     >
@@ -2117,6 +2158,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       </span>
     </button>
     <button
+      aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
       disabled=""
       id="button02"
@@ -2141,7 +2183,9 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
 
 exports[`EuiButtonGroup type single is rendered 1`] = `
 <fieldset
-  class="euiButtonGroup__fieldset"
+  aria-label="aria-label"
+  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+  data-test-subj="test subject string"
 >
   <legend
     class="euiScreenReaderOnly"
@@ -2149,9 +2193,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
     test
   </legend>
   <div
-    aria-label="aria-label"
-    class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
-    data-test-subj="test subject string"
+    class="euiButtonGroup__buttons"
   >
     <label
       aria-label="aria-label"
diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index 4e83e3295f8..1047b94e9ee 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -1,38 +1,45 @@
-.euiButtonGroup__fieldset {
+.euiButtonGroup {
   display: inline-block;
   max-width: 100%;
-
-  &--fullWidth {
-    display: block;
-  }
 }
 
 .euiButtonGroup--fullWidth {
-  width: 100%;
+  display: block;
 
-  .euiButtonGroupButton {
-    flex: 1;
+  .euiButtonGroup__buttons {
+    width: 100%;
+
+    .euiButtonGroupButton {
+      flex: 1;
+    }
   }
 }
 
-.euiButtonGroup {
+.euiButtonGroup__buttons {
   @include euiSlightShadow;
   border-radius: $euiBorderRadius + 1px; // Simply for the box-shadow
-
   max-width: 100%;
   display: flex;
   overflow: hidden;
   transition: all $euiAnimSpeedNormal ease-in-out;
 
-  &:not(.euiButtonGroup--isDisabled) {
-    &:hover,
-    &:active,
-    &:focus-within {
-      @include euiSlightShadowHover;
-    }
+  &:hover,
+  &:active,
+  &:focus-within {
+    @include euiSlightShadowHover;
   }
+}
+
+.euiButtonGroup--isDisabled .euiButtonGroup__buttons {
+  &:hover,
+  &:active,
+  &:focus-within {
+    box-shadow: none !important; // sass-lint:disable-line no-important
+  }
+}
 
-  &--compressed {
+.euiButtonGroup--compressed {
+  .euiButtonGroup__buttons {
     box-shadow: none !important; // sass-lint:disable-line no-important
     border-radius: $euiFormControlCompressedBorderRadius;
     background-color: $euiFormBackgroundColor;
@@ -40,4 +47,9 @@
     border: 1px solid $euiFormBorderColor;
     overflow: visible;
   }
+
+  .euiButtonGroupButton {
+    // Add 2 to the border radius to account for the background-clip
+    border-radius: $euiFormControlCompressedBorderRadius + 2;
+  }
 }
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 5848da42bdc..03e553b9a66 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -114,7 +114,7 @@ export type EuiButtonGroupProps = CommonProps & {
     }
   );
 
-type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
+type Props = Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange'> &
   EuiButtonGroupProps;
 
 const groupSizeToClassNameMap = {
@@ -159,19 +159,15 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
     className
   );
 
-  const fieldsetClasses = classNames('euiButtonGroup__fieldset', {
-    'euiButtonGroup__fieldset--fullWidth': isFullWidth,
-  });
-
   const typeIsSingle = type === 'single';
 
   return (
-    <fieldset className={fieldsetClasses}>
+    <fieldset className={classes} {...rest} disabled={isDisabled}>
       <EuiScreenReaderOnly>
         <legend>{legend}</legend>
       </EuiScreenReaderOnly>
 
-      <div className={classes} {...rest}>
+      <div className="euiButtonGroup__buttons">
         {options.map((option, index) => {
           return (
             <EuiButtonGroupButton
diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx
index 379ef7fc8a5..f1efcaf488d 100644
--- a/src/components/button/button_group/button_group_button.tsx
+++ b/src/components/button/button_group/button_group_button.tsx
@@ -26,6 +26,10 @@ import {
 } from './button_group';
 
 type Props = EuiButtonGroupOptionProps & {
+  /**
+   * Element to display based on single or multi
+   */
+  type: 'button' | 'label';
   /**
    * Styles the selected button to look selected (usually with `fill`)
    */
@@ -38,10 +42,6 @@ type Props = EuiButtonGroupOptionProps & {
    * The value of the radio input for 'single'.
    */
   value?: string;
-  /**
-   * Element to display based on single or multi
-   */
-  type: 'button' | 'label';
   /**
    * Props to inherit from the group
    */
@@ -56,7 +56,7 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
   id,
   isDisabled,
   isIconOnly,
-  isSelected,
+  isSelected = false,
   label,
   name,
   onChange,
diff --git a/src/themes/eui-amsterdam/overrides/_button_group.scss b/src/themes/eui-amsterdam/overrides/_button_group.scss
index 667c1494bed..33cf0d61501 100644
--- a/src/themes/eui-amsterdam/overrides/_button_group.scss
+++ b/src/themes/eui-amsterdam/overrides/_button_group.scss
@@ -1,4 +1,4 @@
-.euiButtonGroup {
+.euiButtonGroup__buttons {
   box-shadow: none !important; // sass-lint:disable-line no-important
 }
 
@@ -37,8 +37,13 @@
   }
 }
 
-.euiButtonGroup--small {
+.euiButtonGroup--small .euiButtonGroup__buttons {
   // Use a moderately smaller radius on small buttons
   // so that they don't appear completely rounded
   border-radius: $euiBorderRadius * .667;
 }
+
+.euiButtonGroup--compressed .euiButtonGroupButton {
+  // Add 1 to the border radius to account for the background-clip
+  border-radius: $euiFormControlCompressedBorderRadius + 1;
+}

From 98969d87f89dca75a4f3cc1726e18e1277f1da4e Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Sat, 19 Sep 2020 17:12:43 -0400
Subject: [PATCH 19/34] Adding text shift to button and fix DataGrid usage

and other tests
---
 .../eslint-plugin/rules/href_or_on_click.js   |   6 +-
 src-docs/src/views/button/playground.js       |   1 -
 .../__snapshots__/skip_link.test.tsx.snap     |  12 +-
 src/components/button/button.tsx              |  21 +--
 src/components/button/button_content.tsx      |   8 +-
 .../__snapshots__/button_group.test.tsx.snap  | 156 +++++++++---------
 .../button_group/_button_group_button.scss    |   4 +
 .../button/button_group/button_group.tsx      |  76 +++++----
 .../button_group/button_group_button.tsx      |  19 ++-
 src/components/button/index.ts                |   2 +-
 .../__snapshots__/control_bar.test.tsx.snap   |  42 +++++
 .../datagrid/column_sorting_draggable.tsx     |   2 +
 src/components/datagrid/data_grid.test.tsx    |  11 +-
 13 files changed, 210 insertions(+), 150 deletions(-)

diff --git a/packages/eslint-plugin/rules/href_or_on_click.js b/packages/eslint-plugin/rules/href_or_on_click.js
index e0533fa9455..e0960ae1f65 100644
--- a/packages/eslint-plugin/rules/href_or_on_click.js
+++ b/packages/eslint-plugin/rules/href_or_on_click.js
@@ -1,4 +1,4 @@
-const componentNames = ['EuiButton', 'EuiButtonEmpty', 'EuiLink'];
+const componentNames = ['EuiButton', 'EuiButtonEmpty', 'EuiLink', 'EuiBadge'];
 
 module.exports = {
   meta: {
@@ -24,9 +24,7 @@ module.exports = {
         if (hasHref && hasOnClick) {
           context.report(
             node,
-            `<${
-              node.name.name
-            }> accepts either \`href\` or \`onClick\`, not both.`
+            `<${node.name.name}> accepts either \`href\` or \`onClick\`, not both.`
           );
         }
       },
diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
index 91950b9b415..98891eda414 100644
--- a/src-docs/src/views/button/playground.js
+++ b/src-docs/src/views/button/playground.js
@@ -4,7 +4,6 @@ import {
   propUtilityForPlayground,
   iconValidator,
 } from '../../services/playground';
-import { number } from 'prop-types';
 
 export default () => {
   const docgenInfo = Array.isArray(EuiButton.__docgenInfo)
diff --git a/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
index 5a12b3e9c5c..2f03a9a93e3 100644
--- a/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
+++ b/src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiSkipLink is rendered 1`] = `
 <a
   aria-label="aria-label"
-  class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static testClass1 testClass2 euiButton--fill"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static testClass1 testClass2"
   data-test-subj="test subject string"
   href="#somewhere"
   rel="noreferrer"
@@ -22,7 +22,7 @@ exports[`EuiSkipLink is rendered 1`] = `
 
 exports[`EuiSkipLink props onClick is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static euiButton--fill"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -38,7 +38,7 @@ exports[`EuiSkipLink props onClick is rendered 1`] = `
 
 exports[`EuiSkipLink props position absolute is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--absolute euiButton--fill"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--absolute"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -54,7 +54,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `
 
 exports[`EuiSkipLink props position fixed is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--fixed euiButton--fill"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--fixed"
   href="#somewhere"
   rel="noreferrer"
   tabindex="0"
@@ -71,7 +71,7 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `
 
 exports[`EuiSkipLink props position static is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static euiButton--fill"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -87,7 +87,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = `
 
 exports[`EuiSkipLink props tabIndex is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static euiButton--fill"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink euiSkipLink--static"
   href="#somewhere"
   rel="noreferrer"
   tabindex="-1"
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index b29bd32bc13..bfdc73ca98e 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -115,16 +115,17 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
   style?: CSSProperties;
 }
 
-export type EuiButtonDisplayProps = EuiButtonProps & HTMLAttributes<HTMLElement> & {
-  /**
-   * Provide a valid element to render the element as
-   */
-  element: 'a' | 'button' | 'span' | 'label';
-  /**
-   * Provide the component's base class name to build the class list on
-   */
-  baseClassName: string;
-}
+export type EuiButtonDisplayProps = EuiButtonProps &
+  HTMLAttributes<HTMLElement> & {
+    /**
+     * Provide a valid element to render the element as
+     */
+    element: 'a' | 'button' | 'span' | 'label';
+    /**
+     * Provide the component's base class name to build the class list on
+     */
+    baseClassName: string;
+  };
 
 /**
  * *INTERNAL ONLY*
diff --git a/src/components/button/button_content.tsx b/src/components/button/button_content.tsx
index cb51a88bcd6..525f1b8dc17 100644
--- a/src/components/button/button_content.tsx
+++ b/src/components/button/button_content.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { HTMLAttributes, FunctionComponent } from 'react';
+import React, { HTMLAttributes, FunctionComponent, Ref } from 'react';
 import classNames from 'classnames';
 import { CommonProps, keysOf } from '../common';
 import { EuiLoadingSpinner } from '../loading';
@@ -53,7 +53,11 @@ export interface EuiButtonContentProps extends CommonProps {
   /**
    * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
    */
-  textProps?: HTMLAttributes<HTMLSpanElement> & CommonProps;
+  textProps?: HTMLAttributes<HTMLSpanElement> &
+    CommonProps & {
+      ref?: Ref<HTMLSpanElement>;
+      'data-text'?: string;
+    };
 }
 
 export const EuiButtonContent: FunctionComponent<
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 04c0b8d347c..61fc6c20ee2 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
@@ -27,7 +27,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -46,7 +46,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -66,7 +66,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -102,7 +102,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -126,7 +126,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -152,7 +152,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -189,7 +189,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -208,7 +208,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -228,7 +228,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -264,7 +264,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -288,7 +288,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -314,7 +314,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -351,7 +351,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -370,7 +370,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -390,7 +390,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -426,7 +426,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -450,7 +450,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -476,7 +476,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -513,7 +513,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -532,7 +532,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -552,7 +552,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -588,7 +588,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -612,7 +612,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -638,7 +638,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -675,7 +675,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -694,7 +694,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -714,7 +714,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -750,7 +750,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -774,7 +774,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -800,7 +800,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -837,7 +837,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -856,7 +856,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -876,7 +876,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -912,7 +912,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -936,7 +936,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -962,7 +962,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -999,7 +999,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -1018,7 +1018,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -1038,7 +1038,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -1074,7 +1074,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1098,7 +1098,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1124,7 +1124,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -1161,7 +1161,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -1180,7 +1180,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -1200,7 +1200,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -1236,7 +1236,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1260,7 +1260,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1286,7 +1286,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -1323,7 +1323,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -1342,7 +1342,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -1362,7 +1362,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -1398,7 +1398,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1422,7 +1422,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1448,7 +1448,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -1487,7 +1487,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -1507,7 +1507,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -1527,7 +1527,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -1566,7 +1566,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -1586,7 +1586,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -1606,7 +1606,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -1643,7 +1643,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -1662,7 +1662,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -1682,7 +1682,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -1718,7 +1718,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1742,7 +1742,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1768,7 +1768,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -1966,7 +1966,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             checked=""
@@ -1991,7 +1991,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -2017,7 +2017,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -2054,7 +2054,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -2073,7 +2073,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -2093,7 +2093,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -2132,7 +2132,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option one
         </span>
@@ -2151,7 +2151,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option two
         </span>
@@ -2171,7 +2171,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
@@ -2209,7 +2209,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -2233,7 +2233,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           <input
             class="euiScreenReaderOnly"
@@ -2259,7 +2259,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text"
+          class="euiButton__text euiButtonGroupButton__textShift"
         >
           Option three
         </span>
diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss
index 8c3c45ca8fe..cd6433f7752 100644
--- a/src/components/button/button_group/_button_group_button.scss
+++ b/src/components/button/button_group/_button_group_button.scss
@@ -51,6 +51,10 @@
   }
 }
 
+.euiButtonGroupButton__textShift {
+  @include euiTextShift;
+}
+
 /**
  * Medium and Small sizing (regular button style)
  */
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 03e553b9a66..a602193865f 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -23,9 +23,11 @@ import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroupButton } from './button_group_button';
 import { colorToClassNameMap, ButtonColor } from '../button';
 import { EuiButtonContentProps } from '../button_content';
-import { CommonProps } from 'src/components/common';
+import { CommonProps } from '../../common';
 
-export interface EuiButtonGroupOptionProps extends EuiButtonContentProps, CommonProps {
+export interface EuiButtonGroupOptionProps
+  extends EuiButtonContentProps,
+    CommonProps {
   /**
    * Each option must have a unique `id` for maintaining selection
    */
@@ -39,7 +41,7 @@ export interface EuiButtonGroupOptionProps extends EuiButtonContentProps, Common
    * The value of the radio input.
    */
   value?: any;
-};
+}
 
 export type EuiButtonGroupProps = CommonProps & {
   /**
@@ -80,38 +82,38 @@ export type EuiButtonGroupProps = CommonProps & {
   options: EuiButtonGroupOptionProps[];
 } & (
     | {
-      type: 'single';
-      /**
-       * The `name` attribute for radio inputs;
-       * Required for keeping keyboard navigation contained within the group
-       */
-      name: string;
-      /**
-       * Styles the selected option to look selected (usually with `fill`)
-       * Only used in `type='single'`.
-       */
-      idSelected: string;
-      /**
-       * Returns the `id` of the clicked option and the `value`
-       * (`value` only in `type='single'`)
-       */
-      onChange: (id: string, value?: any) => void;
-      idToSelectedMap?: never;
-    }
+        // type: 'single';
+        /**
+         * The `name` attribute for radio inputs;
+         * Required for keeping keyboard navigation contained within the group
+         */
+        name: string;
+        /**
+         * Styles the selected option to look selected (usually with `fill`)
+         * Only used in `type='single'`.
+         */
+        idSelected: string;
+        /**
+         * Returns the `id` of the clicked option and the `value`
+         * (`value` only in `type='single'`)
+         */
+        onChange: (id: string, value?: any) => void;
+        idToSelectedMap?: never;
+      }
     | {
-      type: 'multi';
-      /**
-       * A map of `id`s as keys with the selected boolean values.
-       * Only used in `type='multi'`.
-       */
-      idToSelectedMap?: { [id: string]: boolean };
-      /**
-       * Returns the `id` of the clicked option
-       */
-      onChange: (id: string) => void;
-      idSelected?: never;
-      name?: never;
-    }
+        type: 'multi';
+        /**
+         * A map of `id`s as keys with the selected boolean values.
+         * Only used in `type='multi'`.
+         */
+        idToSelectedMap?: { [id: string]: boolean };
+        /**
+         * Returns the `id` of the clicked option
+         */
+        onChange: (id: string) => void;
+        idSelected?: never;
+        name?: never;
+      }
   );
 
 type Props = Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange'> &
@@ -176,7 +178,11 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
               isDisabled={isDisabled}
               {...(option as EuiButtonGroupOptionProps)}
               type={typeIsSingle ? 'label' : 'button'}
-              isSelected={typeIsSingle ? option.id === idSelected : idToSelectedMap[option.id]}
+              isSelected={
+                typeIsSingle
+                  ? option.id === idSelected
+                  : idToSelectedMap[option.id]
+              }
               color={resolvedColor}
               size={buttonSize}
               isIconOnly={isIconOnly}
diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx
index f1efcaf488d..2dde452ad6f 100644
--- a/src/components/button/button_group/button_group_button.tsx
+++ b/src/components/button/button_group/button_group_button.tsx
@@ -20,10 +20,8 @@
 import classNames from 'classnames';
 import React, { FunctionComponent } from 'react';
 import { EuiButtonDisplay } from '../button';
-import {
-  EuiButtonGroupOptionProps,
-  EuiButtonGroupProps,
-} from './button_group';
+import { EuiButtonGroupOptionProps, EuiButtonGroupProps } from './button_group';
+import { useInnerText } from '../../inner_text';
 
 type Props = EuiButtonGroupOptionProps & {
   /**
@@ -74,7 +72,7 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
     elementProps = {
       ...elementProps,
       htmlFor: id,
-      onClick: () => onChange(id, value)
+      onClick: () => onChange(id, value),
     };
     singleInput = (
       <input
@@ -94,7 +92,7 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
       id,
       'aria-pressed': isSelected,
       onClick: () => onChange(id),
-    }
+    };
   }
 
   const buttonClasses = classNames(
@@ -105,6 +103,8 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
     className
   );
 
+  const [buttonTextRef, innerText] = useInnerText();
+
   return (
     <EuiButtonDisplay
       baseClassName="euiButtonGroupButton"
@@ -114,7 +114,12 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
       isDisabled={isDisabled}
       size={size === 'compressed' ? 's' : size}
       textProps={{
-        className: isIconOnly ? 'euiScreenReaderOnly' : undefined,
+        className: isIconOnly
+          ? 'euiScreenReaderOnly'
+          : 'euiButtonGroupButton__textShift',
+        ref: buttonTextRef,
+        'data-text': innerText,
+        title: innerText,
       }}
       {...elementProps}
       {...rest}>
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index 68189c28425..cd7d5f4af07 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -43,6 +43,6 @@ export { EuiButtonToggle, EuiButtonToggleProps } from './button_toggle';
 
 export {
   EuiButtonGroup,
-  EuiButtonGroupOption,
+  EuiButtonGroupOptionProps,
   EuiButtonGroupProps,
 } from './button_group';
diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
index 1008506cfd0..47388bb5679 100644
--- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
+++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -300,6 +300,7 @@ exports[`EuiControlBar props leftOffset is rendered 1`] = `
               size="s"
             >
               <EuiButtonDisplay
+                baseClassName="euiButton"
                 className="euiControlBar__button"
                 color="ghost"
                 data-test-subj="dts"
@@ -312,6 +313,11 @@ exports[`EuiControlBar props leftOffset is rendered 1`] = `
                   className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
                   data-test-subj="dts"
                   onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
                   type="button"
                 >
                   <EuiButtonContent
@@ -615,6 +621,7 @@ exports[`EuiControlBar props maxHeight is rendered 1`] = `
               size="s"
             >
               <EuiButtonDisplay
+                baseClassName="euiButton"
                 className="euiControlBar__button"
                 color="ghost"
                 data-test-subj="dts"
@@ -627,6 +634,11 @@ exports[`EuiControlBar props maxHeight is rendered 1`] = `
                   className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
                   data-test-subj="dts"
                   onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
                   type="button"
                 >
                   <EuiButtonContent
@@ -929,6 +941,7 @@ exports[`EuiControlBar props mobile is rendered 1`] = `
               size="s"
             >
               <EuiButtonDisplay
+                baseClassName="euiButton"
                 className="euiControlBar__button"
                 color="ghost"
                 data-test-subj="dts"
@@ -941,6 +954,11 @@ exports[`EuiControlBar props mobile is rendered 1`] = `
                   className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
                   data-test-subj="dts"
                   onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
                   type="button"
                 >
                   <EuiButtonContent
@@ -1156,6 +1174,7 @@ exports[`EuiControlBar props position is rendered 1`] = `
           size="s"
         >
           <EuiButtonDisplay
+            baseClassName="euiButton"
             className="euiControlBar__button"
             color="ghost"
             data-test-subj="dts"
@@ -1168,6 +1187,11 @@ exports[`EuiControlBar props position is rendered 1`] = `
               className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
               data-test-subj="dts"
               onClick={[Function]}
+              style={
+                Object {
+                  "minWidth": undefined,
+                }
+              }
               type="button"
             >
               <EuiButtonContent
@@ -1455,6 +1479,7 @@ exports[`EuiControlBar props rightOffset is rendered 1`] = `
               size="s"
             >
               <EuiButtonDisplay
+                baseClassName="euiButton"
                 className="euiControlBar__button"
                 color="ghost"
                 data-test-subj="dts"
@@ -1467,6 +1492,11 @@ exports[`EuiControlBar props rightOffset is rendered 1`] = `
                   className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
                   data-test-subj="dts"
                   onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
                   type="button"
                 >
                   <EuiButtonContent
@@ -1774,6 +1804,7 @@ exports[`EuiControlBar props showContent is rendered 1`] = `
               size="s"
             >
               <EuiButtonDisplay
+                baseClassName="euiButton"
                 className="euiControlBar__button"
                 color="ghost"
                 data-test-subj="dts"
@@ -1786,6 +1817,11 @@ exports[`EuiControlBar props showContent is rendered 1`] = `
                   className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
                   data-test-subj="dts"
                   onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
                   type="button"
                 >
                   <EuiButtonContent
@@ -2093,6 +2129,7 @@ exports[`EuiControlBar props size is rendered 1`] = `
               size="s"
             >
               <EuiButtonDisplay
+                baseClassName="euiButton"
                 className="euiControlBar__button"
                 color="ghost"
                 data-test-subj="dts"
@@ -2105,6 +2142,11 @@ exports[`EuiControlBar props size is rendered 1`] = `
                   className="euiButton euiButton--ghost euiButton--small euiControlBar__button"
                   data-test-subj="dts"
                   onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
                   type="button"
                 >
                   <EuiButtonContent
diff --git a/src/components/datagrid/column_sorting_draggable.tsx b/src/components/datagrid/column_sorting_draggable.tsx
index de9517d69c3..4978fd9ca74 100644
--- a/src/components/datagrid/column_sorting_draggable.tsx
+++ b/src/components/datagrid/column_sorting_draggable.tsx
@@ -162,6 +162,8 @@ export const EuiDataGridColumnSortingDraggable: FunctionComponent<EuiDataGridCol
                 {(toggleLegend: ReactChild) => (
                   <EuiButtonGroup
                     legend={`${toggleLegend} ${id}`}
+                    name={id}
+                    isFullWidth
                     options={toggleOptions}
                     data-test-subj={`-${direction}`}
                     buttonSize="compressed"
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 87cdc9d364e..b0082c0df4e 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -178,10 +178,9 @@ function getColumnSortDirection(
   }
 
   expect(columnSorter.length).toBe(1);
-  const activeSort = columnSorter
-    .find('button[className*="euiButtonGroup__button--selected"]')
-    .closest('EuiToggle')
-    .find('input[className*="euiButtonToggle__input"]');
+  const activeSort = columnSorter.find(
+    'label[className*="euiButtonGroupButton-isSelected"]'
+  );
 
   const sortDirection = (activeSort.props() as {
     'data-test-subj': string;
@@ -266,10 +265,10 @@ function sortByColumn(
 
   if (currentSortDirection !== direction) {
     const sortButton = columnSorter.find(
-      `input[data-test-subj="euiDataGridColumnSorting-sortColumn-${columnId}-${direction}"]`
+      `label[data-test-subj="euiDataGridColumnSorting-sortColumn-${columnId}-${direction}"]`
     );
     expect(sortButton.length).toBe(1);
-    sortButton.simulate('change', [undefined, direction]);
+    sortButton.find('input').simulate('change', [undefined, direction]);
   }
 
   closeColumnSorter(datagrid);

From 1fdaf8c21c34f9727407b0fddceb0a5e6ac70779 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Sat, 19 Sep 2020 17:47:23 -0400
Subject: [PATCH 20/34] [Breaking] Removing EuiToggle

---
 src-docs/src/routes.js                        |   3 -
 src-docs/src/views/toggle/playground.js       |  48 --------
 src-docs/src/views/toggle/toggle.js           |  19 ---
 src-docs/src/views/toggle/toggle_example.js   |  76 ------------
 src/components/index.js                       |   2 -
 src/components/index.scss                     |   1 -
 .../toggle/__snapshots__/toggle.test.tsx.snap |  71 ------------
 src/components/toggle/_index.scss             |   1 -
 src/components/toggle/_toggle.scss            |  12 --
 src/components/toggle/index.ts                |  20 ----
 src/components/toggle/toggle.test.tsx         |  75 ------------
 src/components/toggle/toggle.tsx              | 108 ------------------
 12 files changed, 436 deletions(-)
 delete mode 100644 src-docs/src/views/toggle/playground.js
 delete mode 100644 src-docs/src/views/toggle/toggle.js
 delete mode 100644 src-docs/src/views/toggle/toggle_example.js
 delete mode 100644 src/components/toggle/__snapshots__/toggle.test.tsx.snap
 delete mode 100644 src/components/toggle/_index.scss
 delete mode 100644 src/components/toggle/_toggle.scss
 delete mode 100644 src/components/toggle/index.ts
 delete mode 100644 src/components/toggle/toggle.test.tsx
 delete mode 100644 src/components/toggle/toggle.tsx

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 2e361642dd5..0261f3558a3 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -204,8 +204,6 @@ import { ToastExample } from './views/toast/toast_example';
 
 import { ToolTipExample } from './views/tool_tip/tool_tip_example';
 
-import { ToggleExample } from './views/toggle/toggle_example';
-
 import { TourExample } from './views/tour/tour_example';
 
 import { WindowEventExample } from './views/window_event/window_event_example';
@@ -468,7 +466,6 @@ const navigation = [
       ResizeObserverExample,
       ResponsiveExample,
       TextDiffExample,
-      ToggleExample,
       WindowEventExample,
     ].map((example) => createExample(example)),
   },
diff --git a/src-docs/src/views/toggle/playground.js b/src-docs/src/views/toggle/playground.js
deleted file mode 100644
index 978d46cbd47..00000000000
--- a/src-docs/src/views/toggle/playground.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { PropTypes } from 'react-view';
-import { EuiToggle } from '../../../../src/components/';
-import {
-  propUtilityForPlayground,
-  dummyFunction,
-  simulateFunction,
-} from '../../services/playground';
-
-export const toggleConfig = () => {
-  const docgenInfo = Array.isArray(EuiToggle.__docgenInfo)
-    ? EuiToggle.__docgenInfo[0]
-    : EuiToggle.__docgenInfo;
-  const propsToUse = propUtilityForPlayground(docgenInfo.props);
-
-  propsToUse.label.value = 'Is toggle on?';
-  propsToUse.checked.stateful = true;
-  propsToUse.children = {
-    ...propsToUse.children,
-    type: PropTypes.ReactNode,
-    value: "{checked ? 'On' : 'Off'}",
-    hidden: false,
-  };
-
-  propsToUse.value = {
-    ...propsToUse.value,
-    type: PropTypes.String,
-  };
-
-  propsToUse.onChange = simulateFunction(propsToUse.onChange);
-
-  return {
-    config: {
-      componentName: 'EuiToggle',
-      props: propsToUse,
-      scope: {
-        EuiToggle,
-      },
-      imports: {
-        '@elastic/eui': {
-          named: ['EuiToggle'],
-        },
-      },
-      customProps: {
-        onChange: dummyFunction,
-      },
-    },
-  };
-};
diff --git a/src-docs/src/views/toggle/toggle.js b/src-docs/src/views/toggle/toggle.js
deleted file mode 100644
index 04375eac8db..00000000000
--- a/src-docs/src/views/toggle/toggle.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { useState } from 'react';
-
-import { EuiToggle } from '../../../../src/components';
-
-export default function () {
-  const [toggleOn, setToggleValue] = useState(false);
-
-  const onToggleChange = (e) => {
-    setToggleValue(e.target.checked);
-  };
-
-  return (
-    <div>
-      <EuiToggle onChange={(e) => onToggleChange(e)} label="Is toggle on?">
-        {toggleOn ? 'On' : 'Off'}
-      </EuiToggle>
-    </div>
-  );
-}
diff --git a/src-docs/src/views/toggle/toggle_example.js b/src-docs/src/views/toggle/toggle_example.js
deleted file mode 100644
index fee1d3a06a6..00000000000
--- a/src-docs/src/views/toggle/toggle_example.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-
-import { Link } from 'react-router-dom';
-
-import { renderToHtml } from '../../services';
-
-import { GuideSectionTypes } from '../../components';
-
-import { EuiCode, EuiToggle, EuiCallOut } from '../../../../src/components';
-
-import { toggleConfig } from './playground';
-
-import Toggle from './toggle';
-const toggleSource = require('!!raw-loader!./toggle');
-const toggleHtml = renderToHtml(Toggle);
-const toggleSnippet = [
-  `<EuiToggle
-  onChange={onToggleChange}
-  label="Is toggle on?"
->
-  {toggleOn ? 'On' : 'Off'}
-</EuiToggle>`,
-];
-
-export const ToggleExample = {
-  title: 'Toggle',
-  sections: [
-    {
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: toggleSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: toggleHtml,
-        },
-      ],
-      text: (
-        <div>
-          <p>
-            The <strong>EuiToggle</strong> component is a very simplified
-            utility for creating toggle-able elements. There is only an on/off
-            (checked/unchecked) state. All this creates is a visibly hidden
-            input (checkbox or radio) overtop of the children provided.
-          </p>
-          <p>
-            By default, the children will be wrapped in a block element. To
-            change the display you can simply use one of the{' '}
-            <Link to="/utilities/css-utility-classes">utility classes</Link>{' '}
-            like <EuiCode>.eui-displayInlineBlock</EuiCode>.
-          </p>
-          <EuiCallOut
-            iconType="accessibility"
-            color="warning"
-            title={
-              <span>
-                This utility is just a helper component and comes with no
-                inherit styles including no <EuiCode>:hover</EuiCode> or{' '}
-                <EuiCode>:focus</EuiCode> states. If you use this utility
-                directly, be sure to add these states. Otherwise, you may just
-                want to utilize the{' '}
-                <Link to="/navigation/button">EuiButtonToggle</Link> component.
-              </span>
-            }
-          />
-        </div>
-      ),
-      components: { EuiToggle },
-      snippet: toggleSnippet,
-      demo: <Toggle />,
-      props: { EuiToggle },
-    },
-  ],
-  playground: toggleConfig,
-};
diff --git a/src/components/index.js b/src/components/index.js
index 837b3aa3291..6f8f59cbc1e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -336,8 +336,6 @@ export { EuiTitle } from './title';
 
 export { EuiGlobalToastList, EuiGlobalToastListItem, EuiToast } from './toast';
 
-export { EuiToggle } from './toggle';
-
 export { EuiIconTip, EuiToolTip } from './tool_tip';
 
 export { EuiHideFor, EuiShowFor } from './responsive';
diff --git a/src/components/index.scss b/src/components/index.scss
index 877310d0022..82b119075d1 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -67,7 +67,6 @@
 @import 'title/index';
 @import 'toast/index';
 @import 'token/index';
-@import 'toggle/index';
 @import 'tool_tip/index';
 @import 'tour/index';
 @import 'text/index';
diff --git a/src/components/toggle/__snapshots__/toggle.test.tsx.snap b/src/components/toggle/__snapshots__/toggle.test.tsx.snap
deleted file mode 100644
index 633f9960588..00000000000
--- a/src/components/toggle/__snapshots__/toggle.test.tsx.snap
+++ /dev/null
@@ -1,71 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiToggle is rendered 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiToggle testClass1 testClass2"
->
-  <input
-    aria-label="Is toggle on?"
-    class="euiToggle__input"
-    data-test-subj="test subject string"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`EuiToggle props checked is rendered 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiToggle euiToggle--checked testClass1 testClass2"
->
-  <input
-    aria-label="Is toggle on?"
-    checked=""
-    class="euiToggle__input"
-    data-test-subj="test subject string"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`EuiToggle props isDisabled is rendered 1`] = `
-<div
-  class="euiToggle"
->
-  <input
-    aria-label="Is toggle on?"
-    class="euiToggle__input"
-    disabled=""
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`EuiToggle props onChange is rendered 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiToggle testClass1 testClass2"
->
-  <input
-    aria-label="Is toggle on?"
-    class="euiToggle__input"
-    data-test-subj="test subject string"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`EuiToggle props type is rendered 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiToggle testClass1 testClass2"
->
-  <input
-    aria-label="Is toggle on?"
-    class="euiToggle__input"
-    data-test-subj="test subject string"
-    type="radio"
-  />
-</div>
-`;
diff --git a/src/components/toggle/_index.scss b/src/components/toggle/_index.scss
deleted file mode 100644
index a7f5cb8c186..00000000000
--- a/src/components/toggle/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'toggle';
diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss
deleted file mode 100644
index ae37badaa33..00000000000
--- a/src/components/toggle/_toggle.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.euiToggle {
-  position: relative;
-
-  .euiToggle__input {
-    @include euiHiddenSelectableInput;
-    z-index: 1; // Increase z-index to ensure the input receives the pointer events
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-}
diff --git a/src/components/toggle/index.ts b/src/components/toggle/index.ts
deleted file mode 100644
index ca8545c5b54..00000000000
--- a/src/components/toggle/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export { EuiToggle, ToggleType, TYPES as TOGGLE_TYPES } from './toggle';
diff --git a/src/components/toggle/toggle.test.tsx b/src/components/toggle/toggle.test.tsx
deleted file mode 100644
index e67948cb987..00000000000
--- a/src/components/toggle/toggle.test.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { EuiToggle } from './toggle';
-
-describe('EuiToggle', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiToggle label="Is toggle on?" {...requiredProps} />
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  describe('props', () => {
-    test('isDisabled is rendered', () => {
-      const component = render(<EuiToggle label="Is toggle on?" isDisabled />);
-
-      expect(component).toMatchSnapshot();
-    });
-
-    test('onChange is rendered', () => {
-      const component = render(
-        <EuiToggle
-          label="Is toggle on?"
-          onChange={jest.fn()}
-          {...requiredProps}
-        />
-      );
-
-      expect(component).toMatchSnapshot();
-    });
-
-    test('type is rendered', () => {
-      const component = render(
-        <EuiToggle label="Is toggle on?" type="single" {...requiredProps} />
-      );
-
-      expect(component).toMatchSnapshot();
-    });
-
-    test('checked is rendered', () => {
-      const component = render(
-        <EuiToggle
-          label="Is toggle on?"
-          checked
-          {...requiredProps}
-          onChange={jest.fn()}
-        />
-      );
-
-      expect(component).toMatchSnapshot();
-    });
-  });
-});
diff --git a/src/components/toggle/toggle.tsx b/src/components/toggle/toggle.tsx
deleted file mode 100644
index 00766e027e5..00000000000
--- a/src/components/toggle/toggle.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React, { ChangeEventHandler, HTMLAttributes, SFC } from 'react';
-import classNames from 'classnames';
-import { CommonProps } from '../common';
-
-const typeToInputTypeMap = {
-  single: 'radio',
-  multi: 'checkbox',
-};
-
-export const TYPES = Object.keys(typeToInputTypeMap);
-
-export type ToggleType = keyof typeof typeToInputTypeMap;
-
-export type EuiToggleProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
-  CommonProps & {
-    id?: string;
-    /**
-     * Initial state of the toggle
-     */
-    checked?: boolean;
-    /**
-     * For handling the onChange event of the input
-     */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    isDisabled?: boolean;
-    name?: string;
-    /**
-     * Determines the input type based on multiple or single item(s)
-     */
-    type?: ToggleType;
-    /**
-     * What would typically be the input's label. Required for accessibility.
-     */
-    label: string;
-    /**
-     * Additional classNames for the input itself
-     */
-    inputClassName?: string;
-    value?: string | number;
-  };
-
-export const EuiToggle: SFC<EuiToggleProps> = ({
-  id,
-  className,
-  checked,
-  children,
-  inputClassName,
-  isDisabled,
-  label,
-  name,
-  onChange,
-  title,
-  type,
-  value,
-  'data-test-subj': dataTestSubj,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiToggle',
-    { 'euiToggle--checked': checked },
-    className
-  );
-
-  const inputClasses = classNames('euiToggle__input', inputClassName);
-
-  return (
-    <div className={classes} {...rest}>
-      <input
-        id={id}
-        className={inputClasses}
-        aria-label={label}
-        checked={checked}
-        disabled={isDisabled}
-        name={name}
-        onChange={onChange}
-        title={title}
-        type={type ? typeToInputTypeMap[type] : undefined}
-        value={value}
-        data-test-subj={dataTestSubj}
-      />
-
-      {children}
-    </div>
-  );
-};
-
-EuiToggle.defaultProps = {
-  type: 'multi',
-};

From 5edd2fc0aa1b1a2b9c047082b12a407217fab48d Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Sat, 19 Sep 2020 18:30:15 -0400
Subject: [PATCH 21/34] [Break] Change functionality of EuiButtonToggle

---
 src-docs/src/views/button/button_example.js   | 118 ++++++++++-----
 src-docs/src/views/button/button_ghost.js     |   4 +-
 src-docs/src/views/button/button_group.js     |   2 +-
 src-docs/src/views/button/button_toggle.js    |  88 +++++------
 .../views/collapsible_nav/collapsible_nav.tsx |   8 +-
 src/components/button/button.tsx              |   4 +-
 .../__snapshots__/button_toggle.test.tsx.snap |  74 ++++++---
 .../button_toggle/button_toggle.test.tsx      |  22 ++-
 .../button/button_toggle/button_toggle.tsx    | 141 ++----------------
 9 files changed, 217 insertions(+), 244 deletions(-)

diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index b3da5d90849..f200c7ae169 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -10,9 +10,10 @@ import {
   EuiButtonIcon,
   EuiCode,
   EuiButtonGroup,
-  EuiButtonToggle,
+  EuiSpacer,
   EuiCallOut,
   EuiText,
+  EuiButtonToggle,
 } from '../../../../src/components';
 
 import { EuiButtonGroupOptionProps } from '!!prop-loader!../../../../src/components/button/button_group/button_group';
@@ -83,30 +84,59 @@ const buttonLoadingSnippet = `<EuiButton isLoading={true}>
 import ButtonToggle from './button_toggle';
 const buttonToggleSource = require('!!raw-loader!./button_toggle');
 const buttonToggleHtml = renderToHtml(ButtonToggle);
-const buttonToggleSnippet = `<EuiButtonToggle
-  label={label}
+const buttonToggleSnippet = [
+  `<EuiButton
   iconType={toggleOn ? onIcon : offIcon}
+  onClick={onToggleChange}
+>
+  {toggleOn ? onLabel : offLabel}
+</EuiButton>
+`,
+  `<EuiButton
+  aria-pressed={toggleOn}
+  fill={toggleOn}
   onChange={onToggleChange}
+>
+  <!-- Button text -->
+</EuiButton>`,
+  `<EuiButtonToggle
   isSelected={toggleOn}
-/>`;
+  onChange={onToggleChange}
+>
+  <!-- Button text -->
+</EuiButtonToggle>`,
+];
 
 import ButtonGroup from './button_group';
 const buttonGroupSource = require('!!raw-loader!./button_group');
 const buttonGroupHtml = renderToHtml(ButtonGroup);
 const buttonGroupSnippet = [
   `<EuiButtonGroup
+  type="single"
   legend={legend}
-  options={toggleButtons}
-  idSelected={toggleIdSelected}
-  onChange={onChange}
+  name={name}
+  options={[
+    {
+      id,
+      label'
+    }
+  ]}
+  idSelected={idSelected}
+  onChange={(optionId) => {}}
 />`,
   `<EuiButtonGroup
-  legend={legend}
-  options={toggleButtonsIconsMulti}
-  idToSelectedMap={toggleIconIdToSelectedMap}
-  onChange={onChangeIconsMulti}
   type="multi"
   isIconOnly
+  legend={legend}
+  options={[
+    {
+      id,
+      label,
+      iconType,
+    }
+  ]}
+  idToSelectedMap={{ optionId: true }}
+  onChange={(optionId, optionValue) => {}}
 />`,
 ];
 
@@ -293,22 +323,43 @@ export const ButtonExample = {
         },
       ],
       text: (
-        <div>
+        <>
+          <EuiCallOut
+            color="warning"
+            title={
+              <span>
+                <strong>EuiButtonToggle</strong> has drastically reduced in
+                functionality. See below for details.
+              </span>
+            }
+          />
+          <EuiSpacer size="m" />
           <p>
-            This is a specialized component that combines{' '}
-            <strong>EuiButton</strong> and <strong>EuiToggle</strong> to create
-            a button with an on/off state. You can pass all the same parameters
-            to it as you can to <strong>EuiButton</strong>. The main difference
-            is that, it does not accept any children, but a{' '}
-            <EuiCode>label</EuiCode> prop instead. This is for the handling of
-            accessibility with the <strong>EuiToggle</strong>.
+            You can create a toggle style button with any button type like the
+            standard <strong>EuiButton</strong>, <strong>EuiButtonEmpty</strong>
+            , or <strong>EuiButtonIcon</strong>. Use state management to handle
+            the visual differences for on and off. Though there are two
+            situations to consider.
           </p>
+          <ul>
+            <li>
+              If your button changes its <strong>content</strong>, the text
+              and/or icon, then there is no additional accessibility concern.
+            </li>
+            <li>
+              If your button only changes the <strong>visual</strong>{' '}
+              appearance, you must add <EuiCode>aria-pressed</EuiCode> passing a
+              boolean for the on and off states.
+            </li>
+          </ul>
           <p>
-            The <strong>EuiButtonToggle</strong> does not have any inherit
-            visual state differences. These you must apply in your
-            implementation.
+            You can use <strong>EuiButtonToggle</strong> for the second
+            situation and provide a boolean to <EuiCode>isSelected</EuiCode>. It
+            is simply a helping wrapper of <strong>EuiButton</strong> to provide
+            the <EuiCode>fill</EuiCode> and <EuiCode>aria-pressed</EuiCode>{' '}
+            props based on <EuiCode>isSelected</EuiCode>.
           </p>
-        </div>
+        </>
       ),
       demo: <ButtonToggle />,
       snippet: buttonToggleSnippet,
@@ -329,19 +380,11 @@ export const ButtonExample = {
       text: (
         <div>
           <p>
-            <strong>EuiButtonGroups</strong> are handled similarly to the way
-            checkbox and radio groups are handled but made to look like buttons.
-            They group multiple <strong>EuiButtonToggles</strong> and utilize
-            the <EuiCode language="js">type=&quot;single&quot;</EuiCode> or{' '}
+            <strong>EuiButtonGroups</strong> utilize the{' '}
+            <EuiCode language="js">type=&quot;single&quot;</EuiCode> or{' '}
             <EuiCode language="js">&quot;multi&quot;</EuiCode> prop to determine
-            whether multiple or only single selections are allowed per group.
-          </p>
-          <p>
-            Stylistically, all button groups are the size of small buttons, do
-            not stretch to fill the container, and typically should only be{' '}
-            <EuiCode language="js">color=&quot;text&quot;</EuiCode> (default) or{' '}
-            <EuiCode language="js">&quot;primary&quot;</EuiCode>. If you&apos;re
-            just displaying a group of icons, add the prop{' '}
+            whether multiple or only single selections are allowed per group. If
+            you&apos;re just displaying a group of icons, add the prop{' '}
             <EuiCode>isIconOnly</EuiCode>.
           </p>
           <EuiCallOut
@@ -350,8 +393,9 @@ export const ButtonExample = {
             title={
               <span>
                 In order for groups to be properly read as groups with a title,
-                add the <EuiCode>legend</EuiCode> prop. This is only for
-                accessibility, however, so it will be visibly hidden.
+                the <EuiCode>legend</EuiCode> prop is <strong>required</strong>.
+                This is only for accessibility, however, so it will be visibly
+                hidden.
               </span>
             }
           />
diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
index 8b7be264463..f42ac43ed2c 100644
--- a/src-docs/src/views/button/button_ghost.js
+++ b/src-docs/src/views/button/button_ghost.js
@@ -13,7 +13,7 @@ import {
 export default () => {
   const [toggle0On, setToggle0On] = useState(false);
 
-  const onToggle0Change = (e) => {
+  const onToggle0Change = e => {
     setToggle0On(e.target.checked);
   };
 
@@ -74,7 +74,7 @@ export default () => {
           <EuiButtonToggle
             color="ghost"
             label="Toggle Me"
-            fill={toggle0On}
+            isSelected={toggle0On}
             onChange={onToggle0Change}
           />
         </EuiFlexItem>
diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index 0f1337433d7..065700585f5 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -4,10 +4,10 @@ import {
   EuiButtonGroup,
   EuiSpacer,
   EuiTitle,
+  EuiPanel,
 } from '../../../../src/components';
 
 import { htmlIdGenerator } from '../../../../src/services';
-import { EuiPanel } from '../../../../src/components/panel/panel';
 
 const idPrefix = htmlIdGenerator()();
 const idPrefix2 = htmlIdGenerator()();
diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js
index a40928829b0..8eb8041e77d 100644
--- a/src-docs/src/views/button/button_toggle.js
+++ b/src-docs/src/views/button/button_toggle.js
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 
 import {
+  EuiButton,
+  EuiButtonIcon,
   EuiButtonToggle,
   EuiSpacer,
   EuiTitle,
@@ -8,65 +10,55 @@ import {
 
 export default () => {
   const [toggle0On, setToggle0On] = useState(false);
-  const [toggle1On, setToggle1On] = useState(false);
-  const toggle2On = false;
-  const toggle3On = true;
-  const [toggle4On, setToggle4On] = useState(true);
-
-  const onToggle0Change = (e) => {
-    setToggle0On(e.target.checked);
-  };
-
-  const onToggle1Change = (e) => {
-    setToggle1On(e.target.checked);
-  };
-
-  const onToggle4Change = (e) => {
-    setToggle4On(e.target.checked);
-  };
+  const [toggle1On, setToggle1On] = useState(true);
+  const [toggle2On, setToggle2On] = useState(true);
+  const [toggle3On, setToggle3On] = useState(false);
 
   return (
-    <div>
-      <EuiButtonToggle
-        label="Toggle Me"
-        iconType={toggle0On ? 'starPlusEmpty' : 'starFilledSpace'}
-        onChange={onToggle0Change}
-        isSelected={toggle0On}
-      />
-      &emsp;
-      <EuiButtonToggle
-        label={toggle1On ? "I'm a filled toggle" : "I'm a primary toggle"}
-        fill={toggle1On}
-        onChange={onToggle1Change}
-        isSelected={toggle1On}
-      />
+    <>
+      <EuiTitle size="xxs">
+        <h3>Changing content</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiButton
+        onClick={() => {
+          setToggle0On(!toggle0On);
+        }}>
+        {toggle0On ? 'Hey there good lookin' : 'Toggle me'}
+      </EuiButton>
       &emsp;
-      <EuiButtonToggle
-        label="Toggle Me"
-        iconType={toggle4On ? 'eye' : 'eyeClosed'}
-        onChange={onToggle4Change}
-        isSelected={toggle4On}
-        isEmpty
-        isIconOnly
+      <EuiButtonIcon
+        title={toggle1On ? 'Play' : 'Pause'}
+        aria-label={toggle1On ? 'Play' : 'Pause'}
+        iconType={toggle1On ? 'play' : 'pause'}
+        onClick={() => {
+          setToggle1On(!toggle1On);
+        }}
       />
       <EuiSpacer size="m" />
       <EuiTitle size="xxs">
-        <h3>Disabled</h3>
+        <h3>Changing visual appearance</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
       <EuiButtonToggle
-        isDisabled
-        label="Can't toggle this"
-        fill={toggle2On}
         isSelected={toggle2On}
-      />
+        iconType={toggle2On ? 'starPlusEmpty' : 'starFilledSpace'}
+        onClick={() => {
+          setToggle2On(!toggle2On);
+        }}>
+        Toggle me
+      </EuiButtonToggle>
       &emsp;
-      <EuiButtonToggle
-        isDisabled
-        label="Can't toggle this either"
-        fill={toggle3On}
-        isSelected={toggle3On}
+      <EuiButtonIcon
+        aria-label="Autosave"
+        title="Autosave"
+        iconType="save"
+        aria-pressed={toggle3On}
+        color={toggle3On ? 'primary' : 'subdued'}
+        onClick={() => {
+          setToggle3On(!toggle3On);
+        }}
       />
-    </div>
+    </>
   );
 };
diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav.tsx
index cfe4cdc50a8..96ec6fe286f 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav.tsx
@@ -28,12 +28,10 @@ export default () => {
           </EuiTitle>
           <EuiSpacer />
           <EuiButtonToggle
-            label={`Docked: ${navIsDocked ? 'on' : 'off'}`}
-            fill={navIsDocked}
-            onChange={() => {
+            isSelected={navIsDocked}
+            onClick={() => {
               setNavIsDocked(!navIsDocked);
-            }}
-          />
+            }}>{`Docked: ${navIsDocked ? 'on' : 'off'}`}</EuiButtonToggle>
         </div>
       </EuiCollapsibleNav>
 
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index bfdc73ca98e..d01cae73e3e 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -222,14 +222,14 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
 EuiButtonDisplay.displayName = 'EuiButtonDisplay';
 export { EuiButtonDisplay };
 
-type EuiButtonPropsForAnchor = PropsForAnchor<
+export type EuiButtonPropsForAnchor = PropsForAnchor<
   EuiButtonProps,
   {
     buttonRef?: Ref<HTMLAnchorElement>;
   }
 >;
 
-type EuiButtonPropsForButton = PropsForButton<
+export type EuiButtonPropsForButton = PropsForButton<
   EuiButtonProps,
   {
     buttonRef?: Ref<HTMLButtonElement>;
diff --git a/src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap b/src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap
index 5293306c543..caa8afcb657 100644
--- a/src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap
+++ b/src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap
@@ -1,31 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiButtonToggle extends button props like color 1`] = `
+<button
+  aria-label="aria-label"
+  aria-pressed="false"
+  class="euiButton euiButton--danger testClass1 testClass2"
+  data-test-subj="test subject string"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButton__content"
+  >
+    <span
+      class="euiButton__text"
+    >
+      Toggle
+    </span>
+  </span>
+</button>
+`;
+
 exports[`EuiButtonToggle is rendered 1`] = `
-<div
-  class="euiToggle euiButtonToggle__wrapper"
+<button
+  aria-label="aria-label"
+  aria-pressed="false"
+  class="euiButton euiButton--primary testClass1 testClass2"
+  data-test-subj="test subject string"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButton__content"
+  >
+    <span
+      class="euiButton__text"
+    >
+      Toggle
+    </span>
+  </span>
+</button>
+`;
+
+exports[`EuiButtonToggle isSelected is rendered 1`] = `
+<button
+  aria-label="aria-label"
+  aria-pressed="true"
+  class="euiButton euiButton--primary euiButton--fill testClass1 testClass2"
+  data-test-subj="test subject string"
+  type="button"
 >
-  <input
-    aria-label="Label me"
-    class="euiToggle__input euiButtonToggle__input"
-    data-test-subj="test subject string"
-    title="Label me"
-    type="checkbox"
-  />
-  <button
-    aria-label="aria-label"
-    class="euiButton euiButton--primary euiButtonToggle testClass1 testClass2"
-    tabindex="-1"
-    type="button"
+  <span
+    class="euiButtonContent euiButton__content"
   >
     <span
-      class="euiButtonContent euiButton__content"
+      class="euiButton__text"
     >
-      <span
-        class="euiButton__text"
-      >
-        Label me
-      </span>
+      Toggle
     </span>
-  </button>
-</div>
+  </span>
+</button>
 `;
diff --git a/src/components/button/button_toggle/button_toggle.test.tsx b/src/components/button/button_toggle/button_toggle.test.tsx
index 1111772511f..3427888e6d4 100644
--- a/src/components/button/button_toggle/button_toggle.test.tsx
+++ b/src/components/button/button_toggle/button_toggle.test.tsx
@@ -26,7 +26,27 @@ import { EuiButtonToggle } from './button_toggle';
 describe('EuiButtonToggle', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiButtonToggle {...requiredProps} label="Label me" />
+      <EuiButtonToggle {...requiredProps}>Toggle</EuiButtonToggle>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('isSelected is rendered', () => {
+    const component = render(
+      <EuiButtonToggle {...requiredProps} isSelected={true}>
+        Toggle
+      </EuiButtonToggle>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('extends button props like color', () => {
+    const component = render(
+      <EuiButtonToggle {...requiredProps} color="danger">
+        Toggle
+      </EuiButtonToggle>
     );
 
     expect(component).toMatchSnapshot();
diff --git a/src/components/button/button_toggle/button_toggle.tsx b/src/components/button/button_toggle/button_toggle.tsx
index cf086c90730..4eab7483d0c 100644
--- a/src/components/button/button_toggle/button_toggle.tsx
+++ b/src/components/button/button_toggle/button_toggle.tsx
@@ -17,142 +17,31 @@
  * under the License.
  */
 
-import React, {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  ChangeEventHandler,
-  FunctionComponent,
-  MouseEventHandler,
-  ReactNode,
-} from 'react';
-import classNames from 'classnames';
-import { CommonProps, ExclusiveUnion } from '../../common';
+import React, { FunctionComponent } from 'react';
 
-import { EuiToggle, ToggleType } from '../../toggle';
-import { EuiButton, EuiButtonProps } from '../button';
-import { useRenderToText } from '../../inner_text/render_to_text';
-
-export interface EuiButtonToggleProps extends EuiButtonProps, CommonProps {
-  /**
-   * Simulates a `EuiButtonEmpty`
-   */
-  isEmpty?: boolean;
-
-  /**
-   * Hides the label from the button content and only displays the icon
-   */
-  isIconOnly?: boolean;
+import { EuiButton, EuiButtonPropsForButton } from '../button';
 
+/**
+ * Extend EuiButtonProps but only for <button> type props because toggles can't be links.
+ */
+export interface EuiButtonToggleProps extends EuiButtonPropsForButton {
   /**
    * Initial state of the toggle
    */
   isSelected?: boolean;
-
-  /**
-   * Button label, which is also passed to `EuiToggle` as the input's label
-   */
-  label: ReactNode;
-
-  /**
-   * Classnames to add to `EuiToggle` instead of the `EuiButton`
-   */
-  toggleClassName?: string;
-
-  /**
-   * Is the button a single action or part of a group (multi)?
-   * Used primarily for `EuiButtonGroup`
-   */
-  type?: ToggleType;
-
-  onChange?: ChangeEventHandler<HTMLInputElement>;
 }
 
-type EuiButtonTogglePropsForAnchor = EuiButtonToggleProps &
-  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'name' | 'href' | 'onClick'> & {
-    href?: string;
-    name?: string;
-    onClick?: MouseEventHandler<HTMLAnchorElement>;
-  };
-
-type EuiButtonTogglePropsForButtonToggle = EuiButtonToggleProps &
-  Omit<
-    ButtonHTMLAttributes<HTMLButtonElement>,
-    'name' | 'onClick' | 'value'
-  > & {
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    name?: string;
-    value?: string;
-  };
-
-type Props = ExclusiveUnion<
-  EuiButtonTogglePropsForAnchor,
-  EuiButtonTogglePropsForButtonToggle
->;
-
-export const EuiButtonToggle: FunctionComponent<Props> = ({
-  className,
-  color = 'primary',
-  isDisabled,
-  isEmpty,
-  isIconOnly,
-  isSelected,
-  label,
-  name,
-  onChange,
-  toggleClassName,
-  type,
-  value,
-  'data-test-subj': dataTestSubj,
+/**
+ * A simple wrapper around EuiButton with helpers for selected state
+ */
+export const EuiButtonToggle: FunctionComponent<EuiButtonToggleProps> = ({
+  isSelected = false,
+  children,
   ...rest
 }) => {
-  const classes = classNames(
-    'euiButtonToggle',
-    {
-      'euiButtonToggle--isIconOnly': isIconOnly,
-      'euiButtonToggle--isEmpty': isEmpty,
-    },
-    className
-  );
-
-  const wrapperClasses = classNames(
-    'euiButtonToggle__wrapper',
-    {
-      'euiButtonToggle--isDisabled': isDisabled,
-    },
-    toggleClassName
-  );
-
-  const buttonContent = isIconOnly ? '' : label;
-  const labelText = useRenderToText(
-    label,
-    typeof label === 'string' ? label : ''
-  );
-
   return (
-    <EuiToggle
-      className={wrapperClasses}
-      inputClassName="euiButtonToggle__input"
-      checked={isSelected}
-      isDisabled={isDisabled}
-      label={labelText}
-      name={name}
-      onChange={onChange}
-      type={type}
-      title={labelText}
-      value={value}
-      data-test-subj={dataTestSubj}>
-      <EuiButton
-        tabIndex={-1} // prevents double focus from input to button
-        className={classes}
-        color={color}
-        disabled={isDisabled}
-        size={isIconOnly ? 's' : undefined} // only force small if it's the icon only version
-        {...(rest as Extract<
-          EuiButtonTogglePropsForAnchor,
-          EuiButtonTogglePropsForButtonToggle
-        >)}>
-        {buttonContent}
-      </EuiButton>
-    </EuiToggle>
+    <EuiButton fill={isSelected} aria-pressed={isSelected} {...rest}>
+      {children}
+    </EuiButton>
   );
 };

From 29dff4ce7889d3634b58cc277d92f4391b5c5d26 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 12 Oct 2020 15:30:53 -0400
Subject: [PATCH 22/34] Cleanup

---
 src-docs/src/views/button/button_ghost.js     |  10 +-
 src-docs/src/views/button/button_group.js     |  28 +--
 src/components/button/button.tsx              |   3 +-
 .../__snapshots__/button_group.test.tsx.snap  | 168 +++++++++---------
 .../button/button_group/button_group.test.tsx |   4 +-
 .../button/button_group/button_group.tsx      |  16 +-
 .../button_group/button_group_button.tsx      |  16 +-
 7 files changed, 130 insertions(+), 115 deletions(-)

diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
index f42ac43ed2c..87527673cc6 100644
--- a/src-docs/src/views/button/button_ghost.js
+++ b/src-docs/src/views/button/button_ghost.js
@@ -13,8 +13,8 @@ import {
 export default () => {
   const [toggle0On, setToggle0On] = useState(false);
 
-  const onToggle0Change = e => {
-    setToggle0On(e.target.checked);
+  const onToggle0Change = () => {
+    setToggle0On(!toggle0On);
   };
 
   return (
@@ -73,10 +73,10 @@ export default () => {
         <EuiFlexItem grow={false}>
           <EuiButtonToggle
             color="ghost"
-            label="Toggle Me"
             isSelected={toggle0On}
-            onChange={onToggle0Change}
-          />
+            onClick={onToggle0Change}>
+            Toggle me
+          </EuiButtonToggle>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index 065700585f5..9916c104de9 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -140,15 +140,15 @@ export default () => {
     `${idPrefix2}4`
   );
 
-  const onChange = optionId => {
+  const onChange = (optionId) => {
     setToggleIdSelected(optionId);
   };
 
-  const onChangeDisabled = optionId => {
+  const onChangeDisabled = (optionId) => {
     setToggleIdDisabled(optionId);
   };
 
-  const onChangeMulti = optionId => {
+  const onChangeMulti = (optionId) => {
     const newToggleIdToSelectedMap = {
       ...toggleIdToSelectedMap,
       ...{
@@ -158,15 +158,15 @@ export default () => {
     setToggleIdToSelectedMap(newToggleIdToSelectedMap);
   };
 
-  const onChangeIcons = optionId => {
+  const onChangeIcons = (optionId) => {
     setToggleIconIdSelected(optionId);
   };
 
-  const onChangeCompressed = optionId => {
+  const onChangeCompressed = (optionId) => {
     setToggleCompressedIdSelected(optionId);
   };
 
-  const onChangeIconsMulti = optionId => {
+  const onChangeIconsMulti = (optionId) => {
     const newToggleIconIdToSelectedMap = {
       ...toggleIconIdToSelectedMap,
       ...{
@@ -177,7 +177,7 @@ export default () => {
     setToggleIconIdToSelectedMap(newToggleIconIdToSelectedMap);
   };
 
-  const onChangeIconsMultiIcons = optionId => {
+  const onChangeIconsMultiIcons = (optionId) => {
     const newToggleIconIdToSelectedMapIcon = {
       ...toggleIconIdToSelectedMapIcon,
       ...{
@@ -195,7 +195,7 @@ export default () => {
         name="basic"
         options={toggleButtons}
         idSelected={toggleIdSelected}
-        onChange={id => onChange(id)}
+        onChange={(id) => onChange(id)}
       />
       <EuiSpacer size="m" />
       <EuiTitle size="xxs">
@@ -206,7 +206,7 @@ export default () => {
         legend="This is a primary group"
         options={toggleButtonsMulti}
         idToSelectedMap={toggleIdToSelectedMap}
-        onChange={id => onChangeMulti(id)}
+        onChange={(id) => onChangeMulti(id)}
         color="primary"
         type="multi"
       />
@@ -220,7 +220,7 @@ export default () => {
         name="disabledGroup"
         options={toggleButtonsDisabled}
         idSelected={toggleIdDisabled}
-        onChange={id => onChangeDisabled(id)}
+        onChange={(id) => onChangeDisabled(id)}
         buttonSize="m"
         isDisabled
         isFullWidth
@@ -235,7 +235,7 @@ export default () => {
         name="textAlign"
         options={toggleButtonsIcons}
         idSelected={toggleIconIdSelected}
-        onChange={id => onChangeIcons(id)}
+        onChange={(id) => onChangeIcons(id)}
         isIconOnly
       />
       &nbsp;&nbsp;
@@ -243,7 +243,7 @@ export default () => {
         legend="Text style"
         options={toggleButtonsIconsMulti}
         idToSelectedMap={toggleIconIdToSelectedMap}
-        onChange={id => onChangeIconsMulti(id)}
+        onChange={(id) => onChangeIconsMulti(id)}
         type="multi"
         isIconOnly
       />
@@ -261,7 +261,7 @@ export default () => {
           legend="This is a basic group"
           options={toggleButtonsCompressed}
           idSelected={toggleCompressedIdSelected}
-          onChange={id => onChangeCompressed(id)}
+          onChange={(id) => onChangeCompressed(id)}
           buttonSize="compressed"
           isFullWidth
         />
@@ -275,7 +275,7 @@ export default () => {
           className="eui-displayInlineBlock"
           options={toggleButtonsIconsMulti}
           idToSelectedMap={toggleIconIdToSelectedMapIcon}
-          onChange={id => onChangeIconsMultiIcons(id)}
+          onChange={(id) => onChangeIconsMultiIcons(id)}
           type="multi"
           buttonSize="compressed"
           isIconOnly
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index d01cae73e3e..53b656500fc 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -23,6 +23,7 @@ import React, {
   ButtonHTMLAttributes,
   CSSProperties,
   HTMLAttributes,
+  ReactNode,
 } from 'react';
 import classNames from 'classnames';
 
@@ -79,7 +80,7 @@ export const SIZES = keysOf(sizeToClassNameMap);
  * `iconType`, `iconSide`, and `textProps`
  */
 export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
-  // children?: ReactNode;
+  children?: ReactNode;
   /**
    * Make button a solid color for prominence
    */
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 61fc6c20ee2..0db6d7464d8 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
@@ -22,7 +22,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -41,7 +41,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -61,7 +61,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -97,7 +97,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -121,7 +121,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -147,7 +147,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -184,7 +184,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -203,7 +203,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -223,7 +223,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -259,7 +259,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -283,7 +283,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -309,7 +309,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -346,7 +346,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -365,7 +365,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -385,7 +385,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -421,7 +421,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -445,7 +445,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -471,7 +471,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -508,7 +508,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -527,7 +527,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -547,7 +547,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -583,7 +583,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -607,7 +607,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -633,7 +633,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -670,7 +670,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -689,7 +689,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -709,7 +709,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -745,7 +745,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -769,7 +769,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -795,7 +795,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -832,7 +832,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -851,7 +851,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -871,7 +871,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -907,7 +907,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -931,7 +931,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -957,7 +957,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -994,7 +994,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1013,7 +1013,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1033,7 +1033,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1069,7 +1069,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1093,7 +1093,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1119,7 +1119,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1156,7 +1156,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1175,7 +1175,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1195,7 +1195,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1231,7 +1231,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1255,7 +1255,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1281,7 +1281,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1318,7 +1318,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1337,7 +1337,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1357,7 +1357,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1393,7 +1393,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1417,7 +1417,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1443,7 +1443,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1482,7 +1482,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1502,7 +1502,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1522,7 +1522,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1561,7 +1561,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1581,7 +1581,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1601,7 +1601,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1638,7 +1638,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1657,7 +1657,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1677,7 +1677,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1713,7 +1713,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1737,7 +1737,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1763,7 +1763,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1800,7 +1800,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1819,7 +1819,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1839,7 +1839,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1875,7 +1875,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1899,7 +1899,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1925,7 +1925,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1961,7 +1961,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -1986,7 +1986,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -2012,7 +2012,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -2049,7 +2049,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -2068,7 +2068,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -2088,7 +2088,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -2127,7 +2127,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -2146,7 +2146,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -2166,7 +2166,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -2204,7 +2204,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -2228,7 +2228,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
@@ -2254,7 +2254,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       <span
         class="euiButtonContent euiButton__content"
       >
-        <div
+        <span
           class="euiButtonContent__icon"
           data-euiicon-type="bolt"
         />
diff --git a/src/components/button/button_group/button_group.test.tsx b/src/components/button/button_group/button_group.test.tsx
index 764b43f5bf9..0bfa03159f4 100644
--- a/src/components/button/button_group/button_group.test.tsx
+++ b/src/components/button/button_group/button_group.test.tsx
@@ -86,7 +86,7 @@ describe('EuiButtonGroup', () => {
 
   describe('button props', () => {
     describe('buttonSize', () => {
-      SIZES.forEach(size => {
+      SIZES.forEach((size) => {
         test(`${size} is rendered for single`, () => {
           const component = render(
             <EuiButtonGroup {...requiredSingleProps} buttonSize={size} />
@@ -156,7 +156,7 @@ describe('EuiButtonGroup', () => {
     });
 
     describe('color', () => {
-      COLORS.forEach(color => {
+      COLORS.forEach((color) => {
         test(`${color} is rendered for single`, () => {
           const component = render(
             <EuiButtonGroup {...requiredSingleProps} color={color} />
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index a602193865f..a9cb3114094 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -59,7 +59,6 @@ export type EuiButtonGroupProps = CommonProps & {
    * Hides the label to only show the `iconType` provided by the `option`
    */
   isIconOnly?: boolean;
-
   /**
    * A hidden group title (required for accessibility)
    */
@@ -75,14 +74,16 @@ export type EuiButtonGroupProps = CommonProps & {
    * With `'multi'` multiple options selected (similar to checkbox group).
    */
   type?: 'single' | 'multi';
-
   /**
    * An array of #EuiButtonGroupOptionProps
    */
   options: EuiButtonGroupOptionProps[];
 } & (
     | {
-        // type: 'single';
+        /**
+         * Default for `type` is single so it can also be excluded
+         */
+        type?: 'single';
         /**
          * The `name` attribute for radio inputs;
          * Required for keeping keyboard navigation contained within the group
@@ -90,12 +91,11 @@ export type EuiButtonGroupProps = CommonProps & {
         name: string;
         /**
          * Styles the selected option to look selected (usually with `fill`)
-         * Only used in `type='single'`.
+         * Required by and only used in `type='single'`.
          */
         idSelected: string;
         /**
-         * Returns the `id` of the clicked option and the `value`
-         * (`value` only in `type='single'`)
+         * Single: Returns the `id` of the clicked option and the `value`
          */
         onChange: (id: string, value?: any) => void;
         idToSelectedMap?: never;
@@ -104,11 +104,11 @@ export type EuiButtonGroupProps = CommonProps & {
         type: 'multi';
         /**
          * A map of `id`s as keys with the selected boolean values.
-         * Only used in `type='multi'`.
+         * Required by and only used in `type='multi'`.
          */
         idToSelectedMap?: { [id: string]: boolean };
         /**
-         * Returns the `id` of the clicked option
+         * Multi: Returns the `id` of the clicked option
          */
         onChange: (id: string) => void;
         idSelected?: never;
diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx
index 2dde452ad6f..1d1594928d0 100644
--- a/src/components/button/button_group/button_group_button.tsx
+++ b/src/components/button/button_group/button_group_button.tsx
@@ -41,11 +41,20 @@ type Props = EuiButtonGroupOptionProps & {
    */
   value?: string;
   /**
-   * Props to inherit from the group
+   * Inherit from EuiButtonGroup
    */
   color: EuiButtonGroupProps['color'];
+  /**
+   * Inherit from EuiButtonGroup
+   */
   size: EuiButtonGroupProps['buttonSize'];
+  /**
+   * Inherit from EuiButtonGroup
+   */
   isIconOnly: EuiButtonGroupProps['isIconOnly'];
+  /**
+   * Inherit from EuiButtonGroup
+   */
   onChange: EuiButtonGroupProps['onChange'];
 };
 
@@ -103,6 +112,11 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
     className
   );
 
+  /**
+   * Because the selected buttons also increase their text weight to 'bold',
+   * we don't want the whole button size to shift when selected, so we determine
+   * the base width of the button via the `euiTextShift()` method in SASS.
+   */
   const [buttonTextRef, innerText] = useInnerText();
 
   return (

From 469fd15642b7ca3f3a072b77ade2ce623a344092 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 13 Oct 2020 10:00:53 -0400
Subject: [PATCH 23/34] Fix some EuiButtonToggle instances

---
 src-docs/src/views/button/button_example.js               | 4 ++--
 src-docs/src/views/markdown_editor/markdown_editor.js     | 8 ++++----
 .../src/views/markdown_editor/markdown_editor_errors.js   | 8 ++++----
 .../views/markdown_editor/markdown_editor_with_plugins.js | 8 ++++----
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index f200c7ae169..1585cf786f6 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -95,13 +95,13 @@ const buttonToggleSnippet = [
   `<EuiButton
   aria-pressed={toggleOn}
   fill={toggleOn}
-  onChange={onToggleChange}
+  onClick={onToggleChange}
 >
   <!-- Button text -->
 </EuiButton>`,
   `<EuiButtonToggle
   isSelected={toggleOn}
-  onChange={onToggleChange}
+  onClick={onToggleChange}
 >
   <!-- Button text -->
 </EuiButtonToggle>`,
diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index 6b39ab149b8..9948aadd9db 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -60,13 +60,13 @@ export default () => {
       <EuiSpacer size="s" />
       <div className="eui-textRight">
         <EuiButtonToggle
-          label={isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
           size="s"
           isEmpty
           iconType={isAstShowing ? 'eyeClosed' : 'eye'}
-          onChange={() => setIsAstShowing(!isAstShowing)}
-          isSelected={isAstShowing}
-        />
+          onClick={() => setIsAstShowing(!isAstShowing)}
+          isSelected={isAstShowing}>
+          {isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
+        </EuiButtonToggle>
       </div>
       {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}
     </>
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_errors.js b/src-docs/src/views/markdown_editor/markdown_editor_errors.js
index 68c33fa1c45..1b3500474d6 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_errors.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_errors.js
@@ -54,13 +54,13 @@ export default () => {
 
       <div className="eui-textRight">
         <EuiButtonToggle
-          label={isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
           size="s"
           isEmpty
           iconType={isAstShowing ? 'eyeClosed' : 'eye'}
-          onChange={() => setIsAstShowing(!isAstShowing)}
-          isSelected={isAstShowing}
-        />
+          onClick={() => setIsAstShowing(!isAstShowing)}
+          isSelected={isAstShowing}>
+          {isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
+        </EuiButtonToggle>
       </div>
 
       {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index 574a4d5b1d7..aa9079514fa 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -296,13 +296,13 @@ export default () => {
       <EuiSpacer size="s" />
       <div className="eui-textRight">
         <EuiButtonToggle
-          label={isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
           size="s"
           isEmpty
           iconType={isAstShowing ? 'eyeClosed' : 'eye'}
-          onChange={() => setIsAstShowing(!isAstShowing)}
-          isSelected={isAstShowing}
-        />
+          onClick={() => setIsAstShowing(!isAstShowing)}
+          isSelected={isAstShowing}>
+          {isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
+        </EuiButtonToggle>
       </div>
       {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}
 

From b2ac2047c4a5c1d16a0a1f1ca94d80b411f51566 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 13 Oct 2020 17:59:21 -0400
Subject: [PATCH 24/34] Removing more extraneous EuiButtonToggle stuff

---
 .../views/markdown_editor/markdown_editor.js  |  1 -
 .../markdown_editor/markdown_editor_errors.js |  1 -
 .../markdown_editor_with_plugins.js           |  1 -
 src/components/button/_index.scss             |  1 -
 .../button/button_toggle/_button_toggle.scss  | 74 -------------------
 .../button/button_toggle/_index.scss          |  2 -
 .../button/button_toggle/_mixins.scss         | 12 ---
 7 files changed, 92 deletions(-)
 delete mode 100644 src/components/button/button_toggle/_button_toggle.scss
 delete mode 100644 src/components/button/button_toggle/_index.scss
 delete mode 100644 src/components/button/button_toggle/_mixins.scss

diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index 9948aadd9db..f445eefee76 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -61,7 +61,6 @@ export default () => {
       <div className="eui-textRight">
         <EuiButtonToggle
           size="s"
-          isEmpty
           iconType={isAstShowing ? 'eyeClosed' : 'eye'}
           onClick={() => setIsAstShowing(!isAstShowing)}
           isSelected={isAstShowing}>
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_errors.js b/src-docs/src/views/markdown_editor/markdown_editor_errors.js
index 1b3500474d6..9774f41a283 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_errors.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_errors.js
@@ -55,7 +55,6 @@ export default () => {
       <div className="eui-textRight">
         <EuiButtonToggle
           size="s"
-          isEmpty
           iconType={isAstShowing ? 'eyeClosed' : 'eye'}
           onClick={() => setIsAstShowing(!isAstShowing)}
           isSelected={isAstShowing}>
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index aa9079514fa..95b131d9c15 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -297,7 +297,6 @@ export default () => {
       <div className="eui-textRight">
         <EuiButtonToggle
           size="s"
-          isEmpty
           iconType={isAstShowing ? 'eyeClosed' : 'eye'}
           onClick={() => setIsAstShowing(!isAstShowing)}
           isSelected={isAstShowing}>
diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss
index 61a1784e7f4..9b32600f457 100644
--- a/src/components/button/_index.scss
+++ b/src/components/button/_index.scss
@@ -2,5 +2,4 @@
 @import 'button_content';
 @import 'button_empty/index';
 @import 'button_icon/index';
-@import 'button_toggle/index';
 @import 'button_group/index';
diff --git a/src/components/button/button_toggle/_button_toggle.scss b/src/components/button/button_toggle/_button_toggle.scss
deleted file mode 100644
index d6d33ea6745..00000000000
--- a/src/components/button/button_toggle/_button_toggle.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-
-.euiButtonToggle__wrapper {
-  display: inline-block;
-
-  // Transform the whole thing so that the button doesn't
-  // steal pointer events from input
-  &:not(.euiButtonToggle--isDisabled) {
-    transition: transform $euiAnimSpeedNormal $euiAnimSlightBounce;
-
-    &:hover {
-      transform: translateY(-1px);
-    }
-
-    &:focus {
-      animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
-    }
-
-    &:active {
-      transform: translateY(1px);
-    }
-  }
-}
-
-.euiButtonToggle {
-  @include euiButtonToggleStates {
-    text-decoration: underline;
-  }
-
-  &.euiButtonToggle--isIconOnly {
-    min-width: 0;
-
-    .euiButton__content {
-      padding: 0 $euiSizeS;
-    }
-
-    .euiButton__text:empty {
-      display: none;
-    }
-  }
-
-  &.euiButtonToggle--isEmpty {
-    border-color: transparent;
-    background-color: transparent;
-    box-shadow: none;
-  }
-}
-
-// Modifier naming and colors.
-$euiButtonToggleTypes: (
-  primary: $euiColorPrimary,
-  secondary: $euiColorSecondary,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
-  text: $euiColorDarkShade, // Reserved for special use cases
-);
-
-// Add hover states based on input state
-@each $name, $color in $euiButtonToggleTypes {
-  .euiButtonToggle[class*='#{$name}'] {
-    @include euiButtonToggleStates {
-      background-color: transparentize($color, .9);
-    }
-
-    // Not using the full button class here as it's targeting a different component,
-    // instead we know what the modifier is, so just look for that somewhere in the classNames
-    &[class*='fill'] {
-      @include euiButtonToggleStates {
-        background-color: darken($color, 5%);
-        border-color: darken($color, 5%);
-      }
-    }
-  }
-}
diff --git a/src/components/button/button_toggle/_index.scss b/src/components/button/button_toggle/_index.scss
deleted file mode 100644
index 9e43663b603..00000000000
--- a/src/components/button/button_toggle/_index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'mixins';
-@import 'button_toggle';
diff --git a/src/components/button/button_toggle/_mixins.scss b/src/components/button/button_toggle/_mixins.scss
deleted file mode 100644
index 6419334aa60..00000000000
--- a/src/components/button/button_toggle/_mixins.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// BUTTON TOGGLES
-// Pointer events and interactions are handled by the input (checkbox/radio)
-// and not the button, this mixin helps to target that element for states
-@mixin euiButtonToggleStates {
-  @at-root {
-    .euiButtonToggle__input:enabled:hover + #{&},
-    .euiButtonToggle__input:enabled:focus + #{&},
-    .euiButtonToggle__input:enabled:active + #{&} {
-      @content;
-    }
-  }
-}

From 2d5994f5d7d9ac52ec1ea429e8acc65777135036 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 13 Oct 2020 18:11:53 -0400
Subject: [PATCH 25/34] Switch to EuiButton

---
 src-docs/src/views/button/button_example.js           | 11 -----------
 .../src/views/collapsible_nav/collapsible_nav.tsx     |  9 +++++----
 src-docs/src/views/markdown_editor/markdown_editor.js |  8 ++++----
 .../views/markdown_editor/markdown_editor_errors.js   |  8 ++++----
 .../markdown_editor/markdown_editor_with_plugins.js   |  7 +++----
 5 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index 1585cf786f6..82e27df546d 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -10,7 +10,6 @@ import {
   EuiButtonIcon,
   EuiCode,
   EuiButtonGroup,
-  EuiSpacer,
   EuiCallOut,
   EuiText,
   EuiButtonToggle,
@@ -324,16 +323,6 @@ export const ButtonExample = {
       ],
       text: (
         <>
-          <EuiCallOut
-            color="warning"
-            title={
-              <span>
-                <strong>EuiButtonToggle</strong> has drastically reduced in
-                functionality. See below for details.
-              </span>
-            }
-          />
-          <EuiSpacer size="m" />
           <p>
             You can create a toggle style button with any button type like the
             standard <strong>EuiButton</strong>, <strong>EuiButtonEmpty</strong>
diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav.tsx
index 96ec6fe286f..bec9da37bea 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { EuiCollapsibleNav } from '../../../../src/components/collapsible_nav';
-import { EuiButton, EuiButtonToggle } from '../../../../src/components/button';
+import { EuiButton } from '../../../../src/components/button';
 import { EuiTitle } from '../../../../src/components/title';
 import { EuiSpacer } from '../../../../src/components/spacer';
 import { EuiText } from '../../../../src/components/text';
@@ -27,11 +27,12 @@ export default () => {
             <h2>I am some nav</h2>
           </EuiTitle>
           <EuiSpacer />
-          <EuiButtonToggle
-            isSelected={navIsDocked}
+          <EuiButton
             onClick={() => {
               setNavIsDocked(!navIsDocked);
-            }}>{`Docked: ${navIsDocked ? 'on' : 'off'}`}</EuiButtonToggle>
+            }}>
+            Docked: {navIsDocked ? 'on' : 'off'}
+          </EuiButton>
         </div>
       </EuiCollapsibleNav>
 
diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js
index f445eefee76..13fffa52f41 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor.js
@@ -4,7 +4,7 @@ import {
   EuiMarkdownEditor,
   EuiSpacer,
   EuiCodeBlock,
-  EuiButtonToggle,
+  EuiButton,
 } from '../../../../src/components';
 
 const initialContent = `## Hello world!
@@ -59,13 +59,13 @@ export default () => {
       />
       <EuiSpacer size="s" />
       <div className="eui-textRight">
-        <EuiButtonToggle
+        <EuiButton
           size="s"
           iconType={isAstShowing ? 'eyeClosed' : 'eye'}
           onClick={() => setIsAstShowing(!isAstShowing)}
-          isSelected={isAstShowing}>
+          fill={isAstShowing}>
           {isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
-        </EuiButtonToggle>
+        </EuiButton>
       </div>
       {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}
     </>
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_errors.js b/src-docs/src/views/markdown_editor/markdown_editor_errors.js
index 9774f41a283..2c44fce6eb9 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_errors.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_errors.js
@@ -6,7 +6,7 @@ import {
   EuiMarkdownEditor,
   EuiSpacer,
   EuiCodeBlock,
-  EuiButtonToggle,
+  EuiButton,
   EuiFormErrorText,
 } from '../../../../src/components';
 
@@ -53,13 +53,13 @@ export default () => {
       </EuiFormErrorText>
 
       <div className="eui-textRight">
-        <EuiButtonToggle
+        <EuiButton
           size="s"
           iconType={isAstShowing ? 'eyeClosed' : 'eye'}
           onClick={() => setIsAstShowing(!isAstShowing)}
-          isSelected={isAstShowing}>
+          fill={isAstShowing}>
           {isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
-        </EuiButtonToggle>
+        </EuiButton>
       </div>
 
       {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index 95b131d9c15..dc6aa29ba8b 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -17,7 +17,6 @@ import {
   EuiMarkdownFormat,
   EuiSpacer,
   EuiCodeBlock,
-  EuiButtonToggle,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiModalBody,
@@ -295,13 +294,13 @@ export default () => {
       />
       <EuiSpacer size="s" />
       <div className="eui-textRight">
-        <EuiButtonToggle
+        <EuiButton
           size="s"
           iconType={isAstShowing ? 'eyeClosed' : 'eye'}
           onClick={() => setIsAstShowing(!isAstShowing)}
-          isSelected={isAstShowing}>
+          fill={isAstShowing}>
           {isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
-        </EuiButtonToggle>
+        </EuiButton>
       </div>
       {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}
 

From 3b9666c2fb8ff5271a95578b7d615e1c6adc9178 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 13 Oct 2020 18:27:22 -0400
Subject: [PATCH 26/34] Make `name` optional

---
 src-docs/src/views/button/button_group.js           | 3 ---
 src/components/button/button_group/button_group.tsx | 8 +++++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index 9916c104de9..1d35a5980c1 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -192,7 +192,6 @@ export default () => {
     <Fragment>
       <EuiButtonGroup
         legend="This is a basic group"
-        name="basic"
         options={toggleButtons}
         idSelected={toggleIdSelected}
         onChange={(id) => onChange(id)}
@@ -217,7 +216,6 @@ export default () => {
       <EuiSpacer size="s" />
       <EuiButtonGroup
         legend="This is a disabled group"
-        name="disabledGroup"
         options={toggleButtonsDisabled}
         idSelected={toggleIdDisabled}
         onChange={(id) => onChangeDisabled(id)}
@@ -232,7 +230,6 @@ export default () => {
       <EuiSpacer size="s" />
       <EuiButtonGroup
         legend="Text align"
-        name="textAlign"
         options={toggleButtonsIcons}
         idSelected={toggleIconIdSelected}
         onChange={(id) => onChangeIcons(id)}
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index a9cb3114094..59d9f5c95f9 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -24,6 +24,7 @@ import { EuiButtonGroupButton } from './button_group_button';
 import { colorToClassNameMap, ButtonColor } from '../button';
 import { EuiButtonContentProps } from '../button_content';
 import { CommonProps } from '../../common';
+import { htmlIdGenerator } from '../../../services';
 
 export interface EuiButtonGroupOptionProps
   extends EuiButtonContentProps,
@@ -86,9 +87,9 @@ export type EuiButtonGroupProps = CommonProps & {
         type?: 'single';
         /**
          * The `name` attribute for radio inputs;
-         * Required for keeping keyboard navigation contained within the group
+         * Defaults to a random string
          */
-        name: string;
+        name?: string;
         /**
          * Styles the selected option to look selected (usually with `fill`)
          * Required by and only used in `type='single'`.
@@ -162,6 +163,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
   );
 
   const typeIsSingle = type === 'single';
+  const nameIfSingle = name || htmlIdGenerator()();
 
   return (
     <fieldset className={classes} {...rest} disabled={isDisabled}>
@@ -174,7 +176,7 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
           return (
             <EuiButtonGroupButton
               key={index}
-              name={name}
+              name={nameIfSingle}
               isDisabled={isDisabled}
               {...(option as EuiButtonGroupOptionProps)}
               type={typeIsSingle ? 'label' : 'button'}

From cda5ff8a9c8b913af1ca41675da098a36c87fe47 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 14 Oct 2020 17:49:45 -0400
Subject: [PATCH 27/34] [Breaking] Removed EuiButtonToggle in favor of
 EuiButton.isSelected

---
 src-docs/src/views/button/button_example.js   | 37 ++++++-----
 src-docs/src/views/button/button_ghost.js     |  8 +--
 src-docs/src/views/button/button_toggle.js    | 16 ++---
 .../button/__snapshots__/button.test.tsx.snap | 32 ++++++++++
 src/components/button/_index.scss             |  1 -
 src/components/button/button.test.tsx         | 14 +++++
 src/components/button/button.tsx              |  7 +++
 .../__snapshots__/button_toggle.test.tsx.snap | 61 -------------------
 .../button_toggle/button_toggle.test.tsx      | 54 ----------------
 .../button/button_toggle/button_toggle.tsx    | 47 --------------
 src/components/button/button_toggle/index.ts  | 20 ------
 src/components/button/index.ts                |  2 -
 src/components/index.js                       |  1 -
 src/global_styling/variables/_buttons.scss    |  1 -
 14 files changed, 87 insertions(+), 214 deletions(-)
 delete mode 100644 src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap
 delete mode 100644 src/components/button/button_toggle/button_toggle.test.tsx
 delete mode 100644 src/components/button/button_toggle/button_toggle.tsx
 delete mode 100644 src/components/button/button_toggle/index.ts

diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index 82e27df546d..bd9eec091bd 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -12,7 +12,6 @@ import {
   EuiButtonGroup,
   EuiCallOut,
   EuiText,
-  EuiButtonToggle,
 } from '../../../../src/components';
 
 import { EuiButtonGroupOptionProps } from '!!prop-loader!../../../../src/components/button/button_group/button_group';
@@ -98,12 +97,13 @@ const buttonToggleSnippet = [
 >
   <!-- Button text -->
 </EuiButton>`,
-  `<EuiButtonToggle
+  `<EuiButton
   isSelected={toggleOn}
+  fill={toggleOn}
   onClick={onToggleChange}
 >
   <!-- Button text -->
-</EuiButtonToggle>`,
+</EuiButton>`,
 ];
 
 import ButtonGroup from './button_group';
@@ -328,31 +328,38 @@ export const ButtonExample = {
             standard <strong>EuiButton</strong>, <strong>EuiButtonEmpty</strong>
             , or <strong>EuiButtonIcon</strong>. Use state management to handle
             the visual differences for on and off. Though there are two
-            situations to consider.
+            <strong>exclusive</strong> situations to consider.
           </p>
           <ul>
             <li>
-              If your button changes its <strong>content</strong>, the text
-              and/or icon, then there is no additional accessibility concern.
+              If your button changes its readable <strong>text</strong>, via
+              children or <EuiCode>aria-label</EuiCode>, then there is no
+              additional accessibility concern.
             </li>
             <li>
               If your button only changes the <strong>visual</strong>{' '}
               appearance, you must add <EuiCode>aria-pressed</EuiCode> passing a
-              boolean for the on and off states.
+              boolean for the on and off states. <strong>EuiButton</strong>{' '}
+              provides a helper prop for this called{' '}
+              <EuiCode>isSelected</EuiCode>.
             </li>
           </ul>
-          <p>
-            You can use <strong>EuiButtonToggle</strong> for the second
-            situation and provide a boolean to <EuiCode>isSelected</EuiCode>. It
-            is simply a helping wrapper of <strong>EuiButton</strong> to provide
-            the <EuiCode>fill</EuiCode> and <EuiCode>aria-pressed</EuiCode>{' '}
-            props based on <EuiCode>isSelected</EuiCode>.
-          </p>
+          <EuiCallOut
+            iconType="accessibility"
+            color="warning"
+            title={
+              <span>
+                Do not add <EuiCode>aria-pressed</EuiCode> or{' '}
+                <EuiCode>isSelected</EuiCode> if you also change the readable
+                text.
+              </span>
+            }
+          />
         </>
       ),
       demo: <ButtonToggle />,
       snippet: buttonToggleSnippet,
-      props: { EuiButtonToggle },
+      props: { EuiButton, EuiButtonIcon },
     },
     {
       title: 'Button groups',
diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
index 87527673cc6..eb163b85020 100644
--- a/src-docs/src/views/button/button_ghost.js
+++ b/src-docs/src/views/button/button_ghost.js
@@ -6,7 +6,6 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButtonToggle,
   EuiPanel,
 } from '../../../../src/components';
 
@@ -14,7 +13,7 @@ export default () => {
   const [toggle0On, setToggle0On] = useState(false);
 
   const onToggle0Change = () => {
-    setToggle0On(!toggle0On);
+    setToggle0On((isOn) => !isOn);
   };
 
   return (
@@ -71,12 +70,13 @@ export default () => {
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiButtonToggle
+          <EuiButton
             color="ghost"
             isSelected={toggle0On}
+            fill={toggle0On}
             onClick={onToggle0Change}>
             Toggle me
-          </EuiButtonToggle>
+          </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js
index 8eb8041e77d..73ebb24de43 100644
--- a/src-docs/src/views/button/button_toggle.js
+++ b/src-docs/src/views/button/button_toggle.js
@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 import {
   EuiButton,
   EuiButtonIcon,
-  EuiButtonToggle,
   EuiSpacer,
   EuiTitle,
 } from '../../../../src/components';
@@ -22,7 +21,7 @@ export default () => {
       <EuiSpacer size="s" />
       <EuiButton
         onClick={() => {
-          setToggle0On(!toggle0On);
+          setToggle0On((isOn) => !isOn);
         }}>
         {toggle0On ? 'Hey there good lookin' : 'Toggle me'}
       </EuiButton>
@@ -32,7 +31,7 @@ export default () => {
         aria-label={toggle1On ? 'Play' : 'Pause'}
         iconType={toggle1On ? 'play' : 'pause'}
         onClick={() => {
-          setToggle1On(!toggle1On);
+          setToggle1On((isOn) => !isOn);
         }}
       />
       <EuiSpacer size="m" />
@@ -40,14 +39,15 @@ export default () => {
         <h3>Changing visual appearance</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiButtonToggle
+      <EuiButton
         isSelected={toggle2On}
-        iconType={toggle2On ? 'starPlusEmpty' : 'starFilledSpace'}
+        fill={toggle2On}
+        iconType={toggle2On ? 'starFilledSpace' : 'starPlusEmpty'}
         onClick={() => {
-          setToggle2On(!toggle2On);
+          setToggle2On((isOn) => !isOn);
         }}>
         Toggle me
-      </EuiButtonToggle>
+      </EuiButton>
       &emsp;
       <EuiButtonIcon
         aria-label="Autosave"
@@ -56,7 +56,7 @@ export default () => {
         aria-pressed={toggle3On}
         color={toggle3On ? 'primary' : 'subdued'}
         onClick={() => {
-          setToggle3On(!toggle3On);
+          setToggle3On((isOn) => !isOn);
         }}
       />
     </>
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index 9793bcbde4d..fe417604d3f 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -303,6 +303,38 @@ exports[`EuiButton props isLoading is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButton props isSelected is rendered as false 1`] = `
+<button
+  aria-pressed="false"
+  class="euiButton euiButton--primary"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButton__content"
+  >
+    <span
+      class="euiButton__text"
+    />
+  </span>
+</button>
+`;
+
+exports[`EuiButton props isSelected is rendered as true 1`] = `
+<button
+  aria-pressed="true"
+  class="euiButton euiButton--primary"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButton__content"
+  >
+    <span
+      class="euiButton__text"
+    />
+  </span>
+</button>
+`;
+
 exports[`EuiButton props minWidth is rendered 1`] = `
 <button
   class="euiButton euiButton--primary"
diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss
index 9b32600f457..5f9d6c24744 100644
--- a/src/components/button/_index.scss
+++ b/src/components/button/_index.scss
@@ -2,4 +2,3 @@
 @import 'button_content';
 @import 'button_empty/index';
 @import 'button_icon/index';
-@import 'button_group/index';
diff --git a/src/components/button/button.test.tsx b/src/components/button/button.test.tsx
index 0c86c52ae55..0e696628ece 100644
--- a/src/components/button/button.test.tsx
+++ b/src/components/button/button.test.tsx
@@ -68,6 +68,20 @@ describe('EuiButton', () => {
       });
     });
 
+    describe('isSelected', () => {
+      it('is rendered as true', () => {
+        const component = render(<EuiButton isSelected />);
+
+        expect(component).toMatchSnapshot();
+      });
+
+      it('is rendered as false', () => {
+        const component = render(<EuiButton isSelected={false} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
     describe('fullWidth', () => {
       it('is rendered', () => {
         const component = render(<EuiButton fullWidth />);
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 53b656500fc..7a07d67cf99 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -97,6 +97,11 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
    * `disabled` is also allowed
    */
   isDisabled?: boolean;
+  /**
+   * Applies the boolean state as the `aria-pressed` property to create a toggle button.
+   * *Only use when the readable text does not change between states.*
+   */
+  isSelected?: boolean;
   /**
    * Extends the button to 100% width
    */
@@ -148,6 +153,7 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
       fill = false,
       isDisabled,
       isLoading,
+      isSelected,
       contentProps,
       textProps,
       fullWidth,
@@ -212,6 +218,7 @@ const EuiButtonDisplay = React.forwardRef<HTMLElement, EuiButtonDisplayProps>(
         className: classes,
         style: calculatedStyle,
         disabled: element === 'button' && buttonIsDisabled,
+        'aria-pressed': element === 'button' ? isSelected : undefined,
         ref,
         ...rest,
       },
diff --git a/src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap b/src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap
deleted file mode 100644
index caa8afcb657..00000000000
--- a/src/components/button/button_toggle/__snapshots__/button_toggle.test.tsx.snap
+++ /dev/null
@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiButtonToggle extends button props like color 1`] = `
-<button
-  aria-label="aria-label"
-  aria-pressed="false"
-  class="euiButton euiButton--danger testClass1 testClass2"
-  data-test-subj="test subject string"
-  type="button"
->
-  <span
-    class="euiButtonContent euiButton__content"
-  >
-    <span
-      class="euiButton__text"
-    >
-      Toggle
-    </span>
-  </span>
-</button>
-`;
-
-exports[`EuiButtonToggle is rendered 1`] = `
-<button
-  aria-label="aria-label"
-  aria-pressed="false"
-  class="euiButton euiButton--primary testClass1 testClass2"
-  data-test-subj="test subject string"
-  type="button"
->
-  <span
-    class="euiButtonContent euiButton__content"
-  >
-    <span
-      class="euiButton__text"
-    >
-      Toggle
-    </span>
-  </span>
-</button>
-`;
-
-exports[`EuiButtonToggle isSelected is rendered 1`] = `
-<button
-  aria-label="aria-label"
-  aria-pressed="true"
-  class="euiButton euiButton--primary euiButton--fill testClass1 testClass2"
-  data-test-subj="test subject string"
-  type="button"
->
-  <span
-    class="euiButtonContent euiButton__content"
-  >
-    <span
-      class="euiButton__text"
-    >
-      Toggle
-    </span>
-  </span>
-</button>
-`;
diff --git a/src/components/button/button_toggle/button_toggle.test.tsx b/src/components/button/button_toggle/button_toggle.test.tsx
deleted file mode 100644
index 3427888e6d4..00000000000
--- a/src/components/button/button_toggle/button_toggle.test.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../../test';
-
-import { EuiButtonToggle } from './button_toggle';
-
-describe('EuiButtonToggle', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiButtonToggle {...requiredProps}>Toggle</EuiButtonToggle>
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  test('isSelected is rendered', () => {
-    const component = render(
-      <EuiButtonToggle {...requiredProps} isSelected={true}>
-        Toggle
-      </EuiButtonToggle>
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  test('extends button props like color', () => {
-    const component = render(
-      <EuiButtonToggle {...requiredProps} color="danger">
-        Toggle
-      </EuiButtonToggle>
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-});
diff --git a/src/components/button/button_toggle/button_toggle.tsx b/src/components/button/button_toggle/button_toggle.tsx
deleted file mode 100644
index 4eab7483d0c..00000000000
--- a/src/components/button/button_toggle/button_toggle.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React, { FunctionComponent } from 'react';
-
-import { EuiButton, EuiButtonPropsForButton } from '../button';
-
-/**
- * Extend EuiButtonProps but only for <button> type props because toggles can't be links.
- */
-export interface EuiButtonToggleProps extends EuiButtonPropsForButton {
-  /**
-   * Initial state of the toggle
-   */
-  isSelected?: boolean;
-}
-
-/**
- * A simple wrapper around EuiButton with helpers for selected state
- */
-export const EuiButtonToggle: FunctionComponent<EuiButtonToggleProps> = ({
-  isSelected = false,
-  children,
-  ...rest
-}) => {
-  return (
-    <EuiButton fill={isSelected} aria-pressed={isSelected} {...rest}>
-      {children}
-    </EuiButton>
-  );
-};
diff --git a/src/components/button/button_toggle/index.ts b/src/components/button/button_toggle/index.ts
deleted file mode 100644
index 6bd321eefb0..00000000000
--- a/src/components/button/button_toggle/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export { EuiButtonToggle, EuiButtonToggleProps } from './button_toggle';
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index cd7d5f4af07..0298b137e35 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -39,8 +39,6 @@ export {
   EuiButtonIconPropsForButton,
 } from './button_icon';
 
-export { EuiButtonToggle, EuiButtonToggleProps } from './button_toggle';
-
 export {
   EuiButtonGroup,
   EuiButtonGroupOptionProps,
diff --git a/src/components/index.js b/src/components/index.js
index 6f8f59cbc1e..06c8dce45f3 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -46,7 +46,6 @@ export {
   EuiButton,
   EuiButtonEmpty,
   EuiButtonIcon,
-  EuiButtonToggle,
   EuiButtonGroup,
 } from './button';
 
diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss
index 79c5810dd20..df81cccad48 100644
--- a/src/global_styling/variables/_buttons.scss
+++ b/src/global_styling/variables/_buttons.scss
@@ -5,7 +5,6 @@ $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default;
 // Only increase the contrast of background color to text to 2.0 for disabled
 $euiButtonColorDisabledText: makeHighContrastColor($euiButtonColorDisabled, $euiPageBackgroundColor, 2) !default;
 $euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade) !default;
-$euiButtonToggleBorderColor: $euiColorLightShade !default;
 
 // Modifier naming and colors.
 $euiButtonTypes: (

From 22b97f547d9b8c67b566103c8ac0a59e4e83b019 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 14 Oct 2020 19:29:15 -0400
Subject: [PATCH 28/34] Fix button_group SASS import

---
 src/components/button/_index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss
index 5f9d6c24744..9b32600f457 100644
--- a/src/components/button/_index.scss
+++ b/src/components/button/_index.scss
@@ -2,3 +2,4 @@
 @import 'button_content';
 @import 'button_empty/index';
 @import 'button_icon/index';
+@import 'button_group/index';

From 90cbd81a09b2dab48af545408467b2ea418f05bc Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 14 Oct 2020 19:30:33 -0400
Subject: [PATCH 29/34] Added `isSelected` to PropsForButton

And using it in EuiButtonEmpty and EuiButtonIcon
---
 src/components/button/button.tsx              |  9 +++---
 .../__snapshots__/button_empty.test.tsx.snap  | 32 +++++++++++++++++++
 .../button/button_empty/button_empty.test.tsx | 14 ++++++++
 .../button/button_empty/button_empty.tsx      |  2 ++
 .../__snapshots__/button_icon.test.tsx.snap   | 30 +++++++++++++++++
 .../button/button_icon/button_icon.test.tsx   | 22 +++++++++++++
 .../button/button_icon/button_icon.tsx        |  2 ++
 src/components/common.ts                      |  5 +++
 8 files changed, 111 insertions(+), 5 deletions(-)

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 7a07d67cf99..4c7ab6b62bc 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -97,11 +97,6 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
    * `disabled` is also allowed
    */
   isDisabled?: boolean;
-  /**
-   * Applies the boolean state as the `aria-pressed` property to create a toggle button.
-   * *Only use when the readable text does not change between states.*
-   */
-  isSelected?: boolean;
   /**
    * Extends the button to 100% width
    */
@@ -131,6 +126,10 @@ export type EuiButtonDisplayProps = EuiButtonProps &
      * Provide the component's base class name to build the class list on
      */
     baseClassName: string;
+    /**
+     * Inherited from PropsForButton
+     */
+    isSelected?: boolean;
   };
 
 /**
diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
index fbb99a7e457..6cc126bf3e3 100644
--- a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
+++ b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
@@ -303,6 +303,38 @@ exports[`EuiButtonEmpty props isLoading is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButtonEmpty props isSelected is rendered as false 1`] = `
+<button
+  aria-pressed="false"
+  class="euiButtonEmpty euiButtonEmpty--primary"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButtonEmpty__content"
+  >
+    <span
+      class="euiButtonEmpty__text"
+    />
+  </span>
+</button>
+`;
+
+exports[`EuiButtonEmpty props isSelected is rendered as true 1`] = `
+<button
+  aria-pressed="true"
+  class="euiButtonEmpty euiButtonEmpty--primary"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButtonEmpty__content"
+  >
+    <span
+      class="euiButtonEmpty__text"
+    />
+  </span>
+</button>
+`;
+
 exports[`EuiButtonEmpty props size l is rendered 1`] = `
 <button
   class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--large"
diff --git a/src/components/button/button_empty/button_empty.test.tsx b/src/components/button/button_empty/button_empty.test.tsx
index 23e01d1b8bb..c8a60baa36e 100644
--- a/src/components/button/button_empty/button_empty.test.tsx
+++ b/src/components/button/button_empty/button_empty.test.tsx
@@ -62,6 +62,20 @@ describe('EuiButtonEmpty', () => {
       });
     });
 
+    describe('isSelected', () => {
+      it('is rendered as true', () => {
+        const component = render(<EuiButtonEmpty isSelected />);
+
+        expect(component).toMatchSnapshot();
+      });
+
+      it('is rendered as false', () => {
+        const component = render(<EuiButtonEmpty isSelected={false} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
     describe('iconType', () => {
       it('is rendered', () => {
         const component = render(<EuiButtonEmpty iconType="user" />);
diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx
index f905679a41d..cd186f555e5 100644
--- a/src/components/button/button_empty/button_empty.tsx
+++ b/src/components/button/button_empty/button_empty.tsx
@@ -129,6 +129,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
   buttonRef,
   contentProps,
   textProps,
+  isSelected,
   ...rest
 }) => {
   // If in the loading state, force disabled to true
@@ -192,6 +193,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
       className={classes}
       type={type}
       ref={buttonRef}
+      aria-pressed={isSelected}
       {...(rest as EuiButtonEmptyPropsForButton)}>
       {innerNode}
     </button>
diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
index 6cae9bb61a3..78e6dc06502 100644
--- a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
+++ b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -200,3 +200,33 @@ exports[`EuiButtonIcon props isDisabled renders a button even when href is defin
   />
 </button>
 `;
+
+exports[`EuiButtonIcon props isSelected is rendered as false 1`] = `
+<button
+  aria-label="button"
+  aria-pressed="false"
+  class="euiButtonIcon euiButtonIcon--primary"
+  type="button"
+>
+  <span
+    aria-hidden="true"
+    class="euiButtonIcon__icon"
+    data-euiicon-type="user"
+  />
+</button>
+`;
+
+exports[`EuiButtonIcon props isSelected is rendered as true 1`] = `
+<button
+  aria-label="button"
+  aria-pressed="true"
+  class="euiButtonIcon euiButtonIcon--primary"
+  type="button"
+>
+  <span
+    aria-hidden="true"
+    class="euiButtonIcon__icon"
+    data-euiicon-type="user"
+  />
+</button>
+`;
diff --git a/src/components/button/button_icon/button_icon.test.tsx b/src/components/button/button_icon/button_icon.test.tsx
index f8efe7d3ee2..b8d16e05f2c 100644
--- a/src/components/button/button_icon/button_icon.test.tsx
+++ b/src/components/button/button_icon/button_icon.test.tsx
@@ -78,6 +78,28 @@ describe('EuiButtonIcon', () => {
       });
     });
 
+    describe('isSelected', () => {
+      it('is rendered as true', () => {
+        const component = render(
+          <EuiButtonIcon iconType="user" aria-label="button" isSelected />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+
+      it('is rendered as false', () => {
+        const component = render(
+          <EuiButtonIcon
+            iconType="user"
+            aria-label="button"
+            isSelected={false}
+          />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
     describe('href', () => {
       it('secures the rel attribute when the target is _blank', () => {
         const component = render(
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
index f05cf593e7e..94a42c16c37 100644
--- a/src/components/button/button_icon/button_icon.tsx
+++ b/src/components/button/button_icon/button_icon.tsx
@@ -107,6 +107,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
   target,
   rel,
   buttonRef,
+  isSelected,
   ...rest
 }) => {
   const ariaHidden = rest['aria-hidden'];
@@ -163,6 +164,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
       tabIndex={isAriaHidden ? -1 : undefined}
       disabled={isDisabled}
       className={classes}
+      aria-pressed={isSelected}
       type={type as typeof buttonType}
       ref={buttonRef as Ref<HTMLButtonElement>}
       {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}>
diff --git a/src/components/common.ts b/src/components/common.ts
index 639ac7fcbbd..0e19a3bfcfe 100644
--- a/src/components/common.ts
+++ b/src/components/common.ts
@@ -190,6 +190,11 @@ export type PropsForAnchor<T, P = {}> = T & {
 
 export type PropsForButton<T, P = {}> = T & {
   onClick?: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * Applies the boolean state as the `aria-pressed` property to create a toggle button.
+   * *Only use when the readable text does not change between states.*
+   */
+  isSelected?: boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement> &
   P;
 

From 79c740056febf742b24afaee1df0ba3cf80ba106 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 15 Oct 2020 09:55:06 -0400
Subject: [PATCH 30/34] Add `isSelected` individually not to `PropsForButton`

---
 src/components/button/button.tsx                    | 9 +++++----
 src/components/button/button_empty/button_empty.tsx | 5 +++++
 src/components/button/button_icon/button_icon.tsx   | 5 +++++
 src/components/common.ts                            | 5 -----
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 4c7ab6b62bc..7a07d67cf99 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -97,6 +97,11 @@ export interface EuiButtonProps extends EuiButtonContentProps, CommonProps {
    * `disabled` is also allowed
    */
   isDisabled?: boolean;
+  /**
+   * Applies the boolean state as the `aria-pressed` property to create a toggle button.
+   * *Only use when the readable text does not change between states.*
+   */
+  isSelected?: boolean;
   /**
    * Extends the button to 100% width
    */
@@ -126,10 +131,6 @@ export type EuiButtonDisplayProps = EuiButtonProps &
      * Provide the component's base class name to build the class list on
      */
     baseClassName: string;
-    /**
-     * Inherited from PropsForButton
-     */
-    isSelected?: boolean;
   };
 
 /**
diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx
index cd186f555e5..f94aefbc7ce 100644
--- a/src/components/button/button_empty/button_empty.tsx
+++ b/src/components/button/button_empty/button_empty.tsx
@@ -91,6 +91,11 @@ interface CommonEuiButtonEmptyProps extends EuiButtonContentProps, CommonProps {
    * Force disables the button and changes the icon to a loading spinner
    */
   isLoading?: boolean;
+  /**
+   * Applies the boolean state as the `aria-pressed` property to create a toggle button.
+   * *Only use when the readable text does not change between states.*
+   */
+  isSelected?: boolean;
   href?: string;
   target?: string;
   rel?: string;
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
index 94a42c16c37..7a30fa9c57c 100644
--- a/src/components/button/button_icon/button_icon.tsx
+++ b/src/components/button/button_icon/button_icon.tsx
@@ -57,6 +57,11 @@ export interface EuiButtonIconProps extends CommonProps {
   isDisabled?: boolean;
   size?: ButtonSize;
   iconSize?: IconSize;
+  /**
+   * Applies the boolean state as the `aria-pressed` property to create a toggle button.
+   * *Only use when the readable text does not change between states.*
+   */
+  isSelected?: boolean;
 }
 
 type EuiButtonIconPropsForAnchor = {
diff --git a/src/components/common.ts b/src/components/common.ts
index 0e19a3bfcfe..639ac7fcbbd 100644
--- a/src/components/common.ts
+++ b/src/components/common.ts
@@ -190,11 +190,6 @@ export type PropsForAnchor<T, P = {}> = T & {
 
 export type PropsForButton<T, P = {}> = T & {
   onClick?: MouseEventHandler<HTMLButtonElement>;
-  /**
-   * Applies the boolean state as the `aria-pressed` property to create a toggle button.
-   * *Only use when the readable text does not change between states.*
-   */
-  isSelected?: boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement> &
   P;
 

From dca637781cf245e7df9c6951ce7db1a80cc48105 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 15 Oct 2020 14:29:34 -0400
Subject: [PATCH 31/34] Some docs stuff

---
 src-docs/src/views/button/button_example.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index bd9eec091bd..176050bbb2d 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -91,14 +91,14 @@ const buttonToggleSnippet = [
 </EuiButton>
 `,
   `<EuiButton
-  aria-pressed={toggleOn}
+  isSelected={toggleOn}
   fill={toggleOn}
   onClick={onToggleChange}
->
+  >
   <!-- Button text -->
 </EuiButton>`,
   `<EuiButton
-  isSelected={toggleOn}
+  aria-pressed={toggleOn}
   fill={toggleOn}
   onClick={onToggleChange}
 >
@@ -330,7 +330,7 @@ export const ButtonExample = {
             the visual differences for on and off. Though there are two
             <strong>exclusive</strong> situations to consider.
           </p>
-          <ul>
+          <ol>
             <li>
               If your button changes its readable <strong>text</strong>, via
               children or <EuiCode>aria-label</EuiCode>, then there is no
@@ -339,11 +339,10 @@ export const ButtonExample = {
             <li>
               If your button only changes the <strong>visual</strong>{' '}
               appearance, you must add <EuiCode>aria-pressed</EuiCode> passing a
-              boolean for the on and off states. <strong>EuiButton</strong>{' '}
-              provides a helper prop for this called{' '}
-              <EuiCode>isSelected</EuiCode>.
+              boolean for the on and off states. All EUI button types provide a
+              helper prop for this called <EuiCode>isSelected</EuiCode>.
             </li>
-          </ul>
+          </ol>
           <EuiCallOut
             iconType="accessibility"
             color="warning"

From 6c1f9466eea48447029eeb6401436910c974f3a9 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 15 Oct 2020 15:55:03 -0400
Subject: [PATCH 32/34] cl

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index de2eb5ed089..ce69ef48da0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `minWidth` prop to `EuiButton` ([4056](https://github.com/elastic/eui/pull/4056))
+- Added `isSelected` prop to easily turn `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon` into toggle buttons ([4056](https://github.com/elastic/eui/pull/4056))
+- Updated `EuiButtonGroup` props and render for better accessibility ([4056](https://github.com/elastic/eui/pull/4056))
+
+**Breaking changes**
+
+- Removed `EuiToggle` and `EuiButtonToggle` in favor of `aria-pressed` ([4056](https://github.com/elastic/eui/pull/4056))
+- Updated `legend` and `idSelected` props of `EuiButtonGroup` to be required ([4056](https://github.com/elastic/eui/pull/4056))
+
 **Theme: Amsterdam**
 
 - Tightened `line-height` for some `EuiTitle` sizes ([4133](https://github.com/elastic/eui/pull/4133))

From d8b6f1ec88ec7ac99581724cb30a91b8039defc7 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Thu, 15 Oct 2020 16:25:15 -0400
Subject: [PATCH 33/34] typo

Co-authored-by: Michail Yasonik <michail@yasonik.com>
---
 src-docs/src/views/button/button_example.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index 176050bbb2d..b8a754a86ba 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -327,7 +327,7 @@ export const ButtonExample = {
             You can create a toggle style button with any button type like the
             standard <strong>EuiButton</strong>, <strong>EuiButtonEmpty</strong>
             , or <strong>EuiButtonIcon</strong>. Use state management to handle
-            the visual differences for on and off. Though there are two
+            the visual differences for on and off. Though there are two{' '}
             <strong>exclusive</strong> situations to consider.
           </p>
           <ol>

From 49a78c74642d8e77c56b49c5c9115b1f1c99015a Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 16 Oct 2020 11:09:12 -0400
Subject: [PATCH 34/34] Simplify `isSelected` on EuiButtonGroupButton

---
 src/components/button/button_group/button_group_button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx
index 1d1594928d0..dea959ed661 100644
--- a/src/components/button/button_group/button_group_button.tsx
+++ b/src/components/button/button_group/button_group_button.tsx
@@ -99,7 +99,7 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
     elementProps = {
       ...elementProps,
       id,
-      'aria-pressed': isSelected,
+      isSelected,
       onClick: () => onChange(id),
     };
   }