EuiSuperSelect (#921)

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `zIndexAdjustment` to `EuiPopover` which allows tweaking the popover content's `z-index` ([#1097](https://github.com/elastic/eui/pull/1097))
+- Added new `EuiSuperSelect` component and `hasArrow` prop to `EuiPopover` ([#921](https://github.com/elastic/eui/pull/921))
 
 ## [`3.6.1`](https://github.com/elastic/eui/tree/v3.6.1)
 

src-docs/src/routes.js

@@ -237,6 +237,9 @@ import { XYChartLineExample }
 import { Changelog }
   from './views/package/changelog';
 
+import { SuperSelectExample }
+  from './views/super_select/super_select_example';
+
 /**
  * Lowercases input and replaces spaces with hyphens:
  * e.g. 'GridView Example' -> 'gridview-example'
@@ -356,6 +359,7 @@ const navigation = [{
     FormLayoutsExample,
     FormControlsExample,
     FormValidationExample,
+    SuperSelectExample,
     ComboBoxExample,
     ColorPickerExample,
     CodeEditorExample,

src-docs/src/views/form_controls/form_controls_example.js

@@ -182,6 +182,14 @@ export const FormControlsExample = {
       type: GuideSectionTypes.HTML,
       code: selectHtml,
     }],
+    text: (
+      <p>
+        This component renders a basic HTML <code>&lt;select&gt;</code> element. If you need more customization
+        for how the options and/or selected values render, use the <EuiLink href="/#/forms/superselect">EuiSuperSelect</EuiLink>.
+        Another option is to use the <EuiLink href="/#/forms/combo-box">EuiComboBox</EuiLink>, which has search and multi-select
+        capabilities, but also has restrictions on how items are rendered.
+      </p>
+    ),
     props: {
       EuiSelect,
     },

src-docs/src/views/super_select/super_select.js

@@ -0,0 +1,91 @@
+import React, {
+  Component,
+  Fragment,
+} from 'react';
+
+import {
+  EuiSuperSelect,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.options = [
+      {
+        value: 'option_one',
+        inputDisplay: 'Option one',
+        disabled: true,
+        'data-test-subj': 'option one',
+      },
+      {
+        value: 'option_two',
+        inputDisplay: 'Option two',
+      },
+      {
+        value: 'option_three',
+        inputDisplay: 'Option three has a super long text to see if it will truncate or what',
+      },
+    ];
+
+    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}
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiSuperSelect
+          options={this.options}
+          valueOfSelected={this.state.value}
+          onChange={this.onChange}
+          disabled
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiSuperSelect
+          options={this.options}
+          valueOfSelected={this.state.value}
+          onChange={this.onChange}
+          isLoading
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiSuperSelect
+          options={this.options}
+          valueOfSelected={this.state.value}
+          onChange={this.onChange}
+          isLoading
+          disabled
+        />
+
+        <EuiSpacer size="m" />
+
+        <EuiSuperSelect
+          options={this.options}
+          valueOfSelected={this.state.value}
+          onChange={this.onChange}
+          compressed
+        />
+      </Fragment>
+    );
+  }
+}

src-docs/src/views/super_select/super_select_basic.js

@@ -0,0 +1,65 @@
+import React, {
+  Component,
+} 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" style={{ lineHeight: 'inherit' }}>
+            Warning
+          </EuiHealth>
+        ),
+        'data-test-subj': 'option-warning',
+        disabled: true,
+      },
+      {
+        value: 'minor',
+        inputDisplay: (
+          <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
+            Minor
+          </EuiHealth>
+        ),
+        'data-test-subj': 'option-minor',
+      },
+      {
+        value: 'critical',
+        inputDisplay: (
+          <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
+            Critical
+          </EuiHealth>
+        ),
+        'data-test-subj': 'option-critical',
+      },
+    ];
+
+    this.state = {
+      value: this.options[1].value,
+    };
+  }
+
+  onChange = (value) => {
+    this.setState({
+      value: value,
+    });
+  };
+
+  render() {
+    return (
+      <EuiSuperSelect
+        options={this.options}
+        valueOfSelected={this.state.value}
+        onChange={this.onChange}
+      />
+    );
+  }
+}

src-docs/src/views/super_select/super_select_complex.js

@@ -0,0 +1,78 @@
+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 });
+  };
+
+  render() {
+    return (
+      <EuiSuperSelect
+        options={this.options}
+        valueOfSelected={this.state.value}
+        onChange={this.onChange}
+        itemLayoutAlign="top"
+        hasDividers
+      />
+    );
+  }
+}

src-docs/src/views/super_select/super_select_example.js

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiSuperSelect,
+} from '../../../../src/components';
+
+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: [{
+    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,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: superSelectHtml,
+    }],
+    text: (
+      <p>
+        You can pass the same props as you normally would to <EuiCode>EuiSelect</EuiCode> like
+        disabled, isLoading, compressed, etc&hellip;
+      </p>
+    ),
+    props: { EuiSuperSelect },
+    demo: <SuperSelect />,
+  }],
+};

src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap

@@ -16,6 +16,7 @@ exports[`CollapsedItemActions render 1`] = `
     />
   }
   closePopover={[Function]}
+  hasArrow={true}
   id="id-actions"
   isOpen={false}
   ownFocus={false}
@@ -29,12 +30,14 @@ exports[`CollapsedItemActions render 1`] = `
         <EuiContextMenuItem
           disabled={false}
           icon={undefined}
+          layoutAlign="center"
           onClick={[Function]}
           toolTipPosition="right"
         >
           default1
         </EuiContextMenuItem>,
         <EuiContextMenuItem
+          layoutAlign="center"
           onClick={[Function]}
           toolTipPosition="right"
         />,