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 5d392c1082..f6994d8f67 100644 --- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap +++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap @@ -100,6 +100,367 @@ exports[`props autoFocus is rendered 1`] = ` `; +exports[`props custom icon is rendered 1`] = ` + +
+ + +
+
+
+ + + + + + + + + + + Mimas + + + + + + + + + +
+ +
+
+ +
+ +
+ + + + + + + + +
+
+
+
+ + +
+ +`; + exports[`props delimiter is rendered 1`] = `
`; +exports[`props icon is rendered 1`] = ` + +
+ + +
+
+
+ + + + + + + + + + + Mimas + + + + + + + + + +
+ +
+
+ +
+ +
+ + + + + + + + +
+
+
+
+ + +
+ +`; + exports[`props isClearable=false disallows user from clearing input when no options are selected 1`] = `
{ expect(component).toMatchSnapshot(); }); + + test('icon is rendered', () => { + const component = mount( + + ); + + expect(component).toMatchSnapshot(); + + const icon = findTestSubject(component, 'comboBoxIcon'); + expect(icon).toBeDefined(); + expect(icon.render().attr('data-ouiicon-type')).toBe('search'); + }); + + test('custom icon is rendered', () => { + const component = mount( + + ); + + expect(component).toMatchSnapshot(); + + const icon = findTestSubject(component, 'comboBoxIcon'); + expect(icon).toBeDefined(); + expect(icon.render().attr('data-ouiicon-type')).toBe('menu'); + }); }); test('does not show multiple checkmarks with duplicate labels', () => { diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index 0495deb723..40e37e3086 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -70,6 +70,7 @@ import AutosizeInput from 'react-input-autosize'; import { CommonProps } from '../common'; import { OuiFormControlLayoutProps } from '../form'; import { getElementZIndex } from '../../services/popover'; +import { IconType } from '../icon'; type DrillProps = Pick< OuiComboBoxOptionsListProps, @@ -98,6 +99,7 @@ export interface _OuiComboBoxProps * When `true` expands to the entire width available */ fullWidth: boolean; + icon?: IconType | boolean; id?: string; inputRef?: RefCallback; /** @@ -924,6 +926,7 @@ export class OuiComboBox extends Component< compressed, customOptionText, fullWidth, + icon, id, inputRef, isClearable, @@ -1051,6 +1054,7 @@ export class OuiComboBox extends Component< } fullWidth={fullWidth} hasSelectedOptions={selectedOptions.length > 0} + icon={icon} id={id} inputRef={this.searchInputRefCallback} isDisabled={isDisabled} diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx index a172211673..ac4428372b 100644 --- a/src/components/combo_box/combo_box_input/combo_box_input.tsx +++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx @@ -42,6 +42,7 @@ import { OuiFormControlLayout, OuiFormControlLayoutProps, } from '../../form/form_control_layout'; +import { OuiIcon, IconType } from '../../icon'; import { OuiComboBoxPill } from './combo_box_pill'; import { htmlIdGenerator } from '../../../services'; import { OuiFormControlLayoutIconsProps } from '../../form/form_control_layout/form_control_layout_icons'; @@ -59,6 +60,7 @@ export interface OuiComboBoxInputProps extends CommonProps { focusedOptionId?: string; fullWidth?: boolean; hasSelectedOptions: boolean; + icon?: IconType | boolean; id?: string; inputRef?: RefCallback; isDisabled?: boolean; @@ -151,6 +153,7 @@ export class OuiComboBoxInput extends Component< focusedOptionId, fullWidth, hasSelectedOptions, + icon: iconProp, id, inputRef, isDisabled, @@ -257,9 +260,9 @@ export class OuiComboBoxInput extends Component< }; } - let icon: OuiFormControlLayoutIconsProps['icon']; + let formControlIcon: OuiFormControlLayoutIconsProps['icon']; if (!noIcon) { - icon = { + formControlIcon = { 'aria-label': isListOpen ? 'Close list of options' : 'Open list of options', @@ -272,6 +275,20 @@ export class OuiComboBoxInput extends Component< }; } + let icon; + if (!!iconProp) { + const iconClasses = classNames('ouiComboBoxPill', 'ouiComboBoxIcon'); + + icon = ( + + ); + } + const wrapClasses = classNames('ouiComboBox__inputWrap', { 'ouiComboBox__inputWrap--compressed': compressed, 'ouiComboBox__inputWrap--fullWidth': fullWidth, @@ -283,7 +300,7 @@ export class OuiComboBoxInput extends Component< return ( extends Component< onClick={onClick} tabIndex={-1} // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div > + {icon} {!singleSelection || !searchValue ? pills : null} {placeholderMessage}