Deprecating EuiToggle and EuiToggleButton

src-docs/src/routes.js

@@ -205,8 +205,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';
@@ -448,7 +446,6 @@ const navigation = [
       ResizeObserverExample,
       ResponsiveExample,
       TextDiffExample,
-      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,28 +80,51 @@ 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}
-  isSelected={toggleOn}
-/>`;
+>
+  <!-- Button text -->
+</EuiButton>`,
+];
 
 import ButtonGroup from './button_group';
+import { EuiButtonSingleGroupOption, EuiButtonMultiGroupOption } from './props';
 const buttonGroupSource = require('!!raw-loader!./button_group');
 const buttonGroupHtml = renderToHtml(ButtonGroup);
 const buttonGroupSnippet = [
   `<EuiButtonGroup
   legend={legend}
-  options={toggleButtons}
-  idSelected={toggleIdSelected}
-  onChange={onChange}
+  options={[
+    {
+      id: optionId,
+      label: 'Option'
+    }
+  ]}
+  idSelected={idSelected}
+  onChange={(optionId) => {}}
+  type="single"
 />`,
   `<EuiButtonGroup
   legend={legend}
-  options={toggleButtonsIconsMulti}
-  idToSelectedMap={toggleIconIdToSelectedMap}
-  onChange={onChangeIconsMulti}
+  options={[
+    {
+      id: optionId,
+      label: 'Option',
+      iconType: 'iconString',
+    }
+  ]}
+  idToSelectedMap={idToSelectedMap}
+  onChange={(optionId) => {}}
   type="multi"
   isIconOnly
 />`,
@@ -289,26 +312,40 @@ 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="m" />
           <p>
-            The <strong>EuiButtonToggle</strong> does not have any inherit
-            visual state differences. These you must apply in your
-            implementation.
+            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>
-        </div>
+          <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> for the
+              &ldquo;on&rdquo; state.
+            </li>
+          </ul>
+        </>
       ),
       demo: <ButtonToggle />,
       snippet: buttonToggleSnippet,
-      props: { EuiButtonToggle },
     },
     {
       title: 'Button groups',
@@ -325,10 +362,8 @@ 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>
@@ -346,16 +381,21 @@ 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>
             }
           />
         </div>
       ),
       demo: <ButtonGroup />,
       snippet: buttonGroupSnippet,
-      props: { EuiButtonGroup },
+      props: {
+        EuiButtonGroup,
+        EuiButtonSingleGroupOption,
+        EuiButtonMultiGroupOption,
+      },
     },
     {
       title: 'Ghost',

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

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState } from 'react';
 
 import {
   EuiButtonGroup,
@@ -187,7 +187,7 @@ export default () => {
   };
 
   return (
-    <Fragment>
+    <>
       <EuiButtonGroup
         legend="This is a basic group"
         options={toggleButtons}
@@ -280,6 +280,6 @@ export default () => {
           isIconOnly
         />
       </EuiPanel>
-    </Fragment>
+    </>
   );
 };

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

@@ -1,72 +1,65 @@
 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 [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
+        fill={toggle0On}
+        onClick={() => {
+          setToggle0On(!toggle0On);
+        }}>
+        {toggle0On ? 'I am a filled toggle' : 'I am a primary toggle'}
+      </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"
+      <EuiButton
         fill={toggle2On}
-        isSelected={toggle2On}
-      />
+        aria-pressed={toggle2On}
+        iconType={toggle2On ? 'starPlusEmpty' : 'starFilledSpace'}
+        onClick={() => {
+          setToggle2On(!toggle2On);
+        }}>
+        Toggle me
+      </EuiButton>
       &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>
+    </>
   );
 };

src-docs/src/views/button/props.tsx

@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from 'react';
+import {
+  EuiButtonSingleGroupOptionProps,
+  EuiButtonMultiGroupOptionProps,
+} from '../../../../src/components/button/button_group';
+
+export const EuiButtonSingleGroupOption: FunctionComponent<
+  EuiButtonSingleGroupOptionProps
+> = () => <div />;
+
+export const EuiButtonMultiGroupOption: FunctionComponent<
+  EuiButtonMultiGroupOptionProps
+> = () => <div />;