From 0c6aa9789ba6fd646a56d56edb2b9661485d3ac3 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 7 Jun 2018 17:39:32 -0400 Subject: [PATCH 01/34] Revert "Added logo for EMS (Elastic Map Service)" This reverts commit 130bd222813109065894fdcab63926040c01e0e6. --- src-docs/src/views/icon/apps.js | 1 - src/components/icon/icon.js | 2 -- 2 files changed, 3 deletions(-) diff --git a/src-docs/src/views/icon/apps.js b/src-docs/src/views/icon/apps.js index ee3a86ac574..a407cf8c558 100644 --- a/src-docs/src/views/icon/apps.js +++ b/src-docs/src/views/icon/apps.js @@ -16,7 +16,6 @@ const iconTypes = [ 'dashboardApp', 'devToolsApp', 'discoverApp', - 'emsApp', 'graphApp', 'grokApp', 'indexManagementApp', diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js index 9cab580f3d3..5ddc729dcdb 100644 --- a/src/components/icon/icon.js +++ b/src/components/icon/icon.js @@ -56,7 +56,6 @@ import editorTable from './assets/editor_table.svg'; import editorUnderline from './assets/editor_underline.svg'; import editorUnorderedList from './assets/editor_unordered_list.svg'; import empty from './assets/empty.svg'; -import emsApp from './assets/app_ems.svg'; import exit from './assets/exit.svg'; import expand from './assets/expand.svg'; import exportAction from './assets/export.svg'; @@ -267,7 +266,6 @@ const typeToIconMap = { editorUnderline, editorUnorderedList, empty, - emsApp, exit, expand, exportAction, From fde6cb06a0c6bbdfef3ad5c4616c4ed1cd16f6e1 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 11 Jun 2018 15:58:52 -0400 Subject: [PATCH 02/34] Revert "Revert "Added logo for EMS (Elastic Map Service)"" This reverts commit dc9f832ed6d7115339addbe056775fd18411d402. --- src-docs/src/views/icon/apps.js | 1 + src/components/icon/icon.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src-docs/src/views/icon/apps.js b/src-docs/src/views/icon/apps.js index a407cf8c558..ee3a86ac574 100644 --- a/src-docs/src/views/icon/apps.js +++ b/src-docs/src/views/icon/apps.js @@ -16,6 +16,7 @@ const iconTypes = [ 'dashboardApp', 'devToolsApp', 'discoverApp', + 'emsApp', 'graphApp', 'grokApp', 'indexManagementApp', diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js index 5ddc729dcdb..9cab580f3d3 100644 --- a/src/components/icon/icon.js +++ b/src/components/icon/icon.js @@ -56,6 +56,7 @@ import editorTable from './assets/editor_table.svg'; import editorUnderline from './assets/editor_underline.svg'; import editorUnorderedList from './assets/editor_unordered_list.svg'; import empty from './assets/empty.svg'; +import emsApp from './assets/app_ems.svg'; import exit from './assets/exit.svg'; import expand from './assets/expand.svg'; import exportAction from './assets/export.svg'; @@ -266,6 +267,7 @@ const typeToIconMap = { editorUnderline, editorUnorderedList, empty, + emsApp, exit, expand, exportAction, From 4130ef06070c43bd3e626063ff90688b8116233c Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 11 Jun 2018 17:58:54 -0400 Subject: [PATCH 03/34] Basic `EuiSuperSelect` created --- src-docs/src/routes.js | 4 + .../src/views/super_select/super_select.js | 176 ++++++++++++++++++ .../super_select/super_select_example.js | 37 ++++ src/components/form/_index.scss | 1 + src/components/form/index.js | 1 + .../__snapshots__/super_select.test.js.snap | 50 +++++ src/components/form/super_select/_index.scss | 1 + .../form/super_select/_super_select.scss | 36 ++++ src/components/form/super_select/index.js | 3 + .../form/super_select/super_select.js | 127 +++++++++++++ .../form/super_select/super_select.test.js | 16 ++ src/components/index.js | 1 + 12 files changed, 453 insertions(+) create mode 100644 src-docs/src/views/super_select/super_select.js create mode 100644 src-docs/src/views/super_select/super_select_example.js create mode 100644 src/components/form/super_select/__snapshots__/super_select.test.js.snap create mode 100644 src/components/form/super_select/_index.scss create mode 100644 src/components/form/super_select/_super_select.scss create mode 100644 src/components/form/super_select/index.js create mode 100644 src/components/form/super_select/super_select.js create mode 100644 src/components/form/super_select/super_select.test.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index f2de5c15871..1017b0f6edd 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -234,6 +234,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' @@ -353,6 +356,7 @@ const navigation = [{ FormLayoutsExample, FormControlsExample, FormValidationExample, + SuperSelectExample, ComboBoxExample, ColorPickerExample, CodeEditorExample, diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js new file mode 100644 index 00000000000..ef7d91bb53e --- /dev/null +++ b/src-docs/src/views/super_select/super_select.js @@ -0,0 +1,176 @@ +import React, { + Component, + Fragment, +} from 'react'; + +import { + EuiSuperSelect, + EuiSpacer, + EuiContextMenuItem, + EuiContextMenuPanel, + EuiPopover, + EuiText, + EuiIcon, +} from '../../../../src/components'; + +export default class extends Component { + constructor(props) { + super(props); + + this.options = [ + { + value: 'option_one', + text: 'Option one', + display: ( + + +

Option one

+

Has a short description giving more detail to the option.

+ + + ), + }, + { + value: 'option_two', + text: ( + + Option two + + ), + display: ( + + +

Option Two

+

Has a short description giving more detail to the option.

+ + + ), + }, + { + value: 'option_three', + text: 'Option three has a super long text to see if it will truncate or what', + display: ( + + +

Option Three

+

Has a short description giving more detail to the option.

+ + + ), + }, + ]; + + this.state = { + value: this.options[1].value, + isPopoverOpen: false, + }; + } + + onButtonClick = () => { + this.setState(prevState => ({ + isPopoverOpen: !prevState.isPopoverOpen, + })); + }; + + closePopover = () => { + this.setState({ + isPopoverOpen: false, + }); + }; + + onChange = e => { + this.setState({ + value: e.target.value, + }); + }; + + itemClicked = (value) => { + this.setState({ + value: value, + isPopoverOpen: false, + }); + }; + + render() { + const button = ( + + ); + + const items = this.options.map((option, index) => { + return ( + this.itemClicked(option.value)} + > + {option.display} + + ); + }); + + 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 new file mode 100644 index 00000000000..76373b2d624 --- /dev/null +++ b/src-docs/src/views/super_select/super_select_example.js @@ -0,0 +1,37 @@ +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); + +export const SuperSelectExample = { + title: 'SuperSelect', + sections: [{ + title: 'SuperSelect', + source: [{ + type: GuideSectionTypes.JS, + code: superSelectSource, + }, { + type: GuideSectionTypes.HTML, + code: superSelectHtml, + }], + text: ( +

+ Description needed: how to use the EuiSuperSelect component. +

+ ), + props: { EuiSuperSelect }, + demo: , + }], +}; diff --git a/src/components/form/_index.scss b/src/components/form/_index.scss index 42e041a9695..689fdbb54a3 100644 --- a/src/components/form/_index.scss +++ b/src/components/form/_index.scss @@ -19,5 +19,6 @@ @import 'radio/index'; @import 'range/index'; @import 'select/index'; +@import 'super_select/index'; @import 'switch/index'; @import 'text_area/index'; diff --git a/src/components/form/index.js b/src/components/form/index.js index f04fdc5605b..1c40228c928 100644 --- a/src/components/form/index.js +++ b/src/components/form/index.js @@ -20,6 +20,7 @@ export { } from './radio'; export { EuiRange } from './range'; export { EuiSelect } from './select'; +export { EuiSuperSelect } from './super_select'; export { EuiSwitch } from './switch'; export { EuiTextArea } from './text_area'; export { EuiValidatableControl } from './validatable_control'; diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap new file mode 100644 index 00000000000..ff2d693b1ae --- /dev/null +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -0,0 +1,50 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiSuperSelect is rendered 1`] = ` +Array [ + + {emptyOptionNode} + {options.map((option, index) => { + const { + text, // eslint-disable-line no-unused-vars + ...rest + } = option; + return @@ -160,7 +145,9 @@ export default class extends Component { isLoading disabled aria-label="Use aria labels when no actual label is in use" - /> + > + {items} + @@ -169,7 +156,9 @@ export default class extends Component { value={this.state.value} onChange={this.onChange} compressed - /> + > + {items} + ); } diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap index 3e3483542f8..99fb827f551 100644 --- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap +++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap @@ -29,12 +29,14 @@ exports[`CollapsedItemActions render 1`] = ` default1 , , diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap index 2fbd9f164b9..9a581184bb9 100644 --- a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap +++ b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap @@ -433,7 +433,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should "
- + - + - + - + - +
, +] +`; diff --git a/src/components/form/super_select/_index.scss b/src/components/form/super_select/_index.scss index f0f96af1339..ce308688e46 100644 --- a/src/components/form/super_select/_index.scss +++ b/src/components/form/super_select/_index.scss @@ -1 +1,2 @@ @import 'super_select'; +@import 'super_select_control'; diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss index 4babd22305d..f6ec500598c 100644 --- a/src/components/form/super_select/_super_select.scss +++ b/src/components/form/super_select/_super_select.scss @@ -1,36 +1,24 @@ -/** - * 1. Leave room for caret. - * 2. Ensure the descenders don't get cut off +/* + * 1. Make popover the same width as the form control + * 2. Style popover similar to combobox + * 3. Specificity to override default popover */ - .euiSuperSelect { - @include euiFormControlStyle; - @include euiFormControlWithIcon($side: "right"); /* 1 */ - @include euiFormControlIsLoading($isNextToIcon: true); - text-align: left; + .euiSuperSelect .euiSuperSelect__popoverPanel { /* 3 */ + width: calc(100% + 2px); /* 1 */ - line-height: $euiFormControlHeight; /* 2 */ - padding-top: 0; /* 2 */ - padding-bottom: 0; /* 2 */ - - &--compressed { - line-height: $euiFormControlHeight--compressed; /* 2 */ - padding-top: 0; /* 2 */ - padding-bottom: 0; /* 2 */ + &::before, + &::after { + content: none; /* 2 */ } +} - // Truncate the text - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:active { // since this is a button, we also want the visual indicator of active when options are shown - @include euiFormControlFocusStyle; - } +.euiSuperSelect .euiPopover--anchorDownCenter .euiSuperSelect__popoverPanel { /* 3 */ + border-top-color: transparentize($euiBorderColor, .2); + border-top-right-radius: 0; /* 2 */ + border-top-left-radius: 0; /* 2 */ } -.euiSuperSelect__hiddenField { - // This should be completely hidden even from screen readers, - // it's meant only to allow submission of a form. - display: none; +.euiSuperSelect .euiPopover--anchorDownCenter.euiPopover-isOpen .euiSuperSelect__popoverPanel { /* 3 */ + transform: translateX(-50%) translateY(0) translateZ(0); /* 2 */ } diff --git a/src/components/form/super_select/_super_select_control.scss b/src/components/form/super_select/_super_select_control.scss new file mode 100644 index 00000000000..96a16d0ee8a --- /dev/null +++ b/src/components/form/super_select/_super_select_control.scss @@ -0,0 +1,36 @@ +/** + * 1. Leave room for caret. + * 2. Ensure the descenders don't get cut off + */ + + .euiSuperSelectControl { + @include euiFormControlStyle; + @include euiFormControlWithIcon($side: "right"); /* 1 */ + @include euiFormControlIsLoading($isNextToIcon: true); + text-align: left; + + line-height: $euiFormControlHeight; /* 2 */ + padding-top: 0; /* 2 */ + padding-bottom: 0; /* 2 */ + + &--compressed { + line-height: $euiFormControlHeight--compressed; /* 2 */ + padding-top: 0; /* 2 */ + padding-bottom: 0; /* 2 */ + } + + // Truncate the text + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &.euiSuperSelect--isOpen__button { // since this is a button, we also want the visual indicator of active when options are shown + @include euiFormControlFocusStyle; + } +} + +.euiSuperSelectControl__hiddenField { + // This should be completely hidden even from screen readers, + // it's meant only to allow submission of a form. + display: none; +} diff --git a/src/components/form/super_select/_test.scss b/src/components/form/super_select/_test.scss new file mode 100644 index 00000000000..c8976df1730 --- /dev/null +++ b/src/components/form/super_select/_test.scss @@ -0,0 +1,3 @@ +.euiTest { + +} diff --git a/src/components/form/super_select/index.js b/src/components/form/super_select/index.js index c07dc183a55..18075be5062 100644 --- a/src/components/form/super_select/index.js +++ b/src/components/form/super_select/index.js @@ -1,3 +1,7 @@ export { EuiSuperSelect, } from './super_select'; + +export { + EuiSuperSelectControl, +} from './super_select_control'; diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js index ce59f39f3b9..a37037765b8 100644 --- a/src/components/form/super_select/super_select.js +++ b/src/components/form/super_select/super_select.js @@ -1,127 +1,100 @@ -import React, { Fragment } from 'react'; +import React, { + Component, +} from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { - EuiFormControlLayout, -} from '../form_control_layout'; +import { EuiSuperSelectControl } from './super_select_control'; +import { EuiPopover } from '../../popover'; -export const EuiSuperSelect = ({ - className, - options, - id, - name, - inputRef, - fullWidth, - isLoading, - hasNoInitialSelection, - defaultValue, - compressed, - value, - ...rest -}) => { - const classes = classNames( - 'euiSuperSelect', - { - 'euiSuperSelect--fullWidth': fullWidth, - 'euiSuperSelect--compressed': compressed, - 'euiSuperSelect-isLoading': isLoading, - }, - className - ); +export class EuiSuperSelect extends Component { + constructor(props) { + super(props); - let emptyOptionNode; - if (hasNoInitialSelection) { - emptyOptionNode = ( - - ); + this.state = { + isPopoverOpen: props.isOpen || false, + }; } - // React HTML input can not have both value and defaultValue properties. - // https://reactjs.org/docs/uncontrolled-components.html#default-values - let selectDefaultValue; - if (!value) { - selectDefaultValue = defaultValue || ''; - } + onButtonClick = () => { + this.setState(prevState => ({ + isPopoverOpen: !prevState.isPopoverOpen, + })); + }; - let selectedValue; - if (value) { - const selectedOption = options.find(option => option.value === value); - selectedValue = selectedOption.text; - } + closePopover = () => { + this.setState({ + isPopoverOpen: false, + }); + }; - const icon = { - type: 'arrowDown', - side: 'right', + itemClicked = () => { + this.setState({ + isPopoverOpen: false, + }); + + this.props.onChange(); }; - return ( - - - - + /> + ); - - - - - ); -}; + {children} + +
+ ); + } +} EuiSuperSelect.propTypes = { name: PropTypes.string, - id: PropTypes.string, - options: PropTypes.arrayOf(PropTypes.shape({ - value: PropTypes.node.isRequired, - text: PropTypes.node.isRequired - })).isRequired, - isInvalid: PropTypes.bool, - fullWidth: PropTypes.bool, - isLoading: PropTypes.bool, - - /** - * Simulates no selection by creating an empty, selected, hidden first option - */ - hasNoInitialSelection: PropTypes.bool, - inputRef: PropTypes.func, /** - * when `true` creates a shorter height input + * You must pass an onChange function to hande the update of the value */ - compressed: PropTypes.bool, + onChange: PropTypes.func, }; EuiSuperSelect.defaultProps = { - options: [], - fullWidth: false, - isLoading: false, - hasNoInitialSelection: false, - compressed: false, }; diff --git a/src/components/form/super_select/super_select_control.js b/src/components/form/super_select/super_select_control.js new file mode 100644 index 00000000000..590c95b0918 --- /dev/null +++ b/src/components/form/super_select/super_select_control.js @@ -0,0 +1,129 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { + EuiFormControlLayout, +} from '../form_control_layout'; + +export const EuiSuperSelectControl = ({ + className, + options, + id, + name, + inputRef, + fullWidth, + isLoading, + hasNoInitialSelection, + defaultValue, + compressed, + value, + ...rest +}) => { + const classes = classNames( + 'euiSuperSelectControl', + { + 'euiSuperSelectControl--fullWidth': fullWidth, + 'euiSuperSelectControl--compressed': compressed, + 'euiSuperSelectControl-isLoading': isLoading, + }, + className + ); + + let emptyOptionNode; + if (hasNoInitialSelection) { + emptyOptionNode = ( + + ); + } + + // React HTML input can not have both value and defaultValue properties. + // https://reactjs.org/docs/uncontrolled-components.html#default-values + let selectDefaultValue; + if (!value) { + selectDefaultValue = defaultValue || ''; + } + + let selectedValue; + if (value) { + const selectedOption = options.find(option => option.value === value); + selectedValue = selectedOption.text; + } + + const icon = { + type: 'arrowDown', + side: 'right', + }; + + return ( + + + + + + + + + + ); +}; + +EuiSuperSelectControl.propTypes = { + name: PropTypes.string, + id: PropTypes.string, + options: PropTypes.arrayOf(PropTypes.shape({ + value: PropTypes.node.isRequired, + text: PropTypes.node.isRequired + })).isRequired, + isInvalid: PropTypes.bool, + fullWidth: PropTypes.bool, + isLoading: PropTypes.bool, + + /** + * Simulates no selection by creating an empty, selected, hidden first option + */ + hasNoInitialSelection: PropTypes.bool, + inputRef: PropTypes.func, + /** + * when `true` creates a shorter height input + */ + compressed: PropTypes.bool, +}; + +EuiSuperSelectControl.defaultProps = { + options: [], + fullWidth: false, + isLoading: false, + hasNoInitialSelection: false, + compressed: false, +}; diff --git a/src/components/form/super_select/super_select_control.test.js b/src/components/form/super_select/super_select_control.test.js new file mode 100644 index 00000000000..5448c47ffcd --- /dev/null +++ b/src/components/form/super_select/super_select_control.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../../test'; + +import { EuiSuperSelectControl } from './super_select_control'; + +describe('EuiSuperSelectControl', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/index.js b/src/components/index.js index 87039e68bce..c6f7a62bdeb 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -132,6 +132,7 @@ export { EuiRange, EuiSelect, EuiSuperSelect, + EuiSuperSelectControl, EuiSwitch, EuiTextArea, EuiValidatableControl, diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss index 6488daf7587..b579cd125f6 100644 --- a/src/components/text/_text.scss +++ b/src/components/text/_text.scss @@ -224,7 +224,8 @@ @include euiScaleText($euiFontSizeXS); } - > :last-child { + > :last-child, + .euiTextColor > :last-child { margin-bottom: 0 !important; } } From a6e1737aabb61219ae693ee153ee03de78294e68 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 12 Jun 2018 14:55:40 -0400 Subject: [PATCH 06/34] Moved mapping option to inside super select --- .../src/views/super_select/super_select.js | 74 +---- .../__snapshots__/super_select.test.js.snap | 247 +++++++++++--- .../super_select_control.test.js.snap | 309 ++++++++++++++++++ .../form/super_select/_super_select.scss | 15 +- .../form/super_select/super_select.js | 97 ++++-- .../form/super_select/super_select.test.js | 50 ++- .../form/super_select/super_select_control.js | 4 +- .../super_select/super_select_control.test.js | 73 +++++ 8 files changed, 739 insertions(+), 130 deletions(-) diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js index c7a52bd15ff..735aa2bb837 100644 --- a/src-docs/src/views/super_select/super_select.js +++ b/src-docs/src/views/super_select/super_select.js @@ -8,8 +8,6 @@ import { EuiSpacer, EuiText, EuiIcon, - EuiContextMenuItem, - EuiHorizontalRule, } from '../../../../src/components'; export default class extends Component { @@ -19,8 +17,8 @@ export default class extends Component { this.options = [ { value: 'option_one', - text: 'Option one', - display: ( + inputDisplay: 'Option one', + dropdownDisplay: ( Option one @@ -32,12 +30,12 @@ export default class extends Component { }, { value: 'option_two', - text: ( + inputDisplay: ( Option two ), - display: ( + dropdownDisplay: ( Option two @@ -49,8 +47,8 @@ export default class extends Component { }, { value: 'option_three', - text: 'Option three has a super long text to see if it will truncate or what', - display: ( + inputDisplay: 'Option three has a super long text to see if it will truncate or what', + dropdownDisplay: ( Option three @@ -64,101 +62,65 @@ export default class extends Component { this.state = { value: this.options[1].value, - isPopoverOpen: false, }; } - onChange = e => { - this.setState({ - value: e.target.value, - }); - }; - - itemClicked = (value) => { + onChange = (value) => { this.setState({ value: value, - isPopoverOpen: false, }); }; render() { - const items = this.options.map((option, index) => { - return ( - - this.itemClicked(option.value)} - layoutAlign="top" - > - {option.display} - - {index < this.options.length - 1 && - - } - - ); - }); - return ( - {items} - + /> - {items} - + /> - {items} - + /> - {items} - + /> - {items} - + /> ); } diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap index f404f4d6e1c..780c401467b 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -2,58 +2,223 @@ exports[`EuiSuperSelect is rendered 1`] = `
+
-
+
+ +`; + +exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = ` +
+ +
+
+
+`; + +exports[`EuiSuperSelect props options are rendered 1`] = ` +
+ +
+
+
+`; + +exports[`EuiSuperSelect props valueSelected is rendered 1`] = ` +
+ +
+ +
+ + +
diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap index d6ea56fdba3..94318ced541 100644 --- a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap @@ -50,3 +50,312 @@ Array [ , ] `; + +exports[`EuiSuperSelectControl props compressed is rendered 1`] = ` +Array [ + + + ); + }); + + return ( + + {items} + ); } } EuiSuperSelect.propTypes = { - name: PropTypes.string, /** - * You must pass an onChange function to hande the update of the value + * Classes (and `...rest`) will be applied to the control + */ + className: PropTypes.string, + /** + * Classes for the context menu item + */ + itemClassName: PropTypes.string, + /** + * You must pass an `onChange` function to handle the update of the value */ onChange: PropTypes.func, + /** + * Pass an array of options that must at least include: + * `value`: storing unique value of item, + * `inputDisplay`: what shows inside the form input when selected + * `dropdownDisplay` (optional): what shows for the item in the dropdown + */ + options: PropTypes.arrayOf( + PropTypes.shape({ + value: PropTypes.string.isRequired, + inputDisplay: PropTypes.node, + dropdownDisplay: PropTypes.node, + }), + ).isRequired, + valueOfSelected: PropTypes.string, + /** + * Change to `true` if you want horizontal lines between options. + * This is best used when options are multi-line. + */ + hasDividers: PropTypes.bool, }; EuiSuperSelect.defaultProps = { + options: [], }; diff --git a/src/components/form/super_select/super_select.test.js b/src/components/form/super_select/super_select.test.js index 34b0e55568b..e4a62829402 100644 --- a/src/components/form/super_select/super_select.test.js +++ b/src/components/form/super_select/super_select.test.js @@ -7,10 +7,58 @@ import { EuiSuperSelect } from './super_select'; describe('EuiSuperSelect', () => { test('is rendered', () => { const component = render( - + {}} /> ); expect(component) .toMatchSnapshot(); }); + + describe('props', () => { + test('options are rendered', () => { + const component = render( + {}} + /> + ); + + expect(component) + .toMatchSnapshot(); + }); + + test('valueSelected is rendered', () => { + const component = render( + {}} + /> + ); + + expect(component) + .toMatchSnapshot(); + }); + + test('custom display is propagated to dropdown', () => { + const component = render( + {}} + /> + ); + + expect(component) + .toMatchSnapshot(); + }); + }); }); diff --git a/src/components/form/super_select/super_select_control.js b/src/components/form/super_select/super_select_control.js index 590c95b0918..af699f95b35 100644 --- a/src/components/form/super_select/super_select_control.js +++ b/src/components/form/super_select/super_select_control.js @@ -47,7 +47,7 @@ export const EuiSuperSelectControl = ({ let selectedValue; if (value) { const selectedOption = options.find(option => option.value === value); - selectedValue = selectedOption.text; + selectedValue = selectedOption.inputDisplay; } const icon = { @@ -103,7 +103,7 @@ EuiSuperSelectControl.propTypes = { id: PropTypes.string, options: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.node.isRequired, - text: PropTypes.node.isRequired + inputDisplay: PropTypes.node.isRequired })).isRequired, isInvalid: PropTypes.bool, fullWidth: PropTypes.bool, diff --git a/src/components/form/super_select/super_select_control.test.js b/src/components/form/super_select/super_select_control.test.js index 5448c47ffcd..6e2e901b72f 100644 --- a/src/components/form/super_select/super_select_control.test.js +++ b/src/components/form/super_select/super_select_control.test.js @@ -13,4 +13,77 @@ describe('EuiSuperSelectControl', () => { expect(component) .toMatchSnapshot(); }); + + describe('props', () => { + test('options are rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + + test('fullWidth is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + + test('compressed is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + + test('isLoading is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + + test('disabled options are rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + + test('value option is rendered', () => { + const component = render( + {}} + /> + ); + + expect(component) + .toMatchSnapshot(); + }); + }); }); From cd667339e58e1810a53f3d909f68083bb1188800 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 12 Jun 2018 16:07:57 -0400 Subject: [PATCH 07/34] Splitting up examples --- .../src/views/super_select/super_select.js | 36 +------- .../views/super_select/super_select_basic.js | 65 +++++++++++++++ .../super_select/super_select_complex.js | 83 +++++++++++++++++++ .../super_select/super_select_example.js | 62 +++++++++++++- .../form/super_select/super_select.js | 7 +- 5 files changed, 215 insertions(+), 38 deletions(-) create mode 100644 src-docs/src/views/super_select/super_select_basic.js create mode 100644 src-docs/src/views/super_select/super_select_complex.js 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. +

+
+ ), + props: { EuiSuperSelect }, + demo: , + }, + { + title: 'More complex', + source: [{ + type: GuideSectionTypes.JS, + code: superSelectComplexSource, + }, { + type: GuideSectionTypes.HTML, + code: superSelectComplexHtml, + }], + text: ( +

+ 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 = { From 02975777af0820c5395c02b5e3ef7ca21149e6e3 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 18 Jul 2018 13:32:59 -0600 Subject: [PATCH 08/34] start on keyboard nav --- .../context_menu/context_menu_item.js | 4 ++-- .../form/super_select/super_select.js | 23 ++++++++++++++----- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/components/context_menu/context_menu_item.js b/src/components/context_menu/context_menu_item.js index c1f1a13a195..bf5f9611807 100644 --- a/src/components/context_menu/context_menu_item.js +++ b/src/components/context_menu/context_menu_item.js @@ -176,6 +176,6 @@ export class EuiContextMenuItem extends Component { } EuiContextMenuItem.defaultProps = { - toolTipPosition: "right", - layoutAlign: "center", + toolTipPosition: 'right', + layoutAlign: 'center', }; diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js index e2126a34d98..8f9b478a3ba 100644 --- a/src/components/form/super_select/super_select.js +++ b/src/components/form/super_select/super_select.js @@ -3,6 +3,7 @@ import React, { } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import tabbable from 'tabbable'; import { EuiSuperSelectControl } from './super_select_control'; import { EuiPopover } from '../../popover'; @@ -17,10 +18,18 @@ export class EuiSuperSelect extends Component { }; } - onButtonClick = () => { - this.setState(prevState => ({ - isPopoverOpen: !prevState.isPopoverOpen, - })); + setItemNode = (node, index) => { + + }; + + openPopover = () => { + this.setState({ + isPopoverOpen: true, + }); + + requestAnimationFrame(() => { + tabbable(); + }); }; closePopover = () => { @@ -69,7 +78,7 @@ export class EuiSuperSelect extends Component { options={options} value={valueOfSelected} onChange={onChange} - onClick={this.onButtonClick} + onClick={this.state.isPopoverOpen ? this.closePopover : this.openPopover} className={buttonClasses} {...rest} /> @@ -80,9 +89,10 @@ export class EuiSuperSelect extends Component { this.itemClicked(option.value)} layoutAlign={itemLayoutAlign} + buttonRef={node => this.setItemNode(node, index)} > {option.dropdownDisplay || option.inputDisplay} @@ -98,6 +108,7 @@ export class EuiSuperSelect extends Component { closePopover={this.closePopover} panelPaddingSize="none" anchorPosition="downCenter" + ownFocus={true} > {items} From 8007fab51d4f48c5523a8d0eb5b5772846f356d6 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Fri, 20 Jul 2018 13:30:50 -0600 Subject: [PATCH 09/34] keyboard navigation for EuiSuperSelect --- .../src/views/super_select/super_select.js | 2 +- .../super_select/super_select_complex.js | 2 +- .../form/super_select/super_select.js | 87 +++++++++++++++++-- 3 files changed, 83 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js index db9d945cfc1..2fdfd73240d 100644 --- a/src-docs/src/views/super_select/super_select.js +++ b/src-docs/src/views/super_select/super_select.js @@ -19,7 +19,7 @@ export default class extends Component { }, { value: 'option_two', - inputDisplay: "Option two", + inputDisplay: 'Option two', }, { value: 'option_three', diff --git a/src-docs/src/views/super_select/super_select_complex.js b/src-docs/src/views/super_select/super_select_complex.js index 606f5cacba4..25531396901 100644 --- a/src-docs/src/views/super_select/super_select_complex.js +++ b/src-docs/src/views/super_select/super_select_complex.js @@ -29,7 +29,7 @@ export default class extends Component { }, { value: 'option_two', - inputDisplay: "Option two", + inputDisplay: 'Option two', dropdownDisplay: ( Option two diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js index 8f9b478a3ba..67095cdd1d8 100644 --- a/src/components/form/super_select/super_select.js +++ b/src/components/form/super_select/super_select.js @@ -3,23 +3,27 @@ import React, { } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import tabbable from 'tabbable'; import { EuiSuperSelectControl } from './super_select_control'; import { EuiPopover } from '../../popover'; import { EuiContextMenuItem } from '../../context_menu'; +import { keyCodes } from '../../../services'; + +const SHIFT_BACK = 'back'; +const SHIFT_FORWARD = 'forward'; export class EuiSuperSelect extends Component { constructor(props) { super(props); + this.itemNodes = []; this.state = { isPopoverOpen: props.isOpen || false, }; } setItemNode = (node, index) => { - + this.itemNodes[index] = node; }; openPopover = () => { @@ -27,9 +31,24 @@ export class EuiSuperSelect extends Component { isPopoverOpen: true, }); - requestAnimationFrame(() => { - tabbable(); - }); + function focusSelected() { + const indexOfSelected = this.props.options.reduce( + (indexOfSelected, option, index) => { + if (indexOfSelected != null) return indexOfSelected; + if (option == null) return null; + return option.value === this.props.valueOfSelected ? index : null; + }, + null + ); + + if (indexOfSelected != null) { + this.focusItemAt(indexOfSelected); + } else { + requestAnimationFrame(focusSelected); + } + } + + requestAnimationFrame(focusSelected); }; closePopover = () => { @@ -45,6 +64,60 @@ export class EuiSuperSelect extends Component { this.props.onChange(value); }; + onSelectKeyDown = e => { + if (e.keyCode === keyCodes.UP || e.keyCode === keyCodes.DOWN) { + e.preventDefault(); + e.stopPropagation(); + this.openPopover(); + } + } + + onItemKeyDown = e => { + if (e.keyCode === keyCodes.ESCAPE) { + // close the popover and prevent ancestors from handling + e.preventDefault(); + e.stopPropagation(); + this.closePopover(); + } else if (e.keyCode === keyCodes.TAB) { + // no-op + e.preventDefault(); + e.stopPropagation(); + } else if (e.keyCode === keyCodes.UP) { + e.preventDefault(); + e.stopPropagation(); + this.shiftFocus(SHIFT_BACK); + } else if (e.keyCode === keyCodes.DOWN) { + e.preventDefault(); + e.stopPropagation(); + this.shiftFocus(SHIFT_FORWARD); + } + } + + focusItemAt(index) { + const targetElement = this.itemNodes[index]; + if (targetElement != null) { + targetElement.focus(); + } + } + + shiftFocus(direction) { + const currentIndex = this.itemNodes.indexOf(document.activeElement); + let targetElementIndex; + + if (currentIndex === -1) { + // somehow the select options has lost focus + targetElementIndex = 0; + } else { + if (direction === SHIFT_BACK) { + targetElementIndex = currentIndex === 0 ? this.itemNodes.length - 1 : currentIndex - 1; + } else { + targetElementIndex = currentIndex === this.itemNodes.length - 1 ? 0 : currentIndex + 1; + } + } + + this.focusItemAt(targetElementIndex); + } + render() { const { className, @@ -79,6 +152,7 @@ export class EuiSuperSelect extends Component { value={valueOfSelected} onChange={onChange} onClick={this.state.isPopoverOpen ? this.closePopover : this.openPopover} + onKeyDown={this.onSelectKeyDown} className={buttonClasses} {...rest} /> @@ -91,6 +165,7 @@ export class EuiSuperSelect extends Component { className={itemClasses} icon={valueOfSelected === option.value ? 'check' : 'empty'} onClick={() => this.itemClicked(option.value)} + onKeyDown={this.onItemKeyDown} layoutAlign={itemLayoutAlign} buttonRef={node => this.setItemNode(node, index)} > @@ -108,7 +183,7 @@ export class EuiSuperSelect extends Component { closePopover={this.closePopover} panelPaddingSize="none" anchorPosition="downCenter" - ownFocus={true} + ownFocus={false} > {items} From 80ae4c5af436a108a3f2608ff39dc58dd1bb3b0b Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Fri, 20 Jul 2018 14:54:06 -0600 Subject: [PATCH 10/34] fix incorrect 'this' access --- src/components/form/super_select/super_select.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js index 67095cdd1d8..80cffaa8f39 100644 --- a/src/components/form/super_select/super_select.js +++ b/src/components/form/super_select/super_select.js @@ -31,7 +31,7 @@ export class EuiSuperSelect extends Component { isPopoverOpen: true, }); - function focusSelected() { + const focusSelected = () => { const indexOfSelected = this.props.options.reduce( (indexOfSelected, option, index) => { if (indexOfSelected != null) return indexOfSelected; @@ -46,7 +46,7 @@ export class EuiSuperSelect extends Component { } else { requestAnimationFrame(focusSelected); } - } + }; requestAnimationFrame(focusSelected); }; From 22581e5bc05d063b278dc41d727075be0e7ac4d2 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 25 Jul 2018 09:17:35 -0600 Subject: [PATCH 11/34] wait for the option to be visible before focusing --- src/components/form/super_select/super_select.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js index 80cffaa8f39..7f4ca2552af 100644 --- a/src/components/form/super_select/super_select.js +++ b/src/components/form/super_select/super_select.js @@ -41,8 +41,10 @@ export class EuiSuperSelect extends Component { null ); + // valueOfSelected is optional, and options may not exist yet if (indexOfSelected != null) { - this.focusItemAt(indexOfSelected); + // wait for the CSS classes to be applied, removing visibility: hidden + requestAnimationFrame(() => this.focusItemAt(indexOfSelected)); } else { requestAnimationFrame(focusSelected); } From c966c742391c68f94472e37136f5494d87d5f37e Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 25 Jul 2018 13:54:48 -0400 Subject: [PATCH 12/34] Fix sass var name (and update tests) --- .../__snapshots__/super_select.test.js.snap | 352 +++++++------- .../super_select_control.test.js.snap | 432 ++++++++++-------- .../super_select/_super_select_control.scss | 2 +- 3 files changed, 423 insertions(+), 363 deletions(-) diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap index 780c401467b..bdd0208a264 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -4,50 +4,58 @@ exports[`EuiSuperSelect is rendered 1`] = `
- -
@@ -113,53 +129,61 @@ exports[`EuiSuperSelect props options are rendered 1`] = `
-
-
@@ -169,56 +193,64 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
-
- +
diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap index 94318ced541..8a33b8f4c7a 100644 --- a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap @@ -11,41 +11,45 @@ Array [
-
, ] @@ -60,39 +64,43 @@ Array [
-
, ] @@ -114,39 +122,43 @@ Array [
-
, ] @@ -161,39 +173,43 @@ Array [
-
, ] @@ -208,42 +224,46 @@ Array [
-
, ] @@ -265,39 +285,43 @@ Array [
-
, ] @@ -320,41 +344,45 @@ Array [
-
- + Option #1 + +
- - + + +
, ] diff --git a/src/components/form/super_select/_super_select_control.scss b/src/components/form/super_select/_super_select_control.scss index 96a16d0ee8a..dbf8bb4c2ed 100644 --- a/src/components/form/super_select/_super_select_control.scss +++ b/src/components/form/super_select/_super_select_control.scss @@ -14,7 +14,7 @@ padding-bottom: 0; /* 2 */ &--compressed { - line-height: $euiFormControlHeight--compressed; /* 2 */ + line-height: $euiFormControlCompressedHeight; /* 2 */ padding-top: 0; /* 2 */ padding-bottom: 0; /* 2 */ } From 548e5290a5b2530d7f07d60fb1405db35fe76e24 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 25 Jul 2018 14:33:15 -0400 Subject: [PATCH 13/34] remove arrow --- src/components/form/super_select/_super_select.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss index a7ed4b44e16..025bfcdacf7 100644 --- a/src/components/form/super_select/_super_select.scss +++ b/src/components/form/super_select/_super_select.scss @@ -7,14 +7,17 @@ .euiSuperSelect.euiPopover { /* 3 */ @include euiFormControlSize; /* 1 */ height: auto; + + .euiPopover__anchor { + display: block; + } } -.euiSuperSelect.euiPopover .euiSuperSelect__popoverPanel { /* 3 */ - width: calc(100% + 2px); /* 1 */ +.euiSuperSelect__popoverPanel { /* 3 */ + //width: calc(100% + 2px); /* 1 */ - &::before, - &::after { - content: none; /* 2 */ + .euiPopover__panel__arrow { + display: none; /* 2 */ } } From b254617e6339c15edd0fe6bd961be7cd51a66100 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 25 Jul 2018 14:07:38 -0600 Subject: [PATCH 14/34] Set EuiSuperSelect's menu width to match the select control's --- src/components/form/super_select/super_select.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js index 7f4ca2552af..b73e7bbc0b4 100644 --- a/src/components/form/super_select/super_select.js +++ b/src/components/form/super_select/super_select.js @@ -19,6 +19,7 @@ export class EuiSuperSelect extends Component { this.itemNodes = []; this.state = { isPopoverOpen: props.isOpen || false, + menuWidth: null, }; } @@ -26,6 +27,10 @@ export class EuiSuperSelect extends Component { this.itemNodes[index] = node; }; + setPopoverRef = ref => { + this.popoverRef = ref; + } + openPopover = () => { this.setState({ isPopoverOpen: true, @@ -44,7 +49,13 @@ export class EuiSuperSelect extends Component { // valueOfSelected is optional, and options may not exist yet if (indexOfSelected != null) { // wait for the CSS classes to be applied, removing visibility: hidden - requestAnimationFrame(() => this.focusItemAt(indexOfSelected)); + requestAnimationFrame(() => { + this.focusItemAt(indexOfSelected); + + this.setState({ + menuWidth: this.popoverRef.getBoundingClientRect().width, + }); + }); } else { requestAnimationFrame(focusSelected); } @@ -56,6 +67,7 @@ export class EuiSuperSelect extends Component { closePopover = () => { this.setState({ isPopoverOpen: false, + menuWidth: null, }); }; @@ -170,6 +182,7 @@ export class EuiSuperSelect extends Component { onKeyDown={this.onItemKeyDown} layoutAlign={itemLayoutAlign} buttonRef={node => this.setItemNode(node, index)} + style={{ width: this.state.menuWidth }} > {option.dropdownDisplay || option.inputDisplay} @@ -186,6 +199,7 @@ export class EuiSuperSelect extends Component { panelPaddingSize="none" anchorPosition="downCenter" ownFocus={false} + popoverRef={this.setPopoverRef} > {items} From 70163a320d75669d8e46411e4c2d82219c288bd7 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 30 Jul 2018 14:54:33 -0400 Subject: [PATCH 15/34] Allowing `EuiPopover` arrow to be optional Fixin some popover override css --- .../views/super_select/super_select_basic.js | 6 +++--- .../collapsed_item_actions.test.js.snap | 1 + .../__snapshots__/in_memory_table.test.js.snap | 1 + .../form/super_select/_super_select.scss | 18 ++++++++---------- .../form/super_select/super_select.js | 3 ++- src/components/popover/_popover.scss | 5 +++++ src/components/popover/index.d.ts | 1 + src/components/popover/popover.js | 8 ++++++-- .../field_value_selection_filter.test.js.snap | 4 ++++ 9 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src-docs/src/views/super_select/super_select_basic.js b/src-docs/src/views/super_select/super_select_basic.js index 57bdf074b80..c018d596b13 100644 --- a/src-docs/src/views/super_select/super_select_basic.js +++ b/src-docs/src/views/super_select/super_select_basic.js @@ -16,7 +16,7 @@ export default class extends Component { { value: 'warning', inputDisplay: ( - + Warning ), @@ -24,7 +24,7 @@ export default class extends Component { { value: 'minor', inputDisplay: ( - + Minor ), @@ -32,7 +32,7 @@ export default class extends Component { { value: 'critical', inputDisplay: ( - + Critical ), diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap index 99fb827f551..7f2c460a91f 100644 --- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap +++ b/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} diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap index d0d3fcdeda1..e94597cd9b7 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap @@ -270,6 +270,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` } closePopover={[Function]} + hasArrow={true} id="customizablePagination" isOpen={false} ownFocus={false} diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss index 025bfcdacf7..5bbe742de33 100644 --- a/src/components/form/super_select/_super_select.scss +++ b/src/components/form/super_select/_super_select.scss @@ -1,7 +1,6 @@ /* * 1. Make popover the same width as the form control * 2. Style popover similar to combobox - * 3. Specificity to override default popover */ .euiSuperSelect.euiPopover { /* 3 */ @@ -13,20 +12,19 @@ } } -.euiSuperSelect__popoverPanel { /* 3 */ - //width: calc(100% + 2px); /* 1 */ - - .euiPopover__panel__arrow { - display: none; /* 2 */ - } -} - -.euiSuperSelect.euiPopover--anchorDownCenter .euiSuperSelect__popoverPanel { /* 3 */ +.euiSuperSelect__popoverPanel[class*="bottom"] { border-top-color: transparentize($euiBorderColor, .2); border-top-right-radius: 0; /* 2 */ border-top-left-radius: 0; /* 2 */ } +.euiSuperSelect__popoverPanel[class*="top"].euiPanel--shadow { + border-bottom-color: transparentize($euiBorderColor, .2); + border-bottom-right-radius: 0; /* 2 */ + border-bottom-left-radius: 0; /* 2 */ + @include euiBottomShadowFlat; /* 2 */ +} + .euiSuperSelect.euiPopover--anchorDownCenter.euiPopover-isOpen .euiSuperSelect__popoverPanel { /* 3 */ transform: translateX(-50%) translateY(0) translateZ(0); /* 2 */ } diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js index b73e7bbc0b4..ea0cd3c62c0 100644 --- a/src/components/form/super_select/super_select.js +++ b/src/components/form/super_select/super_select.js @@ -53,7 +53,7 @@ export class EuiSuperSelect extends Component { this.focusItemAt(indexOfSelected); this.setState({ - menuWidth: this.popoverRef.getBoundingClientRect().width, + menuWidth: this.popoverRef.getBoundingClientRect().width - 2, // account for border not inner shadow }); }); } else { @@ -200,6 +200,7 @@ export class EuiSuperSelect extends Component { anchorPosition="downCenter" ownFocus={false} popoverRef={this.setPopoverRef} + hasArrow={false} > {items} diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss index d67ea552fe8..91da40ffab6 100644 --- a/src/components/popover/_popover.scss +++ b/src/components/popover/_popover.scss @@ -131,6 +131,11 @@ } } } + + + &.euiPopover__panel-noArrow .euiPopover__panel__arrow { + display: none; + } } .euiPopover__panel.euiPopover__panel-withTitle { diff --git a/src/components/popover/index.d.ts b/src/components/popover/index.d.ts index 687308e6d0e..51622c122e0 100644 --- a/src/components/popover/index.d.ts +++ b/src/components/popover/index.d.ts @@ -31,6 +31,7 @@ declare module '@elastic/eui' { withTitle?: boolean; isOpen?: boolean; ownFocus?: boolean; + hasArrow?: boolean; anchorPosition?: PopoverAnchorPosition; panelClassName?: string; panelPaddingSize?: PanelPaddingSize; diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 8a0db98038c..1d8e891fda5 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -250,7 +250,7 @@ export class EuiPopover extends Component { align: getPopoverAlignFromAnchorPosition(this.props.anchorPosition), anchor: this.button, popover: this.panel, - offset: 16, + offset: this.props.hasArrow ? 16 : 8, arrowConfig: { arrowWidth: 24, arrowBuffer: 10, @@ -268,7 +268,7 @@ export class EuiPopover extends Component { zIndex, }; - const arrowStyles = arrow; + const arrowStyles = this.props.hasArrow ? arrow : null; const arrowPosition = position; this.setState({ popoverStyles, arrowStyles, arrowPosition }); @@ -307,6 +307,7 @@ export class EuiPopover extends Component { panelClassName, panelPaddingSize, popoverRef, + hasArrow, ...rest } = this.props; @@ -325,6 +326,7 @@ export class EuiPopover extends Component { `euiPopover__panel-${this.state.arrowPosition}`, { 'euiPopover__panel-isOpen': this.state.isOpening }, { 'euiPopover__panel-withTitle': withTitle }, + { 'euiPopover__panel-noArrow': !hasArrow }, panelClassName ); @@ -430,6 +432,7 @@ EuiPopover.propTypes = { panelClassName: PropTypes.string, panelPaddingSize: PropTypes.oneOf(SIZES), popoverRef: PropTypes.func, + hasArrow: PropTypes.bool, container: PropTypes.oneOfType([ PropTypes.node, PropTypes.instanceOf(HTMLElement) @@ -443,4 +446,5 @@ EuiPopover.defaultProps = { ownFocus: false, anchorPosition: 'downCenter', panelPaddingSize: 'm', + hasArrow: true, }; diff --git a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap index dbadf457d73..43889704dc8 100644 --- a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap +++ b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap @@ -17,6 +17,7 @@ exports[`FieldValueSelectionFilter render - all configurations 1`] = ` } closePopover={[Function]} + hasArrow={true} id="field_value_selection_0" isOpen={false} ownFocus={true} @@ -62,6 +63,7 @@ exports[`FieldValueSelectionFilter render - multi-select OR 1`] = ` } closePopover={[Function]} + hasArrow={true} id="field_value_selection_0" isOpen={false} ownFocus={true} @@ -107,6 +109,7 @@ exports[`FieldValueSelectionFilter render - options as a function 1`] = ` } closePopover={[Function]} + hasArrow={true} id="field_value_selection_0" isOpen={false} ownFocus={true} @@ -152,6 +155,7 @@ exports[`FieldValueSelectionFilter render - options as an array 1`] = ` } closePopover={[Function]} + hasArrow={true} id="field_value_selection_0" isOpen={false} ownFocus={true} From 87a22a3c39223eb228a7730fc32ec373d50af5bd Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Fri, 3 Aug 2018 12:58:57 -0600 Subject: [PATCH 16/34] Don't reset the known superselect width on close --- src/components/form/super_select/super_select.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js index ea0cd3c62c0..4b64bb3775c 100644 --- a/src/components/form/super_select/super_select.js +++ b/src/components/form/super_select/super_select.js @@ -67,7 +67,6 @@ export class EuiSuperSelect extends Component { closePopover = () => { this.setState({ isPopoverOpen: false, - menuWidth: null, }); }; From 85dfc4d3b5ea73cd1e7c97130470787c888b5ac2 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 3 Aug 2018 15:08:49 -0400 Subject: [PATCH 17/34] One last fix to popover shadow --- src/components/form/super_select/_super_select.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss index 5bbe742de33..e521caf2e69 100644 --- a/src/components/form/super_select/_super_select.scss +++ b/src/components/form/super_select/_super_select.scss @@ -18,7 +18,7 @@ border-top-left-radius: 0; /* 2 */ } -.euiSuperSelect__popoverPanel[class*="top"].euiPanel--shadow { +.euiSuperSelect__popoverPanel[class*="top"] { border-bottom-color: transparentize($euiBorderColor, .2); border-bottom-right-radius: 0; /* 2 */ border-bottom-left-radius: 0; /* 2 */ From d7bd5b02a84d404025955e533f954030f093979a Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 6 Aug 2018 13:40:03 -0400 Subject: [PATCH 18/34] Fixed EuiPopover BEM naming --- .../__snapshots__/popover.test.js.snap | 20 ++++++------- src/components/popover/_popover.scss | 28 +++++++++---------- src/components/popover/popover.js | 6 ++-- 3 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/components/popover/__snapshots__/popover.test.js.snap b/src/components/popover/__snapshots__/popover.test.js.snap index 029bfc1bca9..9250a8d08cd 100644 --- a/src/components/popover/__snapshots__/popover.test.js.snap +++ b/src/components/popover/__snapshots__/popover.test.js.snap @@ -94,11 +94,11 @@ exports[`EuiPopover props isOpen renders true 1`] = `
@@ -121,11 +121,11 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
@@ -154,12 +154,12 @@ exports[`EuiPopover props ownFocus renders true 1`] = `

@@ -182,11 +182,11 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
@@ -209,11 +209,11 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss index 91da40ffab6..33004c41a3f 100644 --- a/src/components/popover/_popover.scss +++ b/src/components/popover/_popover.scss @@ -42,7 +42,7 @@ pointer-events: auto; } - .euiPopover__panel__arrow { + .euiPopover__panelArrow { position: absolute; width: 0; height: 0; @@ -63,7 +63,7 @@ width: 0; } - &.euiPopover__panel__arrow-top { + &.euiPopover__panelArrow--top { &:before { bottom: -$euiPopoverArrowSize + 1; border-left: $euiPopoverArrowSize solid transparent; @@ -79,7 +79,7 @@ } } - &.euiPopover__panel__arrow-right { + &.euiPopover__panelArrow--right { &:before { left: -$euiPopoverArrowSize; top: 50%; @@ -97,7 +97,7 @@ } } - &.euiPopover__panel__arrow-bottom { + &.euiPopover__panelArrow--bottom { &:before { top: -$euiPopoverArrowSize; border-left: $euiPopoverArrowSize solid transparent; @@ -113,7 +113,7 @@ } } - &.euiPopover__panel__arrow-left { + &.euiPopover__panelArrow--left { &:before { right: -$euiPopoverArrowSize + 1; top: 50%; @@ -133,39 +133,39 @@ } - &.euiPopover__panel-noArrow .euiPopover__panel__arrow { + &.euiPopover__panel-noArrow .euiPopover__panelArrow { display: none; } } .euiPopover__panel.euiPopover__panel-withTitle { - .euiPopover__panel__arrow { - &.euiPopover__panel__arrow-bottom:after { + .euiPopover__panelArrow { + &.euiPopover__panelArrow--bottom:after { border-bottom-color: $euiColorLightestShade; } - &.euiPopover__panel__arrow-right:after { + &.euiPopover__panelArrow--right:after { border-right-color: $euiColorLightestShade; } - &.euiPopover__panel__arrow-left:after { + &.euiPopover__panelArrow--left:after { border-left-color: $euiColorLightestShade; } } } -.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel-top { +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--top { transform: translateY($euiPopoverTranslateDistance) translateZ(0); } -.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel-bottom { +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--bottom { transform: translateY(-$euiPopoverTranslateDistance) translateZ(0); } -.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel-left { +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--left { transform: translateX($euiPopoverTranslateDistance) translateZ(0); } -.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel-right { +.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--right { transform: translateX(-$euiPopoverTranslateDistance) translateZ(0); } diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 1d8e891fda5..2a87b4917c0 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -323,7 +323,7 @@ export class EuiPopover extends Component { const panelClasses = classNames( 'euiPopover__panel', - `euiPopover__panel-${this.state.arrowPosition}`, + `euiPopover__panel--${this.state.arrowPosition}`, { 'euiPopover__panel-isOpen': this.state.isOpening }, { 'euiPopover__panel-withTitle': withTitle }, { 'euiPopover__panel-noArrow': !hasArrow }, @@ -356,8 +356,8 @@ export class EuiPopover extends Component { } const arrowClassNames = classNames( - 'euiPopover__panel__arrow', - `euiPopover__panel__arrow-${this.state.arrowPosition}` + 'euiPopover__panelArrow', + `euiPopover__panelArrow--${this.state.arrowPosition}` ); panel = ( From 8eb1e8b1be241f46505ded32caf052193834943b Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 6 Aug 2018 13:41:15 -0400 Subject: [PATCH 19/34] Addressing PR comments --- .../form_controls/form_controls_example.js | 8 ++++++++ .../views/super_select/super_select_basic.js | 15 ++++++--------- .../views/super_select/super_select_complex.js | 18 ++++++++---------- .../form/super_select/_super_select.scss | 10 ++++------ .../super_select/_super_select_control.scss | 2 +- src/components/form/super_select/_test.scss | 3 --- 6 files changed, 27 insertions(+), 29 deletions(-) delete mode 100644 src/components/form/super_select/_test.scss diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js index 8df657ecc55..cf3d4f0115a 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -182,6 +182,14 @@ export const FormControlsExample = { type: GuideSectionTypes.HTML, code: selectHtml, }], + text: ( +

+ This component renders a basic HTML <select> element. If you need more customization + for how the options and/or selected values render, use the EuiSuperSelect. + Another option is to use the EuiComboBox, which has search and multi-select + capabilities, but also has restrictions on how items are rendered. +

+ ), props: { EuiSelect, }, diff --git a/src-docs/src/views/super_select/super_select_basic.js b/src-docs/src/views/super_select/super_select_basic.js index c018d596b13..3bad9f70a04 100644 --- a/src-docs/src/views/super_select/super_select_basic.js +++ b/src-docs/src/views/super_select/super_select_basic.js @@ -1,6 +1,5 @@ import React, { Component, - Fragment, } from 'react'; import { @@ -52,14 +51,12 @@ export default class extends Component { 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 index 25531396901..e8175433c4b 100644 --- a/src-docs/src/views/super_select/super_select_complex.js +++ b/src-docs/src/views/super_select/super_select_complex.js @@ -68,16 +68,14 @@ export default class extends Component { render() { return ( - - - + ); } } diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss index e521caf2e69..902081301b3 100644 --- a/src/components/form/super_select/_super_select.scss +++ b/src/components/form/super_select/_super_select.scss @@ -1,6 +1,8 @@ /* * 1. Make popover the same width as the form control * 2. Style popover similar to combobox + * 3. Need specificity to override default popover styles + * 4. Use attribute selector to match popover position without needing the full popover class name */ .euiSuperSelect.euiPopover { /* 3 */ @@ -12,23 +14,19 @@ } } -.euiSuperSelect__popoverPanel[class*="bottom"] { +.euiSuperSelect__popoverPanel[class*="bottom"] { /* 4 */ border-top-color: transparentize($euiBorderColor, .2); border-top-right-radius: 0; /* 2 */ border-top-left-radius: 0; /* 2 */ } -.euiSuperSelect__popoverPanel[class*="top"] { +.euiSuperSelect__popoverPanel[class*="top"] { /* 4 */ border-bottom-color: transparentize($euiBorderColor, .2); border-bottom-right-radius: 0; /* 2 */ border-bottom-left-radius: 0; /* 2 */ @include euiBottomShadowFlat; /* 2 */ } -.euiSuperSelect.euiPopover--anchorDownCenter.euiPopover-isOpen .euiSuperSelect__popoverPanel { /* 3 */ - transform: translateX(-50%) translateY(0) translateZ(0); /* 2 */ -} - .euiSuperSelect__item--hasDividers:not(:last-of-type) { border-bottom: $euiBorderThin; } diff --git a/src/components/form/super_select/_super_select_control.scss b/src/components/form/super_select/_super_select_control.scss index dbf8bb4c2ed..b565591ee2b 100644 --- a/src/components/form/super_select/_super_select_control.scss +++ b/src/components/form/super_select/_super_select_control.scss @@ -3,7 +3,7 @@ * 2. Ensure the descenders don't get cut off */ - .euiSuperSelectControl { +.euiSuperSelectControl { @include euiFormControlStyle; @include euiFormControlWithIcon($side: "right"); /* 1 */ @include euiFormControlIsLoading($isNextToIcon: true); diff --git a/src/components/form/super_select/_test.scss b/src/components/form/super_select/_test.scss deleted file mode 100644 index c8976df1730..00000000000 --- a/src/components/form/super_select/_test.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiTest { - -} From 5596d701d10e83b07805a9115f14ca12336862cd Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 8 Aug 2018 14:57:34 -0700 Subject: [PATCH 20/34] kinda working --- .../src/views/super_select/super_select_basic.js | 1 - .../src/views/super_select/super_select_complex.js | 3 ++- .../__snapshots__/super_select.test.js.snap | 7 +++++-- .../__snapshots__/super_select_control.test.js.snap | 13 +++++++++++-- src/components/form/super_select/super_select.js | 10 +++++++++- .../form/super_select/super_select_control.js | 3 ++- 6 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/super_select/super_select_basic.js b/src-docs/src/views/super_select/super_select_basic.js index 3bad9f70a04..725ca6bc432 100644 --- a/src-docs/src/views/super_select/super_select_basic.js +++ b/src-docs/src/views/super_select/super_select_basic.js @@ -55,7 +55,6 @@ export default class extends Component { options={this.options} valueOfSelected={this.state.value} onChange={this.onChange} - aria-label="Health levels" /> ); } diff --git a/src-docs/src/views/super_select/super_select_complex.js b/src-docs/src/views/super_select/super_select_complex.js index e8175433c4b..633aa370455 100644 --- a/src-docs/src/views/super_select/super_select_complex.js +++ b/src-docs/src/views/super_select/super_select_complex.js @@ -57,12 +57,14 @@ export default class extends Component { this.state = { value: this.options[1].value, + inputDisplay: this.options[1].inputDisplay, }; } onChange = (value) => { this.setState({ value: value, + inputDisplay: this.options.inputDisplay, }); }; @@ -74,7 +76,6 @@ export default class extends Component { onChange={this.onChange} itemLayoutAlign="top" hasDividers - aria-label="Use aria labels when no actual label is in use" /> ); } diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap index bdd0208a264..08faa074baa 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -9,9 +9,7 @@ exports[`EuiSuperSelect is rendered 1`] = ` >
`; +exports[`EuiSuperSelect props more props are propogated to each option 1`] = ` +
+
+ +
+
+ + Select an option: Option #1, is selected + + +
+ + + +
+
+
+
+
+`; + exports[`EuiSuperSelect props options are rendered 1`] = `
{ + const { + value, + dropdownDisplay, + inputDisplay, + ...optionRest + } = option; + return ( this.itemClicked(option.value)} + icon={valueOfSelected === value ? 'check' : 'empty'} + onClick={() => this.itemClicked(value)} onKeyDown={this.onItemKeyDown} layoutAlign={itemLayoutAlign} buttonRef={node => this.setItemNode(node, index)} style={{ width: this.state.menuWidth }} role="option" - id={option.value} + id={value} + {...optionRest} > - {option.dropdownDisplay || option.inputDisplay} + {dropdownDisplay || inputDisplay} ); }); diff --git a/src/components/form/super_select/super_select.test.js b/src/components/form/super_select/super_select.test.js index 17aee9efbcd..7dc6641ba78 100644 --- a/src/components/form/super_select/super_select.test.js +++ b/src/components/form/super_select/super_select.test.js @@ -62,5 +62,21 @@ describe('EuiSuperSelect', () => { expect(component) .toMatchSnapshot(); }); + + test('more props are propogated to each option', () => { + const component = render( + {}} + /> + ); + + expect(component) + .toMatchSnapshot(); + }); }); }); From 1dd88f4408628ab0d0639454ea894c26bc4dde07 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 10 Aug 2018 14:10:57 -0400 Subject: [PATCH 25/34] Revert "Allowing `label` to be passed from `EuiFormGroup`" This reverts commit e8c3fa0837aab07954fba48acbe2b1723a363fdf. --- .../src/views/super_select/super_select.js | 11 ---------- .../form/checkbox/checkbox_group.js | 1 - .../described_form_group.test.js.snap | 1 - .../form/field_number/field_number.js | 1 - .../form/field_password/field_password.js | 1 - .../form/field_search/field_search.js | 1 - src/components/form/field_text/field_text.js | 1 - .../form/file_picker/file_picker.js | 1 - .../__snapshots__/form_row.test.js.snap | 22 ------------------- src/components/form/form_row/form_row.js | 1 - src/components/form/radio/radio_group.js | 1 - src/components/form/range/range.js | 1 - src/components/form/select/select.js | 1 - .../__snapshots__/super_select.test.js.snap | 8 +++---- .../super_select_control.test.js.snap | 14 ++++++------ .../form/super_select/super_select_control.js | 2 -- src/components/form/text_area/text_area.js | 1 - 17 files changed, 11 insertions(+), 58 deletions(-) diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js index 9141dd328db..74f796156fe 100644 --- a/src-docs/src/views/super_select/super_select.js +++ b/src-docs/src/views/super_select/super_select.js @@ -6,7 +6,6 @@ import React, { import { EuiSuperSelect, EuiSpacer, - EuiFormRow, } from '../../../../src/components'; export default class extends Component { @@ -86,16 +85,6 @@ export default class extends Component { onChange={this.onChange} compressed /> - - - - - - ); } diff --git a/src/components/form/checkbox/checkbox_group.js b/src/components/form/checkbox/checkbox_group.js index 5a6b37199bf..7ce03282390 100644 --- a/src/components/form/checkbox/checkbox_group.js +++ b/src/components/form/checkbox/checkbox_group.js @@ -10,7 +10,6 @@ export const EuiCheckboxGroup = ({ className, disabled, compressed, - label, // eslint-disable-line no-unused-vars ...rest }) => (
diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap index ac24f113669..de5e412314b 100644 --- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap +++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap @@ -359,7 +359,6 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = ` diff --git a/src/components/form/field_number/field_number.js b/src/components/form/field_number/field_number.js index 16653b10a19..352ec8bd026 100644 --- a/src/components/form/field_number/field_number.js +++ b/src/components/form/field_number/field_number.js @@ -25,7 +25,6 @@ export const EuiFieldNumber = ({ compressed, prepend, append, - label, // eslint-disable-line no-unused-vars ...rest }) => { const classes = classNames('euiFieldNumber', className, { diff --git a/src/components/form/field_password/field_password.js b/src/components/form/field_password/field_password.js index a6ff20ae8f8..948203aff4c 100644 --- a/src/components/form/field_password/field_password.js +++ b/src/components/form/field_password/field_password.js @@ -21,7 +21,6 @@ export const EuiFieldPassword = ({ isLoading, compressed, inputRef, - label, // eslint-disable-line no-unused-vars ...rest }) => { const classes = classNames( diff --git a/src/components/form/field_search/field_search.js b/src/components/form/field_search/field_search.js index c50084f034a..0006d974e51 100644 --- a/src/components/form/field_search/field_search.js +++ b/src/components/form/field_search/field_search.js @@ -100,7 +100,6 @@ export class EuiFieldSearch extends Component { incremental, compressed, onSearch, - label, // eslint-disable-line no-unused-vars ...rest } = this.props; const classes = classNames( diff --git a/src/components/form/field_text/field_text.js b/src/components/form/field_text/field_text.js index 04651c9bf1e..e66d49a9286 100644 --- a/src/components/form/field_text/field_text.js +++ b/src/components/form/field_text/field_text.js @@ -24,7 +24,6 @@ export const EuiFieldText = ({ compressed, prepend, append, - label, // eslint-disable-line no-unused-vars ...rest }) => { const classes = classNames('euiFieldText', className, { diff --git a/src/components/form/file_picker/file_picker.js b/src/components/form/file_picker/file_picker.js index 4632be95fd2..50c3f2f45df 100644 --- a/src/components/form/file_picker/file_picker.js +++ b/src/components/form/file_picker/file_picker.js @@ -81,7 +81,6 @@ export class EuiFilePicker extends Component { disabled, compressed, onChange, // eslint-disable-line no-unused-vars - label, // eslint-disable-line no-unused-vars ...rest } = this.props; diff --git a/src/components/form/form_row/__snapshots__/form_row.test.js.snap b/src/components/form/form_row/__snapshots__/form_row.test.js.snap index cd1d3f7fa19..0b0418fd754 100644 --- a/src/components/form/form_row/__snapshots__/form_row.test.js.snap +++ b/src/components/form/form_row/__snapshots__/form_row.test.js.snap @@ -30,11 +30,6 @@ exports[`EuiFormRow behavior onBlur is called in child 1`] = ` - Label - - } onBlur={[Function]} onFocus={[Function]} /> @@ -72,11 +67,6 @@ exports[`EuiFormRow behavior onBlur works in parent even if not in child 1`] = ` - Label - - } onBlur={[Function]} onFocus={[Function]} /> @@ -114,11 +104,6 @@ exports[`EuiFormRow behavior onFocus is called in child 1`] = ` - Label - - } onBlur={[Function]} onFocus={[Function]} /> @@ -156,11 +141,6 @@ exports[`EuiFormRow behavior onFocus works in parent even if not in child 1`] = - Label - - } onBlur={[Function]} onFocus={[Function]} /> @@ -318,7 +298,6 @@ exports[`EuiFormRow props isInvalid is rendered 1`] = `
`; @@ -336,7 +315,6 @@ exports[`EuiFormRow props label is rendered 1`] = ` diff --git a/src/components/form/form_row/form_row.js b/src/components/form/form_row/form_row.js index beb3928ebbb..86e8c13357c 100644 --- a/src/components/form/form_row/form_row.js +++ b/src/components/form/form_row/form_row.js @@ -132,7 +132,6 @@ export class EuiFormRow extends Component { onFocus: this.onFocus, onBlur: this.onBlur, compressed: compressed, - label: label, ...optionalProps }); diff --git a/src/components/form/radio/radio_group.js b/src/components/form/radio/radio_group.js index 53902afab5e..e3bbecba490 100644 --- a/src/components/form/radio/radio_group.js +++ b/src/components/form/radio/radio_group.js @@ -11,7 +11,6 @@ export const EuiRadioGroup = ({ className, disabled, compressed, - label, // eslint-disable-line no-unused-vars ...rest }) => (
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js index 398cba13338..df4181013f6 100644 --- a/src/components/form/range/range.js +++ b/src/components/form/range/range.js @@ -34,7 +34,6 @@ export class EuiRange extends Component { onChange, value, style, - label, // eslint-disable-line no-unused-vars ...rest } = this.props; diff --git a/src/components/form/select/select.js b/src/components/form/select/select.js index 6fc06d5e5ca..032c2be7d54 100644 --- a/src/components/form/select/select.js +++ b/src/components/form/select/select.js @@ -25,7 +25,6 @@ export const EuiSelect = ({ value, prepend, append, - label, // eslint-disable-line no-unused-vars ...rest }) => { const classes = classNames( diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap index 11ed5211345..c61ba8a5cf6 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -23,7 +23,7 @@ exports[`EuiSuperSelect is rendered 1`] = ` class="euiScreenReaderOnly" id="generated-id" > - Select an option: , is selected + Select an option: , is selected
+
+
+
+ +
+ + +
+
+
`; @@ -158,7 +228,8 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
+
+
+
+
+
+
+ +
+ + +
+
+
+
+`; + +exports[`EuiSuperSelect props more props are propogated to each option 2`] = ` + + + } + className="euiSuperSelect" + closePopover={[Function]} + hasArrow={false} + isOpen={true} + ownFocus={false} + panelClassName="euiSuperSelect__popoverPanel" + panelPaddingSize="none" + popoverRef={[Function]} + > + +
+
+ + + +
+
+ + + Select an option: + Option #1 + , is selected + + + + +
+ + + + + +
+ +
+
+ + +
+ + +
+ +
+
+ + + +

+ You are in a form selector of + 2 + items and must select a single option. Use the up and down keys to navigate or escape to close. +

+ + + +
+ + + + + + +
+ + +
+ +
+ + +
+ + + +`; + +exports[`EuiSuperSelect props options are rendered when select is open 1`] = ` +
+
+ +
+
+ + Select an option: , is selected + +
+
+
+
+ +
+ + +
+
+
`; -exports[`EuiSuperSelect props options are rendered 1`] = ` +exports[`EuiSuperSelect props select component is rendered 1`] = `
@@ -273,7 +1033,7 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = ` >
- Select an option: Option #1, is selected + Select an option: Option #2, is selected
diff --git a/src/components/form/super_select/super_select.test.js b/src/components/form/super_select/super_select.test.js index 7dc6641ba78..61716f84982 100644 --- a/src/components/form/super_select/super_select.test.js +++ b/src/components/form/super_select/super_select.test.js @@ -1,11 +1,18 @@ import React from 'react'; -import { render } from 'enzyme'; -import { requiredProps } from '../../../test'; +import { mount, render } from 'enzyme'; +import { requiredProps, takeMountedSnapshot } from '../../../test'; import { EuiSuperSelect } from './super_select'; jest.mock(`../form_row/make_id`, () => () => `generated-id`); +jest.mock( + '../../portal', + () => ({ + EuiPortal: ({ children }) => children + }) +); + describe('EuiSuperSelect', () => { test('is rendered', () => { const component = render( @@ -17,7 +24,7 @@ describe('EuiSuperSelect', () => { }); describe('props', () => { - test('options are rendered', () => { + test('select component is rendered', () => { const component = render( { .toMatchSnapshot(); }); + test('options are rendered when select is open', () => { + const component = mount( + {}} + data-test-subj="superSelect" + /> + ); + + component.find('button[data-test-subj="superSelect"]').simulate('click'); + + expect(takeMountedSnapshot(component)) + .toMatchSnapshot(); + }); + test('valueSelected is rendered', () => { const component = render( { { value: '1', inputDisplay: 'Option #1' }, { value: '2', inputDisplay: 'Option #2' } ]} - valueOfSelected="1" + valueOfSelected="2" onChange={() => {}} /> ); @@ -49,22 +74,25 @@ describe('EuiSuperSelect', () => { }); test('custom display is propagated to dropdown', () => { - const component = render( + const component = mount( {}} + data-test-subj="superSelect" /> ); - expect(component) + component.find('button[data-test-subj="superSelect"]').simulate('click'); + + expect(takeMountedSnapshot(component)) .toMatchSnapshot(); }); test('more props are propogated to each option', () => { - const component = render( + const component = mount( { ]} valueOfSelected="1" onChange={() => {}} + data-test-subj="superSelect" /> ); + component.find('button[data-test-subj="superSelect"]').simulate('click'); + + expect(takeMountedSnapshot(component)) + .toMatchSnapshot(); + expect(component) .toMatchSnapshot(); }); diff --git a/src/components/form/super_select/super_select_control.test.js b/src/components/form/super_select/super_select_control.test.js index 74239888674..d56a0e4c39e 100644 --- a/src/components/form/super_select/super_select_control.test.js +++ b/src/components/form/super_select/super_select_control.test.js @@ -24,6 +24,8 @@ describe('EuiSuperSelectControl', () => { { value: '1', inputDisplay: 'Option #1' }, { value: '2', inputDisplay: 'Option #2' } ]} + data-test-subj="selectbox" + className="customSelect" /> ); From a5b1d3333b55af2348fda6d840c89f192d5364dc Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 16 Aug 2018 14:53:24 -0400 Subject: [PATCH 31/34] Remove obsolete test & changelog --- CHANGELOG.md | 1 + .../__snapshots__/super_select.test.js.snap | 135 ------------------ .../form/super_select/super_select.test.js | 18 --- 3 files changed, 1 insertion(+), 153 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 53ae5696121..3d21fee81f0 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap index 3822e4c74e7..e2a4b6d637c 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -824,141 +824,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = ` `; -exports[`EuiSuperSelect props options are rendered when select is open 1`] = ` -
-
- -
-
- - Select an option: , is selected - -
-
-
-
-
-
- -
- - -
-
-
-
-`; - exports[`EuiSuperSelect props select component is rendered 1`] = `
{ .toMatchSnapshot(); }); - test('options are rendered when select is open', () => { - const component = mount( - {}} - data-test-subj="superSelect" - /> - ); - - component.find('button[data-test-subj="superSelect"]').simulate('click'); - - expect(takeMountedSnapshot(component)) - .toMatchSnapshot(); - }); - test('valueSelected is rendered', () => { const component = render( Date: Thu, 16 Aug 2018 15:13:56 -0400 Subject: [PATCH 32/34] Revert "Remove obsolete test & changelog" This reverts commit a5b1d3333b55af2348fda6d840c89f192d5364dc. --- CHANGELOG.md | 1 - .../__snapshots__/super_select.test.js.snap | 135 ++++++++++++++++++ .../form/super_select/super_select.test.js | 18 +++ 3 files changed, 153 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d21fee81f0..53ae5696121 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,6 @@ ## [`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) diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap index e2a4b6d637c..3822e4c74e7 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -824,6 +824,141 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = ` `; +exports[`EuiSuperSelect props options are rendered when select is open 1`] = ` +
+
+ +
+
+ + Select an option: , is selected + +
+
+
+
+
+
+ +
+ + +
+
+
+
+`; + exports[`EuiSuperSelect props select component is rendered 1`] = `
{ .toMatchSnapshot(); }); + test('options are rendered when select is open', () => { + const component = mount( + {}} + data-test-subj="superSelect" + /> + ); + + component.find('button[data-test-subj="superSelect"]').simulate('click'); + + expect(takeMountedSnapshot(component)) + .toMatchSnapshot(); + }); + test('valueSelected is rendered', () => { const component = render( Date: Thu, 16 Aug 2018 15:14:16 -0400 Subject: [PATCH 33/34] Revert "Revert "Remove obsolete test & changelog"" This reverts commit d927eef247e26594eaf73a18ca2c53683aa69dd0. --- CHANGELOG.md | 1 + .../__snapshots__/super_select.test.js.snap | 135 ------------------ .../form/super_select/super_select.test.js | 18 --- 3 files changed, 1 insertion(+), 153 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 53ae5696121..3d21fee81f0 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap index 3822e4c74e7..e2a4b6d637c 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -824,141 +824,6 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = ` `; -exports[`EuiSuperSelect props options are rendered when select is open 1`] = ` -
-
- -
-
- - Select an option: , is selected - -
-
-
-
-
-
- -
- - -
-
-
-
-`; - exports[`EuiSuperSelect props select component is rendered 1`] = `
{ .toMatchSnapshot(); }); - test('options are rendered when select is open', () => { - const component = mount( - {}} - data-test-subj="superSelect" - /> - ); - - component.find('button[data-test-subj="superSelect"]').simulate('click'); - - expect(takeMountedSnapshot(component)) - .toMatchSnapshot(); - }); - test('valueSelected is rendered', () => { const component = render( Date: Thu, 16 Aug 2018 15:15:51 -0400 Subject: [PATCH 34/34] Wrong test suite update --- .../__snapshots__/super_select.test.js.snap | 135 ++++++++++++++++++ .../super_select_control.test.js.snap | 60 -------- .../form/super_select/super_select.test.js | 18 +++ .../super_select/super_select_control.test.js | 16 --- 4 files changed, 153 insertions(+), 76 deletions(-) diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap index e2a4b6d637c..3822e4c74e7 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -824,6 +824,141 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = ` `; +exports[`EuiSuperSelect props options are rendered when select is open 1`] = ` +
+
+ +
+
+ + Select an option: , is selected + +
+
+
+
+
+
+ +
+ + +
+
+
+
+`; + exports[`EuiSuperSelect props select component is rendered 1`] = `
, -
-
- - Select an option: , is selected - -
-
, -] -`; - exports[`EuiSuperSelectControl props value option is rendered 1`] = ` Array [ { .toMatchSnapshot(); }); + test('options are rendered when select is open', () => { + const component = mount( + {}} + data-test-subj="superSelect" + /> + ); + + component.find('button[data-test-subj="superSelect"]').simulate('click'); + + expect(takeMountedSnapshot(component)) + .toMatchSnapshot(); + }); + test('valueSelected is rendered', () => { const component = render( { }); describe('props', () => { - test('options are rendered', () => { - const component = render( - - ); - - expect(component) - .toMatchSnapshot(); - }); - test('fullWidth is rendered', () => { const component = render(