Deprecating EuiToggle and EuiToggleButton

scripts/a11y-testing.js

@@ -58,7 +58,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

@@ -194,7 +194,7 @@ import { ToastExample } from './views/toast/toast_example';
 
 import { ToolTipExample } from './views/tool_tip/tool_tip_example';
 
-import { ToggleExample } from './views/toggle/toggle_example';
+// import { ToggleExample } from './views/toggle/toggle_example';
 
 import { WindowEventExample } from './views/window_event/window_event_example';
 
@@ -423,7 +423,7 @@ const navigation = [
       PortalExample,
       ResizeObserverExample,
       ResponsiveExample,
-      ToggleExample,
+      // 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,
 } from '../../../../src/components';
 
 import Button from './button';
@@ -79,12 +79,22 @@ 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
+  iconType={this.state.toggleOn ? onIcon : offIcon}
+  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');
@@ -232,9 +242,9 @@ export const ButtonExample = {
       text: (
         <p>
           When aligning <EuiCode>EuiButtonEmpty</EuiCode> components to the left
-          or the right, you should make sure they&rsquo;re flush with the edge
-          of their container, so that they&rsquo;re horizontally aligned with
-          the other content in the container.
+          or the right, you should make sure they&apos;re flush with the edge of
+          their container, so that they&apos;re horizontally aligned with the
+          other content in the container.
         </p>
       ),
       snippet: buttonOptionFlushSnippet,
@@ -272,26 +282,42 @@ export const ButtonExample = {
         },
       ],
       text: (
-        <div>
-          <p>
-            This is a specialized component that combines{' '}
-            <EuiCode>EuiButton</EuiCode> and <EuiCode>EuiToggle</EuiCode> to
-            create a button with an on/off state. You can pass all the same
-            parameters to it as you can to <EuiCode>EuiButton</EuiCode>. 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 <EuiCode>EuiToggle</EuiCode>.
-          </p>
-          <p>
-            The <EuiCode>EuiButtonToggle</EuiCode> does not have any inherit
-            visual state differences. These you must apply in your
-            implementation.
-          </p>
-        </div>
+        <>
+          <EuiCallOut
+            iconType="trash"
+            color="warning"
+            title={
+              <span>
+                Looking for <EuiCode>EuiButtonToggle</EuiCode>? It&apos;s been
+                deprecated so docs around it have been removed (though it will
+                still be exported until Oct 2020).
+              </span>
+            }
+          />
+          <EuiSpacer size="s" />
+          <div>
+            <p>
+              If your button has a on and off state, consider adding{' '}
+              <EuiCode>aria-pressed</EuiCode> to your button. (
+              <EuiCode>aria-pressed</EuiCode> can be added to any EUI button
+              component.)
+            </p>
+            <p>
+              There&apos;s one simple rule to figure out if you should do that:
+              does your button change text between the two states or is it
+              visual only?
+            </p>
+            <p>
+              If you answered &quot;yes, my button text changes between
+              states&quot;, don&apos;t add <EuiCode>aria-pressed</EuiCode>. If
+              you answered &quot;no, my button always has the same text&quot;,
+              add <EuiCode>aria-pressed</EuiCode>.
+            </p>
+          </div>
+        </>
       ),
       demo: <ButtonToggle />,
       snippet: buttonToggleSnippet,
-      props: { EuiButtonToggle },
     },
     {
       title: 'Groups',

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

@@ -6,7 +6,6 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButtonToggle,
 } from '../../../../src/components';
 
 export default class extends Component {
@@ -78,15 +77,6 @@ export default class extends Component {
             Loading…
           </EuiButton>
         </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <EuiButtonToggle
-            color="ghost"
-            label="Toggle Me"
-            fill={this.state.toggle0On}
-            onChange={this.onToggle0Change}
-          />
-        </EuiFlexItem>
       </EuiFlexGroup>
     );
   }

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

@@ -1,10 +1,6 @@
 import React, { Component } from 'react';
 
-import {
-  EuiButtonToggle,
-  EuiSpacer,
-  EuiTitle,
-} from '../../../../src/components';
+import { EuiButton, EuiButtonIcon } from '../../../../src/components';
 
 export default class extends Component {
   constructor(props) {
@@ -14,69 +10,54 @@ export default class extends Component {
       toggle0On: false,
       toggle1On: false,
       toggle2On: false,
-      toggle3On: true,
-      toggle4On: true,
+      toggle3On: false,
     };
   }
 
-  onToggle0Change = e => {
-    this.setState({ toggle0On: e.target.checked });
+  onToggle0Change = () => {
+    this.setState({ toggle0On: !this.state.toggle0On });
   };
 
-  onToggle1Change = e => {
-    this.setState({ toggle1On: e.target.checked });
+  onToggle1Change = () => {
+    this.setState({ toggle1On: !this.state.toggle1On });
   };
 
-  onToggle4Change = e => {
-    this.setState({ toggle4On: e.target.checked });
+  onToggle2Change = () => {
+    this.setState({ toggle2On: !this.state.toggle2On });
+  };
+
+  onToggle3Change = () => {
+    this.setState({ toggle3On: !this.state.toggle3On });
   };
 
   render() {
     return (
       <div>
-        <EuiButtonToggle
-          label="Toggle Me"
+        <EuiButton
+          fill={this.state.toggle0On}
+          aria-pressed={this.state.toggle0On}
           iconType={this.state.toggle0On ? 'starPlusEmpty' : 'starFilledSpace'}
-          onChange={this.onToggle0Change}
-          isSelected={this.state.toggle0On}
-        />
+          onClick={this.onToggle0Change}>
+          Toggle Me
+        </EuiButton>
         &emsp;
-        <EuiButtonToggle
-          label={
-            this.state.toggle1On
-              ? "I'm a filled toggle"
-              : "I'm a primary toggle"
-          }
-          fill={this.state.toggle1On}
-          onChange={this.onToggle1Change}
-          isSelected={this.state.toggle1On}
-        />
+        <EuiButton fill={this.state.toggle1On} onClick={this.onToggle1Change}>
+          {this.state.toggle1On
+            ? 'I am a primary toggle'
+            : 'I am a filled toggle'}
+        </EuiButton>
         &emsp;
-        <EuiButtonToggle
-          label="Toggle Me"
-          iconType={this.state.toggle4On ? 'eye' : 'eyeClosed'}
-          onChange={this.onToggle4Change}
-          isSelected={this.state.toggle4On}
-          isEmpty
-          isIconOnly
-        />
-        <EuiSpacer size="m" />
-        <EuiTitle size="xxs">
-          <h3>Disabled</h3>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiButtonToggle
-          isDisabled
-          label="Can't toggle this"
-          fill={this.state.toggle2On}
-          isSelected={this.state.toggle2On}
+        <EuiButtonIcon
+          aria-label={this.state.toggle2On ? 'Play' : 'Pause'}
+          iconType={this.state.toggle2On ? 'play' : 'pause'}
+          onClick={this.onToggle2Change}
         />
         &emsp;
-        <EuiButtonToggle
-          isDisabled
-          label="Can't toggle this either"
-          fill={this.state.toggle3On}
-          isSelected={this.state.toggle3On}
+        <EuiButtonIcon
+          aria-label="Autosave"
+          iconType="save"
+          aria-pressed={this.state.onToggle3Change}
+          onClick={this.onToggle3Change}
         />
       </div>
     );