diff --git a/CHANGELOG.md b/CHANGELOG.md index f70d2e2ce79..6af81e33323 100644 --- 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 index e05eaa15dd3..e74a238243a 100644 --- 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 index e071534e3e6..e042039cf84 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -825,6 +825,7 @@ export class EuiComboBox 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 index 82a0a9ec3ce..2a69172730a 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 @@ -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 = CommonProps & selectedOptions: Array>; updatePosition: UpdatePositionHandler; width: number; + singleSelection?: boolean | EuiComboBoxSingleSelectionShape; }; export class EuiComboBoxOptionsList extends Component< @@ -167,6 +172,7 @@ export class EuiComboBoxOptionsList extends Component< scrollToIndex, searchValue, selectedOptions, + singleSelection, updatePosition, width, ...rest @@ -271,12 +277,7 @@ export class EuiComboBoxOptionsList 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 extends Component< ); } + let checked: FilterChecked | undefined = undefined; + if ( + singleSelection && + selectedOptions.length && + selectedOptions[0].label === label + ) { + checked = 'on'; + } + return ( 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 index eeee1c322c7..24b653398f2 100644 --- 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 {