From 7aacb99b9b22f890c9f799735ce8bcb8e9962e2c Mon Sep 17 00:00:00 2001 From: Ashik Meerankutty Date: Sat, 5 Sep 2020 18:41:08 +0530 Subject: [PATCH 1/4] Add loading icon to combobox input --- src/components/combo_box/combo_box.tsx | 1 + src/components/combo_box/combo_box_input/combo_box_input.tsx | 3 +++ 2 files changed, 4 insertions(+) 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..d9ed9a5b0b9 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); @@ -269,6 +271,7 @@ export class EuiComboBoxInput extends Component< Date: Sat, 5 Sep 2020 18:56:32 +0530 Subject: [PATCH 2/4] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 36f44212c38..d57f487d99e 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)) - Added `fold` and `unfold` glyphs to `EuiIcon` ([#3994](https://github.com/elastic/eui/pull/3994)) **Bug fixes** From 0143b4429991115efba1a84167424b280bc28ff7 Mon Sep 17 00:00:00 2001 From: Ashik Meerankutty Date: Tue, 8 Sep 2020 00:37:14 +0530 Subject: [PATCH 3/4] Fixed combobox padding in on loading --- src/components/combo_box/_combo_box.scss | 4 ++++ src/components/combo_box/combo_box_input/combo_box_input.tsx | 1 + 2 files changed, 5 insertions(+) diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index 700dd892c8c..52ac6984053 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/src/components/combo_box/_combo_box.scss @@ -48,6 +48,10 @@ &.euiComboBox__inputWrap-isClearable { @include euiFormControlLayoutPadding(2); /* 2 */ } + + &.euiComboBox__inputWrap-isLoading { + @include euiFormControlLayoutPadding(3); + } } /** 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 d9ed9a5b0b9..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 @@ -263,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, }); From cce33990dd3b76ac34ce98f995e9323ed608463c Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 8 Sep 2020 12:19:28 +0100 Subject: [PATCH 4/4] Adding more paddings exceptions --- src/components/combo_box/_combo_box.scss | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index 52ac6984053..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. */ @@ -50,7 +50,11 @@ } &.euiComboBox__inputWrap-isLoading { - @include euiFormControlLayoutPadding(3); + @include euiFormControlLayoutPadding(2); /* 2 */ + } + + &.euiComboBox__inputWrap-isLoading.euiComboBox__inputWrap-isClearable { + @include euiFormControlLayoutPadding(3); /* 2 */ } } @@ -114,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 */ + } } } }