Add Color Palette Picker component and widget

[elizabetdev]

The problem

In EUI are providing multiple color palettes but we are not providing a component that allows users to pick them.

In Maps we are using the following pattern to pick a color palette:

And in our charts section in EUI we have a similar pattern:

Not providing this pattern as a component can lead to different implementations.

Also, we only have one qualitative palette. Allowing different teams to pick different solutions can lead to different issues:

• Most of the available community palettes are not colorblind-safe
• They don't look good in light and dark themes

Can we provide more qualitative palettes that work in light and dark themes and provide a11y?

The solution

The idea is to provide in EUI a component to pick different types of palettes. Allows, customization and allows users to test the palettes in different scenarios (different themes, different data viz).

Color Palette Picker Component

A color palette picker component that allows picking a specific type of palette. Also, it should allow users to create their customized palette.

Color Palette Picker Widget

It would be great to have a way to test/preview all EUI palettes on different data viz. The following image is an initial design idea:

Figma Prototype

You can find it here

[ryankeairns]

Tracking this new component for use in Canvas which currently offers use this color palette picker:

The palettes offered are largely arbitrary and could be improved upon.

[cchaos]

The Color Palette Picker Widget idea is certainly interesting and will be helpful once we have more charts available in elastic/charts. I think the Color Palette Picker Component is high priority since we seem to have new instances pop up every minor and we should really get these UI's unified.

[cchaos]

Related Kibana ticket: elastic/kibana#43697

[lokeshrana9999]

@miukimiu is anyone still working on this? I would like to try it.

[elizabetdev]

@lokeshrana9999 yes, you can help.

The high priority right now is the Color Palette Picker Component. But I still need to finish the designs and get the approval.

Once I have it done, I'll share here the designs and you can start building the component.

[nreese]

@miukimiu Can you make sure to add type ahead support in your designs. In the Kibana maps application, the stop input box is a combo box and uses a function passed in to props to fetch suggestions from ES.

[elizabetdev]

@nreese as promised the Draft PR is live: #3192.

[wylieconlon]

@ryankeairns I like that canvas is offering more than one categorical palette here: none of the other threads I've seen about color palettes have specified which palettes are useful.

[hbharding]

Hey chiming in late here. I've been working on adding color palettes to the Metrics UI Waffle map, so I'm happy to see we have an effort behind this already! I definitely want to use whatever we decide here. My designs are not final, but here are some screenshots of what I was thinking.

We want to provide a limited choice of colors and options for the user to control how the waffle map is colored. One thing that makes our case a little unique is that we want to allow the user to choose the number of colors in the gradient. For the select input, I show the color palette name as text. In the select menu, I show the text + a smooth gradient preview. Below the select input, I show a preview of the colors based on the # of selected steps (from the input below... i might need to adjust my hierarchy).

More Screenshots