Add check mark to singleSelection EuiComboBox (#2890)

elastic · Feb 24, 2020 · dbdf016 · dbdf016
1 parent 981914e
commit dbdf016
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/CHANGELOG.md b/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**
 

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/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}
     />

diff --git a/src/components/combo_box/combo_box.tsx b/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}

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
@@ -10,11 +10,15 @@ import { EuiText } from '../../text';
 import { EuiLoadingSpinner } from '../../loading';
 import { EuiComboBoxTitle } from './combo_box_title';
 import { EuiI18n } from '../../i18n';
-import { EuiFilterSelectItem } from '../../filter_group/filter_select_item';
+import {
+  EuiFilterSelectItem,
+  FilterChecked,
+} from '../../filter_group/filter_select_item';
 import { htmlIdGenerator } from '../../../services';
 import {
   EuiComboBoxOptionOption,
   EuiComboBoxOptionsListPosition,
+  EuiComboBoxSingleSelectionShape,
   OptionHandler,
   RefCallback,
   RefInstance,
@@ -67,6 +71,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 +172,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
       scrollToIndex,
       searchValue,
       selectedOptions,
+      singleSelection,
       updatePosition,
       width,
       ...rest
@@ -271,12 +277,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 +287,15 @@ export class EuiComboBoxOptionsList<T> extends Component<
             );
           }
 
+          let checked: FilterChecked | undefined = undefined;
+          if (
+            singleSelection &&
+            selectedOptions.length &&
+            selectedOptions[0].label === label
+          ) {
+            checked = 'on';
+          }
+
           return (
             <EuiFilterSelectItem
               style={style}
@@ -297,9 +307,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)

diff --git a/src/components/filter_group/filter_select_item.tsx b/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> {
-Original file line number
+Diff line change
@@ Expand Up @@
               },
             ]
           }
+          singleSelection={true}
           updatePosition={[Function]}
           width={0}
         />
@@ Expand Down @@