diff --git a/CHANGELOG.md b/CHANGELOG.md index 517d3540ae9..472c468766f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `loading` icon to `EuiComboBox` input when `isLoading` is `true` ([#4015](https://github.com/elastic/eui/pull/4015)) - Changed `value` prop in `EuiExpression` to not required ([#4014](https://github.com/elastic/eui/pull/4014)) - Added `fold` and `unfold` glyphs to `EuiIcon` ([#3994](https://github.com/elastic/eui/pull/3994)) diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index 700dd892c8c..ee7e0357329 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/src/components/combo_box/_combo_box.scss @@ -4,7 +4,7 @@ /** * 1. Allow pills to truncate their text with an ellipsis. - * 2. Don't allow pills to overlap with the caret or clear button. + * 2. Don't allow pills to overlap with the caret, loading icon or clear button. * 3. The height on combo can be larger than normal text inputs. */ @@ -48,6 +48,14 @@ &.euiComboBox__inputWrap-isClearable { @include euiFormControlLayoutPadding(2); /* 2 */ } + + &.euiComboBox__inputWrap-isLoading { + @include euiFormControlLayoutPadding(2); /* 2 */ + } + + &.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable { + @include euiFormControlLayoutPadding(3); /* 2 */ + } } /** @@ -110,6 +118,14 @@ &.euiComboBox__inputWrap-isClearable { @include euiFormControlLayoutPadding(2, $compressed: true); /* 2 */ } + + &.euiComboBox__inputWrap-isLoading { + @include euiFormControlLayoutPadding(2, $compressed: true); /* 2 */ + } + + &.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable { + @include euiFormControlLayoutPadding(3, $compressed: true); /* 2 */ + } } } } diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index c892d42ae16..79717a18173 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -1051,6 +1051,7 @@ export class EuiComboBox extends Component< value={value} append={singleSelection ? append : undefined} prepend={singleSelection ? prepend : undefined} + isLoading={isLoading} /> {optionsList} 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 053feb0c0f1..77f44fccb1d 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 @@ -71,6 +71,7 @@ export interface EuiComboBoxInputProps extends CommonProps { value?: string; prepend?: EuiFormControlLayoutProps['prepend']; append?: EuiFormControlLayoutProps['append']; + isLoading?: boolean; } interface EuiComboBoxInputState { @@ -157,6 +158,7 @@ export class EuiComboBoxInput extends Component< value, prepend, append, + isLoading, } = this.props; const singleSelection = Boolean(singleSelectionProp); @@ -261,6 +263,7 @@ export class EuiComboBoxInput extends Component< 'euiComboBox__inputWrap--compressed': compressed, 'euiComboBox__inputWrap--fullWidth': fullWidth, 'euiComboBox__inputWrap--noWrap': singleSelection, + 'euiComboBox__inputWrap-isLoading': isLoading, 'euiComboBox__inputWrap-isClearable': onClear, 'euiComboBox__inputWrap--inGroup': prepend || append, }); @@ -269,6 +272,7 @@ export class EuiComboBoxInput extends Component<