[EuiComboBox] Added loading icon to combobox input

[ashikmeerankutty]

Summary

Fixes: #3852

• Add loading icon to EuiComboBox input when isLoading is true.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
  - [ ] Props have proper autodocs
  - [ ] Added documentation
  - [ ] Checked Code Sandbox works for the any docs examples`
  - [ ] Added or updated jest tests
• Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[elizabetdev]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4015/

[elizabetdev]

Hi @ashikmeerankutty,

Thanks for tackling this issue. I just found a minor issue.

When the loading isLoading is true you need to add extra padding or the cursor will overlap the icons. As you can see on the following screenshots:

You can probably add an -isLoading className like we're doing here:

eui/src/components/form/super_select/super_select_control.tsx

Lines 90 to 101 in 2dd2424

	const classes = classNames(
	'euiSuperSelectControl',
	{
	'euiSuperSelectControl--fullWidth': fullWidth,
	'euiSuperSelectControl--compressed': compressed,
	'euiSuperSelectControl--inGroup': prepend || append,
	'euiSuperSelectControl-isLoading': isLoading,
	'euiSuperSelectControl-isInvalid': isInvalid,
	},
	className
	);

Then use this -isLoading className to add the extra padding.

[ashikmeerankutty]

Hi @miukimiu
I have added 3 icons padding to combobox when onLoading is true. Can you please check if thats okay.

[elizabetdev]

Thanks @ashikmeerankutty.

I added more padding exceptions because we can have situations where isClearable={false} and isLoading={true}. So just adding @include euiFormControlLayoutPadding(3); for .euiComboBox__inputWrap-isLoading creates too much padding.

Also, there were paddings missing for the compressed combobox.

I pushed an update cce3399 with a few expectations and now it's good to merge.

[elizabetdev]

jenkins test this

[ashikmeerankutty]

@miukimiu I thought about the first case. Missed to comment them. Thank you for the solution 😄

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4015/

[elizabetdev]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4015/