Add check mark to singleSelection EuiComboBox

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Added `image` glyph to `EuiIcon` ([#2870](https://github.com/elastic/eui/pull/2870))
 - Exported TS props from top level `EuiListGroupProps`, `EuiListGroupItemProps`, `EuiSelectableProps`,  `EuiSelectableOption`, `EuiSelectableOptionsListProps` ([#2869](https://github.com/elastic/eui/pull/2869))
 - Extending `EuiSelectable[options]` type with correct HTML element ([#2869](https://github.com/elastic/eui/pull/2869))
+- Added check mark to single selection `EuiComboBox` ([#2890](https://github.com/elastic/eui/pull/2890))
 
 **Bug fixes**
 

src/components/combo_box/__snapshots__/combo_box.test.js.snap

@@ -517,6 +517,7 @@ exports[`props singleSelection selects existing option when opened 1`] = `
           },
         ]
       }
+      singleSelection={true}
       updatePosition={[Function]}
     />
   </EuiPortal>

src/components/combo_box/combo_box.js

@@ -716,6 +716,7 @@ export class EuiComboBox extends Component {
             getSelectedOptionForSearchValue={getSelectedOptionForSearchValue}
             updatePosition={this.updateListPosition}
             position={listPosition}
+            singleSelection={singleSelection}
             renderOption={renderOption}
             width={width}
             scrollToIndex={activeOptionIndex}

src/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -133,6 +133,7 @@ export class EuiComboBoxOptionsList extends Component {
       listRef,
       updatePosition,
       width,
+      singleSelection,
       scrollToIndex,
       onScroll,
       rowHeight,
@@ -263,6 +264,14 @@ export class EuiComboBoxOptionsList extends Component {
             );
           }
 
+          let checked;
+          if (singleSelection) {
+            checked =
+              selectedOptions.length && selectedOptions[0].label === label
+                ? 'on'
+                : null;
+          }
+
           return (
             <EuiFilterSelectItem
               style={style}
@@ -271,9 +280,10 @@ export class EuiComboBoxOptionsList extends Component {
               // onEnterKey={onOptionEnterKey}
               ref={optionRef.bind(this, index)}
               isFocused={activeOptionIndex === index}
+              checked={checked}
+              showIcons={singleSelection ? true : false}
               id={rootId(`_option-${index}`)}
               title={label}
-              showIcons={false}
               {...rest}>
               {renderOption ? (
                 renderOption(option, searchValue, OPTION_CONTENT_CLASSNAME)

src/components/filter_group/filter_select_item.tsx

@@ -21,8 +21,14 @@ const resolveIconAndColor = (checked?: FilterChecked) => {
     return { icon: 'empty' };
   }
   return checked === 'on'
-    ? { icon: 'check', color: 'text' }
-    : { icon: 'cross', color: 'text' };
+    ? {
+        icon: 'check',
+        color: 'text',
+      }
+    : {
+        icon: 'cross',
+        color: 'text',
+      };
 };
 
 export class EuiFilterSelectItem extends Component<EuiFilterSelectItemProps> {