Deprecating EuiToggle and EuiToggleButton

scripts/a11y-testing.js

@@ -67,7 +67,6 @@ const docsPages = async (root, page) => {
     `${root}#/utilities/portal`,
     `${root}#/utilities/resizeobserver`,
     `${root}#/utilities/responsive`,
-    `${root}#/utilities/toggle`,
     `${root}#/utilities/window-events`,
     `${root}#/package/i18n-tokens`,
     `${root}#/utilities/accessibility`,

src-docs/src/routes.js

@@ -200,8 +200,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 { WindowEventExample } from './views/window_event/window_event_example';
 
 import { Changelog } from './views/package/changelog';
@@ -432,7 +430,6 @@ const navigation = [
       PrettyDurationExample,
       ResizeObserverExample,
       ResponsiveExample,
-      ToggleExample,
       WindowEventExample,
     ].map(example => createExample(example)),
   },

src-docs/src/views/button/button_example.js

@@ -12,8 +12,8 @@ import {
   EuiButtonIcon,
   EuiCode,
   EuiButtonGroup,
-  EuiButtonToggle,
   EuiCallOut,
+  EuiSpacer,
   EuiText,
 } from '../../../../src/components';
 
@@ -80,12 +80,21 @@ 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={this.state.toggleOn ? onIcon : offIcon}
+  onClick={this.onToggleChange}
+>
+  {this.state.toggleOn ? onLabel : offLabel}
+</EuiButton>
+`,
+  `<EuiButton
+  aria-pressed={this.state.toggleOn}
   onChange={this.onToggleChange}
-  isSelected={this.state.toggleOn}
-/>`;
+>
+  {buttonText}
+</EuiButton>`,
+];
 
 import ButtonGroup from './button_group';
 const buttonGroupSource = require('!!raw-loader!./button_group');
@@ -289,26 +298,26 @@ export const ButtonExample = {
         },
       ],
       text: (
-        <div>
-          <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>.
-          </p>
+        <>
+          <EuiCallOut
+            iconType="trash"
+            color="warning"
+            title={
+              <span>
+                <strong>EuiButtonToggle</strong> has been deprecated. See the
+                example below for correct usage of similar behavior.
+              </span>
+            }
+          />
+          <EuiSpacer size="s" />
           <p>
-            The <strong>EuiButtonToggle</strong> does not have any inherit
-            visual state differences. These you must apply in your
-            implementation.
+            Pass in <EuiCode>aria-pressed</EuiCode> if your button does not
+            change its label for each state.
           </p>
-        </div>
+        </>
       ),
       demo: <ButtonToggle />,
       snippet: buttonToggleSnippet,
-      props: { EuiButtonToggle },
     },
     {
       title: 'Button groups',

src-docs/src/views/button/button_group.js

@@ -24,7 +24,8 @@ export default class extends Component {
       },
       {
         id: `${idPrefix}1`,
-        label: 'Option two is selected by default',
+        label:
+          'Option two is selected by default Option two is selected by default',
       },
       {
         id: `${idPrefix}2`,
@@ -54,7 +55,8 @@ export default class extends Component {
       },
       {
         id: `${idPrefix2}1`,
-        label: 'Option 2 is selected by default',
+        label:
+          'Option 2 is selected by default Option 2 is selected by default',
       },
       {
         id: `${idPrefix2}2`,

src-docs/src/views/button/button_toggle.js

@@ -1,72 +1,66 @@
 import React, { useState } from 'react';
 
 import {
-  EuiButtonToggle,
+  EuiButton,
+  EuiButtonIcon,
   EuiSpacer,
   EuiTitle,
 } from '../../../../src/components';
 
 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 [toggle2On, setToggle2On] = useState(true);
+  const [toggle3On, setToggle3On] = useState(true);
 
   return (
-    <div>
-      <EuiButtonToggle
-        label="Toggle Me"
+    <>
+      <EuiButton
+        fill={toggle0On}
+        aria-pressed={toggle0On}
         iconType={toggle0On ? 'starPlusEmpty' : 'starFilledSpace'}
-        onChange={onToggle0Change}
-        isSelected={toggle0On}
-      />
+        onClick={() => {
+          setToggle0On(!toggle0On);
+        }}>
+        Toggle Me
+      </EuiButton>
       &emsp;
-      <EuiButtonToggle
-        label={toggle1On ? "I'm a filled toggle" : "I'm a primary toggle"}
+      <EuiButton
         fill={toggle1On}
-        onChange={onToggle1Change}
-        isSelected={toggle1On}
+        onClick={() => {
+          setToggle1On(!toggle1On);
+        }}>
+        {toggle1On ? 'I am a primary toggle' : 'I am a filled toggle'}
+      </EuiButton>
+      &emsp;
+      <EuiButtonIcon
+        aria-label={toggle2On ? 'Play' : 'Pause'}
+        iconType={toggle2On ? 'play' : 'pause'}
+        onClick={() => {
+          setToggle2On(!toggle2On);
+        }}
       />
       &emsp;
-      <EuiButtonToggle
-        label="Toggle Me"
-        iconType={toggle4On ? 'eye' : 'eyeClosed'}
-        onChange={onToggle4Change}
-        isSelected={toggle4On}
-        isEmpty
-        isIconOnly
+      <EuiButtonIcon
+        aria-label="Autosave"
+        iconType="save"
+        aria-pressed={toggle3On}
+        onClick={() => {
+          setToggle3On(!toggle3On);
+        }}
       />
       <EuiSpacer size="m" />
       <EuiTitle size="xxs">
         <h3>Disabled</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiButtonToggle
-        isDisabled
-        label="Can't toggle this"
-        fill={toggle2On}
-        isSelected={toggle2On}
-      />
+      <EuiButton isDisabled={true} fill={false}>
+        Can&apos;t toggle this
+      </EuiButton>
       &emsp;
-      <EuiButtonToggle
-        isDisabled
-        label="Can't toggle this either"
-        fill={toggle3On}
-        isSelected={toggle3On}
-      />
-    </div>
+      <EuiButton isDisabled={true} fill={true}>
+        Can&apos;t toggle this either
+      </EuiButton>
+    </>
   );
 };

src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DefaultItemAction render - default button 1`] = `
+exports[`DefaultItemAction render - button 1`] = `
 <EuiToolTip
   content="action 1"
   delay="long"
@@ -18,7 +18,7 @@ exports[`DefaultItemAction render - default button 1`] = `
 </EuiToolTip>
 `;
 
-exports[`DefaultItemAction render - button 1`] = `
+exports[`DefaultItemAction render - default button 1`] = `
 <EuiToolTip
   content="action 1"
   delay="long"

src/components/button/__snapshots__/button.test.tsx.snap

@@ -165,7 +165,6 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButton__icon"
       data-euiicon-type="user"
     />
@@ -187,7 +186,6 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButton__icon"
       data-euiicon-type="user"
     />
@@ -209,7 +207,6 @@ exports[`EuiButton props iconType is rendered 1`] = `
     class="euiButton__content"
   >
     <div
-      aria-hidden="true"
       class="euiButton__icon"
       data-euiicon-type="user"
     />
@@ -222,7 +219,7 @@ exports[`EuiButton props iconType is rendered 1`] = `
 
 exports[`EuiButton props isDisabled is rendered 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton--disabled"
   disabled=""
   type="button"
 >
@@ -238,7 +235,7 @@ exports[`EuiButton props isDisabled is rendered 1`] = `
 
 exports[`EuiButton props isDisabled renders a button even when href is defined 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton--disabled"
   disabled=""
   type="button"
 >
@@ -254,7 +251,7 @@ exports[`EuiButton props isDisabled renders a button even when href is defined 1
 
 exports[`EuiButton props isLoading is rendered 1`] = `
 <button
-  class="euiButton euiButton--primary"
+  class="euiButton euiButton--primary euiButton--disabled"
   disabled=""
   type="button"
 >