Toggle components (#872)

elastic · May 25, 2018 · 846477f · 846477f
1 parent 08aeacd
commit 846477f
Show file tree

Hide file tree

Showing 36 changed files with 1,251 additions and 132 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Created `EuiToggle`, `EuiButtonToggle`, and `EuiButtonGroup` ([#872](https://github.com/elastic/eui/pull/872))
+
 **Breaking changes**
 
 - `EuiSearchBar` no longer has an `onParse` callback, and now passes an object to `onChange` with the shape `{ query, queryText, error }` ([#863](https://github.com/elastic/eui/pull/863))

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -204,6 +204,9 @@ import { ToastExample }
 import { ToolTipExample }
   from './views/tool_tip/tool_tip_example';
 
+import { ToggleExample }
+  from './views/toggle/toggle_example';
+
 import { Changelog }
   from './views/package/changelog';
 
@@ -344,6 +347,7 @@ const navigation = [{
     IsColorDarkExample,
     OutsideClickDetectorExample,
     PortalExample,
+    ToggleExample,
     UtilityClassesExample,
   ].map(example => createExample(example)),
 }, {

diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
@@ -11,6 +11,9 @@ import {
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiCode,
+  EuiButtonGroup,
+  EuiButtonToggle,
+  EuiLink,
 } from '../../../../src/components';
 
 import Button from './button';
@@ -45,6 +48,14 @@ import ButtonLoading from './button_loading';
 const buttonLoadingSource = require('!!raw-loader!./button_loading');
 const buttonLoadingHtml = renderToHtml(ButtonLoading);
 
+import ButtonToggle from './button_toggle';
+const buttonToggleSource = require('!!raw-loader!./button_toggle');
+const buttonToggleHtml = renderToHtml(ButtonToggle);
+
+import ButtonGroup from './button_group';
+const buttonGroupSource = require('!!raw-loader!./button_group');
+const buttonGroupHtml = renderToHtml(ButtonGroup);
+
 export const ButtonExample = {
   title: 'Button',
   sections: [{
@@ -159,7 +170,60 @@ export const ButtonExample = {
     props: { EuiButtonIcon },
     demo: <ButtonIcon />,
   }, {
-    title: 'Ghost buttons for deep color backgrounds',
+    title: 'Toggle buttons',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: buttonToggleSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: buttonToggleHtml,
+    }],
+    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 accessiblity 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>
+    ),
+    demo: <ButtonToggle />,
+    props: { EuiButtonToggle },
+  }, {
+    title: 'Groups',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: buttonGroupSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: buttonGroupHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          Button groups are handled similarly to the way checkbox and radio groups are
+          handled but made to look like buttons. They group multiple <EuiCode>EuiButtonToggle</EuiCode>s
+          and utilize the <EuiCode>type=&quot;single&quot;</EuiCode> or <EuiCode>&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>color=&quot;text&quot;</EuiCode> (default)
+          or <EuiCode>&quot;primary&quot;</EuiCode>.
+          If your just displaying a group of icons, add the prop <EuiCode>isIconOnly</EuiCode>.
+        </p>
+      </div>
+    ),
+    demo: <ButtonGroup />,
+    props: { EuiButtonGroup },
+  }, {
+    title: 'Ghost',
     source: [{
       type: GuideSectionTypes.JS,
       code: buttonGhostSource,
@@ -169,11 +233,10 @@ export const ButtonExample = {
     }],
     text: (
       <p>
-        You can also pass <EuiCode>type=&apos;ghost&apos;</EuiCode> to any of the button
-        styles on this page. These should be used extremely rarely, and are
+        For buttons on dark color backgrounds, you can pass <EuiCode>color=&apos;ghost&apos;</EuiCode> to
+        any of the button styles on this page. These should be used extremely rarely, and are
         only for placing buttons on top of dark or image-based backgrounds.
-        A good example of their use is in
-        the <EuiCode>EuiBottomBar</EuiCode> component
+        A good example of their use is in the <EuiLink href="/#/layout/bottom-bar">EuiBottomBar</EuiLink> component.
       </p>
     ),
     demo: <ButtonGhost />,

diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
@@ -1,74 +1,100 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import {
   EuiButton,
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiButtonToggle,
 } from '../../../../src/components';
 
-export default () => (
-  <EuiFlexGroup gutterSize="s" alignItems="center" className="guideDemo__ghostBackground">
-    <EuiFlexItem grow={false}>
-      <EuiButton
-        color="ghost"
-        onClick={() => window.alert('Button clicked')}
-      >
-        Primary
-      </EuiButton>
-    </EuiFlexItem>
+export default class extends Component {
+  constructor(props) {
+    super(props);
 
-    <EuiFlexItem grow={false}>
-      <EuiButton
-        fill
-        color="ghost"
-        size="s"
-        iconType="check"
-        onClick={() => window.alert('Button clicked')}
-      >
-        Filled
-      </EuiButton>
-    </EuiFlexItem>
+    this.state = {
+      toggle0On: false,
+    };
+  }
 
-    <EuiFlexItem grow={false}>
-      <EuiButtonEmpty
-        size="s"
-        color="ghost"
-        onClick={() => window.alert('Button clicked')}
-      >
-        small
-      </EuiButtonEmpty>
-    </EuiFlexItem>
+  onToggle0Change = (e) => {
+    this.setState({ toggle0On: e.target.checked });
+  }
 
-    <EuiFlexItem grow={false}>
-      <EuiButtonIcon
-        size="s"
-        color="ghost"
-        iconType="user"
-        onClick={() => window.alert('Button clicked')}
-        aria-label="Your account"
-      />
-    </EuiFlexItem>
+  render() {
+    return (
+      <EuiFlexGroup wrap gutterSize="s" alignItems="center" className="guideDemo__ghostBackground">
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            color="ghost"
+            onClick={() => window.alert('Button clicked')}
+          >
+            Primary
+          </EuiButton>
+        </EuiFlexItem>
 
-    <EuiFlexItem grow={false}>
-      <EuiButton
-        color="ghost"
-        isLoading
-        fill
-        size="s"
-      >
-        Loading&hellip;
-      </EuiButton>
-    </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            fill
+            color="ghost"
+            size="s"
+            iconType="check"
+            onClick={() => window.alert('Button clicked')}
+          >
+            Filled
+          </EuiButton>
+        </EuiFlexItem>
 
-    <EuiFlexItem grow={false}>
-      <EuiButton
-        color="ghost"
-        isLoading
-      >
-        Loading&hellip;
-      </EuiButton>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            size="s"
+            color="ghost"
+            onClick={() => window.alert('Button clicked')}
+          >
+            small
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            size="s"
+            color="ghost"
+            iconType="user"
+            onClick={() => window.alert('Button clicked')}
+            aria-label="Your account"
+          />
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            color="ghost"
+            isLoading
+            fill
+            size="s"
+          >
+            Loading&hellip;
+          </EuiButton>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            color="ghost"
+            isLoading
+          >
+            Loading&hellip;
+          </EuiButton>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiButtonToggle
+            color="ghost"
+            label="Toggle Me"
+            fill={this.state.toggle0On}
+            onChange={this.onToggle0Change}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+}