Color Stops Component

[thompsongl]

@ryankeairns Moving spec from #2028 to a more visible location

---

@thompsongl @snide
Here are some initial mockups and accessibility notes based on our conversation.

Point popovers

---

The popover contains a text input for the stop value, a delete button, the color picker, and an input for the hex value. In reality, there would never be two popovers open at the same time, but the screenshot below includes an example of a popover with a validation error.

Note that this uses the new compressed inputs.

Keyboard navigation

---

1. ‘Tab’ to component to place focus; a subsequent tab moves to next sibling element, bypassing the guts of the EuiColorStop component

2. While the component is focused, ‘Arrow up/down’ will cycle through existing stops; ‘Enter’ will create a new stop at the midpoint and open the popover (as pictured above); ‘Escape’ places focus back on the parent color stop component.

3. While a stop is focused, ‘Enter’ will open the popover and focus on the ‘Stop value’ text input; tabbing will cycle through the main elements (stop input, delete button, color picker, or hex input).

4. While the color picker focused, ‘Enter’ will place focus on the color field and follow existing keyboard navigation for this component; ‘Escape’ will place focus back on parent color picker element in the normal flow of the popover content (i.e. subsequent tab goes to hex input).

5. While any first level child is selected (stop input, delete button, color picker, or hex input), ‘Escape’ will close the popover and retain focus on parent stop point;

At this point, the user can use the up/down arrows to cycle through the stops or use 'Tab' to move past the EuiColorStops component and on to the next sibling element in the DOM.

[thompsongl]

Relevant requirements and open questions from #2028:

Users must have the ability to define at which numerical value the color will switch from one to the next

This input is envisioned for cases where you know the range ahead of time. Use cases like speeds, file sizes, temperature, weights and such that fall into a known range and want to styled by that range

The user just needs to be able to define as many stop/color pairs as needed to describe the data set.

The other question though, is it actually creating a gradient or are these hard stops, or can it be either?

[thompsongl]

Just a note that the component should also accept mode and swatches props as EuiColorPicker does so custom palettes can be used and enforced.
This also means we'll need to provide an option to hide the hex input, I'd guess (using mode of swatch would likely be the way).

[cchaos]

Just another use case to think about as well and may not necessarily be solved by this exact component, but...

What if the range were not finite? For instance, the range actually depends on the user's data. But we don't know the extents. If it's bytes of RAM, it could be in the billions. How would we then allow them to indicate: "At this number (12,000) start being red"?

[thompsongl]

What if the range were not finite? [...] How would we then allow them to indicate: "At this number (12,000) start being red"?

In reality, that's how this thing will work: the last color stop you define implicitly extends to infinity, because each stop is only a color and a number indicating its starting point. So the problem is more visual/presentational, because the track has bounds.

It all depends on the use case and consumer, I guess. With the color stop below (say it has a bounds of 0-100), they could use the output to determine that from 50-100 is purple, or they could say that 50-∞ is purple.

[cchaos]

Ah yeah, then I agree it's a visual issue. We'll have to play around with it with some data.

[bcamper]

This is a very cool component. For the Maps app, the interpolated colors are broken into a fixed number of stops, rather than mapping data to a continuous gradient -- that makes the current gradient presentation here misleading for that case.

What about an option to just show fixed colors between the segments? cc @nreese @alexfrancoeur

[thompsongl]

What about an option to just show fixed colors between the segments?

This question came up back when this component was first discussed (#2028 (comment)). I think it just got lost in the thread, but it's certainly possible. If it's a majority use case for maps, we can make sure it's part of v1.

[bcamper]

Nice, missed that prior comment. It's the only current mode for replacing the new custom color ramp control in Maps:

We may provide more flexibility for color mapping in the future (e.g. let user choose a number of stops to interpolate between their data, or have us choose a default based on their data distribution), but "hard stop"s will likely always be an option to cover types of data where interpolation doesn't make sense, or you need to really accentuate a value breakpoint.

So it would be awesome IMO to have that option :)

[nreese]

So it would be awesome IMO to have that option

++

Making this a prop value to toggle fixed colors / gradients will be really useful