Added prepend and append to EuiComboBox

[ashikmeerankutty]

Summary

Fixes #2943
Added prepend and append to Combobox if singleSelection is true
Summarize your PR. If it includes design elements include a screenshot or gif.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation 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?

[cchaos]

Hey @ashikmeerankutty There is actually a much easier solution for this.

EuiFormControlLayout is the one that provides all the styling for the prepend and append elements. EuiComboBoxInput is the component that renders via EuiFormControlLayout, therefore, you just need to extend the prepend / append prop types from this component and pass them down to EuiComboBoxInput IF singleSelection is true.

[ashikmeerankutty]

@cchaos updated Can you please review?

[elizabetdev]

jenkins test this

[kibanamachine]

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

[cchaos]

The code looks right but there's no way to test this. We'll need to add an example to the docs. @miukimiu Can you advise @ashikmeerankutty on what text to add. I'd assume we can just add the display toggles component to the single selection example.

[elizabetdev]

Hi @ashikmeerankutty,

When I triggered the preview build I noticed there was no way to test it. I had to test it locally and I noticed a few things.

1. There is a missing euiComboBox__inputWrap--inGroup that should be added to the input wrapper.

2. As @cchaos mentioned there is no way to test the prepend and append. So, the display toggles component should be added to the single selection example.

3. I also noticed, there are no props notes. Because the prepend and append only work when the singleSelection is true, it's important to document this information.

Note

I created a PR ashikmeerankutty#1 that fixes these 3 issues. You can merge it or just follow it as an example.

[kibanamachine]

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

[ashikmeerankutty]

@miukimiu Thanks for the PR and suggestions. @cchaos Changes updated. Can you please review it?

[cchaos]

Jenkins, test this

[kibanamachine]

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

[ashikmeerankutty]

@cchaos Fixed 👍

[elizabetdev]

jenkins test this

[kibanamachine]

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

[cchaos]

Looks great, thank you @ashikmeerankutty