diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js
index 735aa2bb837..db9d945cfc1 100644
--- 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: (
-
- Option one
-
-
- Has a short description giving more detail to the option.
-
-
- ),
},
{
value: 'option_two',
- inputDisplay: (
-
- Option two
-
- ),
- dropdownDisplay: (
-
- Option two
-
-
- Has a short description giving more detail to the option.
-
-
- ),
+ inputDisplay: "Option two",
},
{
value: 'option_three',
inputDisplay: 'Option three has a super long text to see if it will truncate or what',
- dropdownDisplay: (
-
- Option three
-
-
- Has a short description giving more detail to the option.
-
-
- ),
},
];
@@ -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
new file mode 100644
index 00000000000..57bdf074b80
--- /dev/null
+++ 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: (
+
+ Warning
+
+ ),
+ },
+ {
+ value: 'minor',
+ inputDisplay: (
+
+ Minor
+
+ ),
+ },
+ {
+ value: 'critical',
+ inputDisplay: (
+
+ Critical
+
+ ),
+ },
+ ];
+
+ this.state = {
+ value: this.options[1].value,
+ };
+ }
+
+ onChange = (value) => {
+ this.setState({
+ value: value,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/super_select/super_select_complex.js b/src-docs/src/views/super_select/super_select_complex.js
new file mode 100644
index 00000000000..606f5cacba4
--- /dev/null
+++ 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: (
+
+ Option one
+
+
+ Has a short description giving more detail to the option.
+
+
+ ),
+ },
+ {
+ value: 'option_two',
+ inputDisplay: "Option two",
+ dropdownDisplay: (
+
+ Option two
+
+
+ Has a short description giving more detail to the option.
+
+
+ ),
+ },
+ {
+ value: 'option_three',
+ inputDisplay: 'Option three',
+ dropdownDisplay: (
+
+ Option three
+
+
+ Has a short description giving more detail to the option.
+
+
+ ),
+ },
+ ];
+
+ this.state = {
+ value: this.options[1].value,
+ };
+ }
+
+ onChange = (value) => {
+ this.setState({
+ value: value,
+ });
+ };
+
+ render() {
+ return (
+
+
+
+ );
+ }
+}
diff --git a/src-docs/src/views/super_select/super_select_example.js b/src-docs/src/views/super_select/super_select_example.js
index 76373b2d624..5b7d5360c1d 100644
--- 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: (
+
+
+ This is a simple replacement component for EuiSelect if you
+ need more customization in either the display of the input or option. Simply pass
+ an array of option objects:
+
+
+ - value: for storing unique value of item,
+ - inputDisplay: what shows inside the form input when selected,
+ - dropdownDisplay: (optional) what shows for the item in the dropdown
+
+
+ … and the component will create a select styled button
+ that triggers a popover of selectable items.
+
+
+ Both inputDisplay and dropdownDisplay 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 hasDividers prop to show borders between options.
+
+ ),
+ props: { },
+ demo: ,
+ },
+ {
+ title: 'States',
source: [{
type: GuideSectionTypes.JS,
code: superSelectSource,
@@ -28,7 +85,8 @@ export const SuperSelectExample = {
}],
text: (
- Description needed: how to use the EuiSuperSelect component.
+ You can pass the same props as you normally would to EuiSelect like
+ disabled, isLoading, compressed, etc…
),
props: { EuiSuperSelect },
diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js
index 1cb254d9520..e2126a34d98 100644
--- 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}
@@ -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 = {