[EuiComboBox] Adding hit enter badge (#3782)

* Adding hit enter badge * Adding CL * Hit enter entity * 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> * Addressing PR review * Changing comp inside button to spans * Adding returnKey icon. More improvements. Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
elastic · Jul 23, 2020 · 9e08564 · 9e08564
1 parent 499dedd
commit 9e08564
Show file tree

Hide file tree

Showing 10 changed files with 160 additions and 71 deletions.
diff --git 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
@@ -103,7 +103,7 @@ import DisallowCustomOptions from './disallow_custom_options';
 const disallowCustomOptionsSource = require('!!raw-loader!./disallow_custom_options');
 const disallowCustomOptionsHtml = renderToHtml(DisallowCustomOptions);
 const disallowCustomOptionsSnippet = `<EuiComboBox
-  placeholder="Select from a list of options"
+  placeholder="Select one or more options"
   options={options}
   onChange={onChange}
   onSearchChange={onSearchChange}
@@ -140,7 +140,7 @@ import Virtualized from './virtualized';
 const virtualizedSource = require('!!raw-loader!./virtualized');
 const virtualizedHtml = renderToHtml(Virtualized);
 const virtualizedSnippet = `<EuiComboBox
-  placeholder="Select or create options"
+  placeholder="Select one or more options"
   options={options}
   selectedOptions={selectedOptions}
   onChange={onChange}

diff --git 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 (
     <EuiFormRow error={error} isInvalid={error !== undefined}>
       <EuiComboBox
-        placeholder="Select from a list of options"
+        placeholder="Select one or more options"
         options={options}
         selectedOptions={selectedOptions}
         inputRef={setInputRef}

diff --git a/src-docs/src/views/combo_box/single_selection_custom_options.js b/src-docs/src/views/combo_box/single_selection_custom_options.js
@@ -55,7 +55,7 @@ export default () => {
       label="Your occupation"
       helpText="Select an occupation from the list. If your occupation isn’t available, create a custom one.">
       <EuiComboBox
-        placeholder="Select a single occupation"
+        placeholder="Select a single option"
         singleSelection={{ asPlainText: true }}
         options={options}
         selectedOptions={selectedOptions}

diff --git a/src-docs/src/views/combo_box/virtualized.js b/src-docs/src/views/combo_box/virtualized.js
@@ -24,7 +24,7 @@ export default () => {
 
   return (
     <EuiComboBox
-      placeholder="Select or create options"
+      placeholder="Select one or more options"
       options={options}
       selectedOptions={selectedOptions}
       onChange={onChange}

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -338,15 +338,19 @@ exports[`props options list is rendered 1`] = `
             <span
               class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
             >
-              <div
+              <span
                 class="euiFlexItem euiFilterSelectItem__content"
               >
                 <span
-                  class="euiComboBoxOption__content"
+                  class="euiComboBoxOption__contentWrapper"
                 >
-                  Titan
+                  <span
+                    class="euiComboBoxOption__content"
+                  >
+                    Titan
+                  </span>
                 </span>
-              </div>
+              </span>
             </span>
           </button>
           <button
@@ -361,15 +365,19 @@ exports[`props options list is rendered 1`] = `
             <span
               class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
             >
-              <div
+              <span
                 class="euiFlexItem euiFilterSelectItem__content"
               >
                 <span
-                  class="euiComboBoxOption__content"
+                  class="euiComboBoxOption__contentWrapper"
                 >
-                  Enceladus
+                  <span
+                    class="euiComboBoxOption__content"
+                  >
+                    Enceladus
+                  </span>
                 </span>
-              </div>
+              </span>
             </span>
           </button>
           <button
@@ -384,15 +392,19 @@ exports[`props options list is rendered 1`] = `
             <span
               class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
             >
-              <div
+              <span
                 class="euiFlexItem euiFilterSelectItem__content"
               >
                 <span
-                  class="euiComboBoxOption__content"
+                  class="euiComboBoxOption__contentWrapper"
                 >
-                  Mimas
+                  <span
+                    class="euiComboBoxOption__content"
+                  >
+                    Mimas
+                  </span>
                 </span>
-              </div>
+              </span>
             </span>
           </button>
           <button
@@ -407,15 +419,19 @@ exports[`props options list is rendered 1`] = `
             <span
               class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
             >
-              <div
+              <span
                 class="euiFlexItem euiFilterSelectItem__content"
               >
                 <span
-                  class="euiComboBoxOption__content"
+                  class="euiComboBoxOption__contentWrapper"
                 >
-                  Dione
+                  <span
+                    class="euiComboBoxOption__content"
+                  >
+                    Dione
+                  </span>
                 </span>
-              </div>
+              </span>
             </span>
           </button>
           <button
@@ -430,15 +446,19 @@ exports[`props options list is rendered 1`] = `
             <span
               class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
             >
-              <div
+              <span
                 class="euiFlexItem euiFilterSelectItem__content"
               >
                 <span
-                  class="euiComboBoxOption__content"
+                  class="euiComboBoxOption__contentWrapper"
                 >
-                  Iapetus
+                  <span
+                    class="euiComboBoxOption__content"
+                  >
+                    Iapetus
+                  </span>
                 </span>
-              </div>
+              </span>
             </span>
           </button>
           <button
@@ -453,15 +473,19 @@ exports[`props options list is rendered 1`] = `
             <span
               class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
             >
-              <div
+              <span
                 class="euiFlexItem euiFilterSelectItem__content"
               >
                 <span
-                  class="euiComboBoxOption__content"
+                  class="euiComboBoxOption__contentWrapper"
                 >
-                  Phoebe
+                  <span
+                    class="euiComboBoxOption__content"
+                  >
+                    Phoebe
+                  </span>
                 </span>
-              </div>
+              </span>
             </span>
           </button>
           <button
@@ -476,15 +500,19 @@ exports[`props options list is rendered 1`] = `
             <span
               class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
             >
-              <div
+              <span
                 class="euiFlexItem euiFilterSelectItem__content"
               >
                 <span
-                  class="euiComboBoxOption__content"
+                  class="euiComboBoxOption__contentWrapper"
                 >
-                  Rhea
+                  <span
+                    class="euiComboBoxOption__content"
+                  >
+                    Rhea
+                  </span>
                 </span>
-              </div>
+              </span>
             </span>
           </button>
           <button
@@ -499,15 +527,19 @@ exports[`props options list is rendered 1`] = `
             <span
               class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
             >
-              <div
+              <span
                 class="euiFlexItem euiFilterSelectItem__content"
               >
                 <span
-                  class="euiComboBoxOption__content"
+                  class="euiComboBoxOption__contentWrapper"
                 >
-                  Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+                  <span
+                    class="euiComboBoxOption__content"
+                  >
+                    Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+                  </span>
                 </span>
-              </div>
+              </span>
             </span>
           </button>
           <button
@@ -522,15 +554,19 @@ exports[`props options list is rendered 1`] = `
             <span
               class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
             >
-              <div
+              <span
                 class="euiFlexItem euiFilterSelectItem__content"
               >
                 <span
-                  class="euiComboBoxOption__content"
+                  class="euiComboBoxOption__contentWrapper"
                 >
-                  Tethys
+                  <span
+                    class="euiComboBoxOption__content"
+                  >
+                    Tethys
+                  </span>
                 </span>
-              </div>
+              </span>
             </span>
           </button>
         </div>

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
@@ -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;
 }