Add check mark to singleSelection EuiComboBox

CHANGELOG.md

@@ -12,6 +12,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.tsx.snap

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

src/components/combo_box/combo_box.tsx

@@ -825,6 +825,7 @@ export class EuiComboBox<T> extends Component<
             optionRef={this.optionRefCallback}
             options={options}
             position={listPosition}
+            singleSelection={singleSelection}
             renderOption={renderOption}
             rootId={this.rootId}
             rowHeight={rowHeight}

src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

@@ -15,6 +15,7 @@ import { htmlIdGenerator } from '../../../services';
 import {
   EuiComboBoxOptionOption,
   EuiComboBoxOptionsListPosition,
+  EuiComboBoxSingleSelectionShape,
   OptionHandler,
   RefCallback,
   RefInstance,
@@ -67,6 +68,7 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps &
     selectedOptions: Array<EuiComboBoxOptionOption<T>>;
     updatePosition: UpdatePositionHandler;
     width: number;
+    singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
   };
 
 export class EuiComboBoxOptionsList<T> extends Component<
@@ -167,6 +169,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
       scrollToIndex,
       searchValue,
       selectedOptions,
+      singleSelection,
       updatePosition,
       width,
       ...rest
@@ -271,12 +274,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
         onScroll={onScroll}
         rowRenderer={({ key, index, style }) => {
           const option = matchingOptions[index];
-          const {
-            isGroupLabelOption,
-            label,
-            value, // eslint-disable-line no-unused-vars
-            ...rest
-          } = option;
+          const { isGroupLabelOption, label, value, ...rest } = option;
 
           if (isGroupLabelOption) {
             return (
@@ -286,6 +284,15 @@ export class EuiComboBoxOptionsList<T> extends Component<
             );
           }
 
+          let checked: 'on' | 'off' = 'off';
+          if (
+            singleSelection &&
+            selectedOptions.length &&
+            selectedOptions[0].label === label
+          ) {
+            checked = 'on';
+          }
+
           return (
             <EuiFilterSelectItem
               style={style}
@@ -297,9 +304,10 @@ export class EuiComboBoxOptionsList<T> extends Component<
               }}
               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> {