Skip to content

Commit

Permalink
[EuiComboBox] Added loading icon to combobox input (#4015)
Browse files Browse the repository at this point in the history
* Add loading icon to combobox input

* changelog

* Fixed combobox padding in on loading

* Adding more paddings exceptions

Co-authored-by: miukimiu <[email protected]>
  • Loading branch information
ashikmeerankutty and elizabetdev authored Sep 8, 2020
1 parent 2dd2424 commit 38f847b
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 1 deletion.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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))

Expand Down
18 changes: 17 additions & 1 deletion src/components/combo_box/_combo_box.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/

Expand Down Expand Up @@ -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 */
}
}

/**
Expand Down Expand Up @@ -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 */
}
}
}
}
1 change: 1 addition & 0 deletions src/components/combo_box/combo_box.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1051,6 +1051,7 @@ export class EuiComboBox<T> extends Component<
value={value}
append={singleSelection ? append : undefined}
prepend={singleSelection ? prepend : undefined}
isLoading={isLoading}
/>
{optionsList}
</div>
Expand Down
4 changes: 4 additions & 0 deletions src/components/combo_box/combo_box_input/combo_box_input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export interface EuiComboBoxInputProps<T> extends CommonProps {
value?: string;
prepend?: EuiFormControlLayoutProps['prepend'];
append?: EuiFormControlLayoutProps['append'];
isLoading?: boolean;
}

interface EuiComboBoxInputState {
Expand Down Expand Up @@ -157,6 +158,7 @@ export class EuiComboBoxInput<T> extends Component<
value,
prepend,
append,
isLoading,
} = this.props;

const singleSelection = Boolean(singleSelectionProp);
Expand Down Expand Up @@ -261,6 +263,7 @@ export class EuiComboBoxInput<T> 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,
});
Expand All @@ -269,6 +272,7 @@ export class EuiComboBoxInput<T> extends Component<
<EuiFormControlLayout
icon={icon}
{...clickProps}
isLoading={isLoading}
compressed={compressed}
fullWidth={fullWidth}
prepend={prepend}
Expand Down

0 comments on commit 38f847b

Please sign in to comment.