Eui: Create a custom Button/Context Menu pattern that behaves like a Form Select

[cchaos]

We need a way to use Context Menu's in forms to allow for more complex selections. However, the triggering element for the context menu should simulate the behavior of a select element not a button.

Question

Do we still use a <select> element that can trigger a context menu, or do we style a <button> to look like the <select> element?

[cjcenizal]

I think this EuiSuperSelect component would need to consist of three things:

1. The button, styled to look like the select
2. An invisible input to contain the selected value. This way the component can be part of a form which, when submitted, will pick up the value of the invisible input.
3. The popover component, which the consumer should be able to pass to the component. This can be something like what's in your mockup, a list of radio buttons, a bunch of regular buttons, or whatever. As long as this component surfaces an onChange prop, it will work.

When the user selects an item from the popover component, the onChange is called with the selection. The consumer is responsible for storing this value and passing it to the EuiSuperSelect via the value prop. The EuiSuperSelect then sets it on the invisible input and updates the button text.

[peteharverson]

This sort of control, allowing non-textual elements in the select options, would also be useful in the ML UI, to replace the current Angular UI Bootstrap dropdown control, which includes icons in the option values:

I can achieve something close to what I need with the EuiComboBox in single selection mode, but ideally I'd like to have the selection rendered with the same health icons used in the options, rather than the pill type indicator:

[snide]

Closable because of https://github.com/elastic/eui/pull/921