From e8fb5355e138c588a7c4453e20cbe5bc5004c5d4 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 21 Jul 2020 20:43:56 +0100 Subject: [PATCH 1/7] Adding hit enter badge --- .../__snapshots__/combo_box.test.tsx.snap | 108 ++++++++++++------ .../_combo_box_option.scss | 17 +++ .../combo_box_options_list.tsx | 81 ++++++++----- 3 files changed, 142 insertions(+), 64 deletions(-) diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap index 8e4e3329142..c3b206c72a3 100644 --- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap +++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap @@ -341,11 +341,15 @@ exports[`props options list is rendered 1`] = `
- - Titan - + + Titan + +
@@ -364,11 +368,15 @@ exports[`props options list is rendered 1`] = `
- - Enceladus - + + Enceladus + +
@@ -387,11 +395,15 @@ exports[`props options list is rendered 1`] = `
- - Mimas - + + Mimas + +
@@ -410,11 +422,15 @@ exports[`props options list is rendered 1`] = `
- - Dione - + + Dione + +
@@ -433,11 +449,15 @@ exports[`props options list is rendered 1`] = `
- - Iapetus - + + Iapetus + +
@@ -456,11 +476,15 @@ exports[`props options list is rendered 1`] = `
- - Phoebe - + + Phoebe + +
@@ -479,11 +503,15 @@ exports[`props options list is rendered 1`] = `
- - Rhea - + + Rhea + +
@@ -502,11 +530,15 @@ exports[`props options list is rendered 1`] = `
- - Pandora is one of Saturn's moons, named for a Titaness of Greek mythology - + + Pandora is one of Saturn's moons, named for a Titaness of Greek mythology + +
@@ -525,11 +557,15 @@ exports[`props options list is rendered 1`] = `
- - Tethys - + + Tethys + +
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..df1f424b404 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,25 @@ } } +.euiComboBoxOption__contentWrapper { + display: flex; + flex-direction: row; +} + +.euiComboBoxOption__enterBadge { + align-self: flex-start; + margin-left: $euiSizeXS; +} + .euiComboBoxOption__content { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + flex: 1; + text-align: left; +} + +.euiComboBoxOption__emptyStateText { + 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..e61b89c4613 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'; @@ -52,6 +51,7 @@ import { UpdatePositionHandler, } from '../types'; import { CommonProps } from '../../common'; +import { EuiBadge } from '../../badge/'; const positionToClassNameMap: { [position in EuiComboBoxOptionsListPosition]: string @@ -103,6 +103,15 @@ export type EuiComboBoxOptionsListProps = CommonProps & zIndex?: number; }; +const hitEnterBadge = ( + + + +); + export class EuiComboBoxOptionsList extends Component< EuiComboBoxOptionsListProps > { @@ -228,6 +237,8 @@ export class EuiComboBoxOptionsList extends Component< checked = 'on'; } + const optionIsFocused = activeOptionIndex === index; + 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 ? hitEnterBadge : null} +
); }; @@ -327,28 +347,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 = ( From 0378a424f01a4193ed5c65fecbb3a234c39bb91d Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 22 Jul 2020 13:27:55 +0100 Subject: [PATCH 2/7] Adding CL --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ef7963857e3..25d77eaf163 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,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** From 70c7ff1834814c9fbf54464b0355f07b87a258df Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 22 Jul 2020 13:42:19 +0100 Subject: [PATCH 3/7] Hit enter entity --- .../combo_box_options_list/combo_box_options_list.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) 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 e61b89c4613..df289f5990a 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 @@ -105,10 +105,8 @@ export type EuiComboBoxOptionsListProps = CommonProps & const hitEnterBadge = ( - + {' '} + ↩ ); From dae7797c50ab1434847a05d141e47cde6ea0f1e2 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 22 Jul 2020 16:03:52 +0100 Subject: [PATCH 4/7] Update src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- .../combo_box/combo_box_options_list/combo_box_options_list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 df289f5990a..9887df169e9 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 @@ -104,7 +104,7 @@ export type EuiComboBoxOptionsListProps = CommonProps & }; const hitEnterBadge = ( - + From 67d3dd666c722d3d1969154ffa728951d2590111 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 23 Jul 2020 13:14:30 +0100 Subject: [PATCH 5/7] Addressing PR review --- .../combo_box/disallow_custom_options.js | 2 +- src-docs/src/views/combo_box/virtualized.js | 2 +- .../__snapshots__/combo_box.test.tsx.snap | 36 +++++++++---------- .../_combo_box_option.scss | 20 +++++------ .../combo_box_options_list.tsx | 22 +++++++----- 5 files changed, 44 insertions(+), 38 deletions(-) diff --git a/src-docs/src/views/combo_box/disallow_custom_options.js b/src-docs/src/views/combo_box/disallow_custom_options.js index 781356041a6..ad743f56e31 100644 --- a/src-docs/src/views/combo_box/disallow_custom_options.js +++ b/src-docs/src/views/combo_box/disallow_custom_options.js @@ -67,7 +67,7 @@ export default () => { return ( { return ( -
Titan -
+ @@ -368,7 +368,7 @@ exports[`props options list is rendered 1`] = `
-
Enceladus -
+
@@ -395,7 +395,7 @@ exports[`props options list is rendered 1`] = `
-
Mimas -
+
@@ -422,7 +422,7 @@ exports[`props options list is rendered 1`] = `
-
Dione -
+
@@ -449,7 +449,7 @@ exports[`props options list is rendered 1`] = `
-
Iapetus -
+
@@ -476,7 +476,7 @@ exports[`props options list is rendered 1`] = `
-
Phoebe -
+
@@ -503,7 +503,7 @@ exports[`props options list is rendered 1`] = `
-
Rhea -
+
@@ -530,7 +530,7 @@ exports[`props options list is rendered 1`] = `
-
Pandora is one of Saturn's moons, named for a Titaness of Greek mythology -
+
@@ -557,7 +557,7 @@ exports[`props options list is rendered 1`] = `
-
Tethys -
+
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 df1f424b404..e3ac2e4e4c6 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 @@ -30,12 +30,17 @@ .euiComboBoxOption__contentWrapper { display: flex; - flex-direction: row; -} -.euiComboBoxOption__enterBadge { - align-self: flex-start; - margin-left: $euiSizeXS; + .euiComboBoxOption__emptyStateText { + flex: 1; + text-align: left; + margin-bottom: 0; + } + + .euiComboBoxOption__enterBadge { + align-self: flex-start; + margin-left: $euiSizeXS; + } } .euiComboBoxOption__content { @@ -45,8 +50,3 @@ flex: 1; text-align: left; } - -.euiComboBoxOption__emptyStateText { - 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 9887df169e9..e1b71269af0 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 @@ -37,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, @@ -103,10 +104,13 @@ export type EuiComboBoxOptionsListProps = CommonProps & zIndex?: number; }; +// TODO replace html entity by new return icon const hitEnterBadge = ( -