EuiColorPicker needs to support opacity

[cchaos]

In order to swap out more instances in Kibana (TSVB), the color picker needs to allow for an opacity slider.

elastic/kibana#52084

[thompsongl]

@cchaos Looking at the TSVB color picker, it changes its input to rgba when opacity < 1.
Do we want to open the EUI input to accept rgba, also, or keep it limited to hex (returning 8-digit values when opacity < 1)?

Based on their usage, it looks like the input might not even be in use when changing to EUI (might be a swatch button instead of the input)

[cchaos]

We'd probably have to use the inline version with an extra input they way the color stops popover does.

As to the hex vs rgba values, that's a good question. I assume most users would understand the alpha channel but not that adding 2 extra digits to a hex alters the opacity. However, I think supporting both complicates the component quite a bit.

Perhaps instead of just a single slider for opacity, there's also a small input to adjust the opacity value. Something like:

[thompsongl]

Ok. In this case we could treat alpha (or full rgba) as a second return value, which would allow consumers to handle it however they want.

Also, @snide brought up the point that 8-digit hex values aren't supported in CSS in IE11 (and Edge), which I verified.

[thompsongl]

I think I like the decimal representation better. The return value for onChange will probably be in decimal format regardless.

[cchaos]

I think showing it as a percentage is more universally understood than decimal. Since the decimal notation is essentially a fraction.

[nreese]

Are there plans to provide a property to opt out of showing the opacity input?

[snide]

Are there plans to provide a property to opt out of showing the opacity input?

It should be off by default. This is an optional feature.

[thompsongl]

#2850 introduced opacity support

#3055 is a continuation of this, which would add new layout option and probably require a refactor/simplification of the EuiColorStops component