[EuiComboBox] Adding hit enter badge

[miukimiu]

Summary

This PR introduces a hit enter badge on the right side of a EuiComboBox option. The idea of the badge is to help users to know that they can press enter to add an option.

The idea of adding this badge started on #3702.

• The badge appears when focusing an option
• The badge appears on two empty states: Add {searchValue} as a custom option. I also added the badge to Add each item separated by {delimiter}" but I can't test this (Is this code exception done properly?)
• Instead of using an icon for the badge, I'm using an HTML character entity.

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
• [ ] 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]

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

[kibanamachine]

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

[kibanamachine]

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

[cchaos]

I also added the badge to Add each item separated by {delimiter}" but I can't test this (Is this code exception done properly?)

Yeah I'm seeing that there is a bug that where you can paste a delimited list and if you click outside of the combobox it will create each option properly, but simply hitting enter only take the last item. Is this something you can look into?

---

It seems like there's extra space below the custom option text.

---

Can you run through some of the ComboBox examples to make sure their settings are appropriate? For example, the Virtualized example has a custom placeholder saying "Select or create options" but that example doesn't have the ability to add a custom option.

---

Be sure not to show the badge on disabled items

[kibanamachine]

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

[kibanamachine]

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

[miukimiu]

@chaos I fixed the issues you pointed out:

• Removed extra space bellow Add add {searchValue} as a custom option
• Looked into the examples to make sure the placeholders are ok
• Removed the badges on disabled options
• Added an icon inside the badge. I’m waiting for Add returnKey glyph to EuiIcon #3783 to be merged to have the right icon.
• The underlining on hover problem is not happening anymore because we don’t have a text inside the badge
• Changed to spans the elements getting rendered inside the button.
• There was also a EuiFlexItems that was part of the EuiFilterSelectItem I changed to a span.
• I'm going to create an issue for the delimiter bug.

[kibanamachine]

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

[cchaos]

👍 LGTM. Tested in Chrome, Safari, and FF. I also tested the filter group buttons to make sure they were rendering properly with the span. Just waiting on that returnKey icon, then this is good to go.

[kibanamachine]

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