Splitting up examples

elastic · Jun 26, 2018 · 42a4b9e · 42a4b9e
1 parent 2a4c254
commit 42a4b9e
Show file tree

Hide file tree

Showing 5 changed files with 215 additions and 38 deletions.
diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js
@@ -6,8 +6,6 @@ import React, {
 import {
   EuiSuperSelect,
   EuiSpacer,
-  EuiText,
-  EuiIcon,
 } from '../../../../src/components';
 
 export default class extends Component {
@@ -18,45 +16,14 @@ export default class extends Component {
       {
         value: 'option_one',
         inputDisplay: 'Option one',
-        dropdownDisplay: (
-          <Fragment>
-            <strong>Option one</strong>
-            <EuiSpacer size="xs" />
-            <EuiText size="s" color="subdued">
-              <p className="euiTextColor--subdued">Has a short description giving more detail to the option.</p>
-            </EuiText>
-          </Fragment>
-        ),
       },
       {
         value: 'option_two',
-        inputDisplay: (
-          <span>
-            <EuiIcon type="alert" /> Option two
-          </span>
-        ),
-        dropdownDisplay: (
-          <Fragment>
-            <strong>Option two</strong>
-            <EuiSpacer size="xs" />
-            <EuiText size="s" color="subdued">
-              <p className="euiTextColor--subdued">Has a short description giving more detail to the option.</p>
-            </EuiText>
-          </Fragment>
-        ),
+        inputDisplay: "Option two",
       },
       {
         value: 'option_three',
         inputDisplay: 'Option three has a super long text to see if it will truncate or what',
-        dropdownDisplay: (
-          <Fragment>
-            <strong>Option three</strong>
-            <EuiSpacer size="xs" />
-            <EuiText size="s" color="subdued">
-              <p className="euiTextColor--subdued">Has a short description giving more detail to the option.</p>
-            </EuiText>
-          </Fragment>
-        ),
       },
     ];
 
@@ -78,7 +45,6 @@ export default class extends Component {
           options={this.options}
           valueOfSelected={this.state.value}
           onChange={this.onChange}
-          hasDividers
           aria-label="Use aria labels when no actual label is in use"
         />
 

diff --git a/src-docs/src/views/super_select/super_select_basic.js b/src-docs/src/views/super_select/super_select_basic.js
@@ -0,0 +1,65 @@
+import React, {
+  Component,
+  Fragment,
+} from 'react';
+
+import {
+  EuiSuperSelect,
+  EuiHealth,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.options = [
+      {
+        value: 'warning',
+        inputDisplay: (
+          <EuiHealth color="subdued">
+            Warning
+          </EuiHealth>
+        ),
+      },
+      {
+        value: 'minor',
+        inputDisplay: (
+          <EuiHealth color="warning">
+            Minor
+          </EuiHealth>
+        ),
+      },
+      {
+        value: 'critical',
+        inputDisplay: (
+          <EuiHealth color="danger">
+            Critical
+          </EuiHealth>
+        ),
+      },
+    ];
+
+    this.state = {
+      value: this.options[1].value,
+    };
+  }
+
+  onChange = (value) => {
+    this.setState({
+      value: value,
+    });
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <EuiSuperSelect
+          options={this.options}
+          valueOfSelected={this.state.value}
+          onChange={this.onChange}
+          aria-label="Health levels"
+        />
+      </Fragment>
+    );
+  }
+}
diff --git a/src-docs/src/views/super_select/super_select_complex.js b/src-docs/src/views/super_select/super_select_complex.js
@@ -0,0 +1,83 @@
+import React, {
+  Component,
+  Fragment,
+} from 'react';
+
+import {
+  EuiSuperSelect,
+  EuiSpacer,
+  EuiText,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.options = [
+      {
+        value: 'option_one',
+        inputDisplay: 'Option one',
+        dropdownDisplay: (
+          <Fragment>
+            <strong>Option one</strong>
+            <EuiSpacer size="xs" />
+            <EuiText size="s" color="subdued">
+              <p className="euiTextColor--subdued">Has a short description giving more detail to the option.</p>
+            </EuiText>
+          </Fragment>
+        ),
+      },
+      {
+        value: 'option_two',
+        inputDisplay: "Option two",
+        dropdownDisplay: (
+          <Fragment>
+            <strong>Option two</strong>
+            <EuiSpacer size="xs" />
+            <EuiText size="s" color="subdued">
+              <p className="euiTextColor--subdued">Has a short description giving more detail to the option.</p>
+            </EuiText>
+          </Fragment>
+        ),
+      },
+      {
+        value: 'option_three',
+        inputDisplay: 'Option three',
+        dropdownDisplay: (
+          <Fragment>
+            <strong>Option three</strong>
+            <EuiSpacer size="xs" />
+            <EuiText size="s" color="subdued">
+              <p className="euiTextColor--subdued">Has a short description giving more detail to the option.</p>
+            </EuiText>
+          </Fragment>
+        ),
+      },
+    ];
+
+    this.state = {
+      value: this.options[1].value,
+    };
+  }
+
+  onChange = (value) => {
+    this.setState({
+      value: value,
+    });
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <EuiSuperSelect
+          options={this.options}
+          valueOfSelected={this.state.value}
+          onChange={this.onChange}
+          itemLayoutAlign="top"
+          hasDividers
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      </Fragment>
+    );
+  }
+}
diff --git a/src-docs/src/views/super_select/super_select_example.js b/src-docs/src/views/super_select/super_select_example.js
@@ -15,10 +15,67 @@ import SuperSelect from './super_select';
 const superSelectSource = require('!!raw-loader!./super_select');
 const superSelectHtml = renderToHtml(SuperSelect);
 
+import SuperSelectBasic from './super_select_basic';
+const superSelectBasicSource = require('!!raw-loader!./super_select_basic');
+const superSelectBasicHtml = renderToHtml(SuperSelectBasic);
+
+import SuperSelectComplex from './super_select_complex';
+const superSelectComplexSource = require('!!raw-loader!./super_select_complex');
+const superSelectComplexHtml = renderToHtml(SuperSelectComplex);
+
 export const SuperSelectExample = {
   title: 'SuperSelect',
   sections: [{
-    title: 'SuperSelect',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: superSelectBasicSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: superSelectBasicHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          This is a simple replacement component for <EuiCode>EuiSelect</EuiCode> if you
+          need more customization in either the display of the input or option. Simply pass
+          an array of option objects:
+        </p>
+        <ul>
+          <li><EuiCode>value</EuiCode>: for storing unique value of item, </li>
+          <li><EuiCode>inputDisplay</EuiCode>: what shows inside the form input when selected, </li>
+          <li><EuiCode>dropdownDisplay</EuiCode>: (optional) what shows for the item in the dropdown</li>
+        </ul>
+        <p>
+          &hellip; and the component will create a select styled button
+          that triggers a popover of selectable items.
+        </p>
+      </div>
+    ),
+    props: { EuiSuperSelect },
+    demo: <SuperSelectBasic />,
+  },
+  {
+    title: 'More complex',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: superSelectComplexSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: superSelectComplexHtml,
+    }],
+    text: (
+      <p>
+        Both <EuiCode>inputDisplay</EuiCode> and <EuiCode>dropdownDisplay</EuiCode> accept
+        React nodes. Therefore you can pass some descriptions with each option to show
+        in the dropdown. If your options will most likely be multi-line, add
+        the <EuiCode>hasDividers</EuiCode> prop to show borders between options.
+      </p>
+    ),
+    props: { },
+    demo: <SuperSelectComplex />,
+  },
+  {
+    title: 'States',
     source: [{
       type: GuideSectionTypes.JS,
       code: superSelectSource,
@@ -28,7 +85,8 @@ export const SuperSelectExample = {
     }],
     text: (
       <p>
-        Description needed: how to use the <EuiCode>EuiSuperSelect</EuiCode> component.
+        You can pass the same props as you normally would to <EuiCode>EuiSelect</EuiCode> like
+        disabled, isLoading, compressed, etc&hellip;
       </p>
     ),
     props: { EuiSuperSelect },

diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js
@@ -45,6 +45,7 @@ export class EuiSuperSelect extends Component {
       isOpen,
       hasDividers,
       itemClassName,
+      itemLayoutAlign,
       ...rest
     } = this.props;
 
@@ -81,7 +82,7 @@ export class EuiSuperSelect extends Component {
           className={itemClasses}
           icon={valueOfSelected === option.value ? "check" : "empty"}
           onClick={() => this.itemClicked(option.value)}
-          layoutAlign="top"
+          layoutAlign={itemLayoutAlign}
         >
           {option.dropdownDisplay || option.inputDisplay}
         </EuiContextMenuItem>
@@ -136,6 +137,10 @@ EuiSuperSelect.propTypes = {
    * This is best used when options are multi-line.
    */
   hasDividers: PropTypes.bool,
+  /**
+   * Change `EuiContextMenuItem` layout position of icon
+   */
+  itemLayoutAlign: PropTypes.string,
 };
 
 EuiSuperSelect.defaultProps = {