diff --git a/CHANGELOG.md b/CHANGELOG.md index 3350407635f..10e2e2d9b7a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - Added `analyzeEvent` glyph in `EuiIcon` ([#3729](https://github.com/elastic/eui/pull/3729)) - Updated `EuiComboBox` to allow the options list to open for single selection custom options ([#3706](https://github.com/elastic/eui/pull/3706)) - Added `useEuiI18n` hook for localization ([#3749](https://github.com/elastic/eui/pull/3749)) +- Added a hit enter badge to `EuiComboBox` when focusing an option and for empty states that allow pressing enter ([#3782](https://github.com/elastic/eui/pull/3782)) **Bug fixes** diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index eeed2b83620..69e6381b7c5 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -103,7 +103,7 @@ import DisallowCustomOptions from './disallow_custom_options'; const disallowCustomOptionsSource = require('!!raw-loader!./disallow_custom_options'); const disallowCustomOptionsHtml = renderToHtml(DisallowCustomOptions); const disallowCustomOptionsSnippet = ` { return ( { label="Your occupation" helpText="Select an occupation from the list. If your occupation isn’t available, create a custom one."> { return ( -
- Titan + + Titan + -
+ diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss index 2a192e85c8f..4c227f52a1a 100644 --- a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss +++ b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss @@ -28,8 +28,30 @@ } } +.euiComboBoxOption__contentWrapper { + display: flex; + + .euiComboBoxOption__emptyStateText { + flex: 1; + text-align: left; + margin-bottom: 0; + } + + .euiComboBoxOption__enterBadge { + align-self: flex-start; + margin-left: $euiSizeXS; + + span { + display: flex; + align-items: center; + } + } +} + .euiComboBoxOption__content { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + flex: 1; + text-align: left; } diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx index c12be6f3946..16c2492f63a 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx +++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx @@ -30,7 +30,6 @@ import { ListChildComponentProps, } from 'react-window'; -import { EuiCode } from '../../../components/code'; import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { EuiHighlight } from '../../highlight'; import { EuiPanel } from '../../panel'; @@ -38,6 +37,7 @@ import { EuiText } from '../../text'; import { EuiLoadingSpinner } from '../../loading'; import { EuiComboBoxTitle } from './combo_box_title'; import { EuiI18n } from '../../i18n'; +import { EuiIcon } from '../../icon'; import { EuiFilterSelectItem, FilterChecked, @@ -52,6 +52,7 @@ import { UpdatePositionHandler, } from '../types'; import { CommonProps } from '../../common'; +import { EuiBadge } from '../../badge/'; const positionToClassNameMap: { [position in EuiComboBoxOptionsListPosition]: string @@ -103,6 +104,15 @@ export type EuiComboBoxOptionsListProps = CommonProps & zIndex?: number; }; +const hitEnterBadge = ( + +); + export class EuiComboBoxOptionsList extends Component< EuiComboBoxOptionsListProps > { @@ -228,6 +238,10 @@ export class EuiComboBoxOptionsList extends Component< checked = 'on'; } + const optionIsFocused = activeOptionIndex === index; + const optionIsDisabled = + option.hasOwnProperty('disabled') && option.disabled === true; + return ( extends Component< } }} ref={optionRef.bind(this, index)} - isFocused={activeOptionIndex === index} + isFocused={optionIsFocused} checked={checked} showIcons={singleSelection ? true : false} id={rootId(`_option-${index}`)} title={label} {...rest}> - {renderOption ? ( - renderOption(option, searchValue, OPTION_CONTENT_CLASSNAME) - ) : ( - - {label} - - )} + + {renderOption ? ( + + {renderOption( + option, + searchValue, + 'euiComboBoxOption__renderOption' + )} + + ) : ( + + {label} + + )} + {optionIsFocused && !optionIsDisabled ? hitEnterBadge : null} + ); }; @@ -327,28 +350,33 @@ export class EuiComboBoxOptionsList extends Component< ); } else { emptyStateContent = ( -

- ENTER, - searchValue: {searchValue}, - }} - /> -

+
+

+ {searchValue}, + }} + /> +

+ {hitEnterBadge} +
); } } else { if (delimiter && searchValue.includes(delimiter)) { emptyStateContent = ( -

- {delimiter} }} - /> -

+
+

+ {delimiter} }} + /> +

+ {hitEnterBadge} +
); } else { emptyStateContent = ( diff --git a/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap index f42a23a969a..2cbc746edea 100644 --- a/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap +++ b/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap @@ -18,7 +18,7 @@ exports[`EuiFilterSelectItem is rendered 1`] = ` data-euiicon-type="empty" /> -
diff --git a/src/components/filter_group/filter_select_item.tsx b/src/components/filter_group/filter_select_item.tsx index fe3d20c6c15..6f6cb7fe264 100644 --- a/src/components/filter_group/filter_select_item.tsx +++ b/src/components/filter_group/filter_select_item.tsx @@ -115,7 +115,9 @@ export class EuiFilterSelectItem extends Component { component="span" responsive={false}> {iconNode} - + {children}