Gutenberg: ColorPicker: Color format toggle looks like a dropdown

[enriquesanchez]

Describe the bug
The color format toggle (Hex, RGB, HSL) in the ColorPicker looks like a drodpown:

Expected behavior
The element should look like toggle instead. It was suggested on #18448 to change the arrow for a different icon, to use a a ButtonGroup instead or to convert it to an actual Dropdown:

Let's explore these ideas and see which one feels the best.

[enriquesanchez]

Here's a proposal for the color format selector using the dropdown pattern already found elsewhere. I felt that the button group takes too much space, and it's already a bit tight due to the color input fields.

Using the dropdown approach allows us to keep the UI clean and provides the necessary affordance.

Would love to hear what you think @richtabor @jasmussen @mapk.

[jasmussen]

As a mockup, this looks good to me! I'm assuming it will use the standard popover component? Alternatively, maybe it could just be a stock dropdown?

[richtabor]

This is great @enriquesanchez! Perhaps the stock dropdown would work best as @jasmussen suggested. That's what we've migrated other similar dropdown utilizing components to (such as the FontSizePicker).

Just to confirm, what would the label update to, if RGB and HSL we're selected? Currently its "Color value in hexadecimal."

[enriquesanchez]

Thanks @richtabor and @jasmussen!

I agree that the stock dropdown should be used here.

Just to confirm, what would the label update to, if RGB and HSL we're selected?

Thanks for raising this. I think it should just say "Color value", because we now have the color format specified on the dropdown. What do you think?

[richtabor]

Thanks for raising this. I think it should just say "Color value", because we now have the color format specified on the dropdown. What do you think?

Good idea; I think that'll work.

[enriquesanchez]

Here's an update that takes into account all 3 formats and also adds a label to the format select for accessibility:

[richtabor]

What about using Hexadecimal instead of Value for the Hex view?

[richtabor]

I wonder if Color value would be fine, instead of changing it per format.

[enriquesanchez]

I wonder if Color value would be fine, instead of changing it per format.

@richtabor I think we'd still want to keep R G B and H S L above the corresponding fields when those formats are selected.

[mapk]

I like this direction, @enriquesanchez! Because we are using hsl and rgb in the label, maybe we can do what @richtabor mentioned about using hexidecimal there for the hex? Or is it important to indicate somewhere here that it's a "value" of sorts?

[enriquesanchez]

@mapk @richtabor Agreed, I think Hexadecimal works great here. This way all three toggle states will show the corresponding label for the color format:

[shaunandrews]

Was just thinking about this yesterday and spent some time on a few variations. Here's one of my fav's:

I also explored having the hex/rgb/hsl input _outside_ of the color picker:

Checkout the Figma to see a bunch of options: https://www.figma.com/file/O7epVG8iWfNiNzdSm5RNyd/Component-Color-Picker?node-id=0%3A1

[mapk]

@shaunandrews I really like your mockups with the hex _outside_ the color picker for two reasons:

1. It's much quick to identify the color value and verify it's what I wanted.
2. I don't have to open anything to edit it.

Thanks for these explorations!

[enriquesanchez]

1. It's much quick to identify the color value and verify it's what I wanted.
2. I don't have to open anything to edit it.

I agree with @mapk on these!

One thing I'm not sure about is how to have this coexist with the current pattern of having the theme palette visible. From your mockups @shaunandrews, it looks like the color palette will be visible only when the picker is invoked, right?

[enriquesanchez]

Here's another version riffing off what @shaunandrews shared above:

I still think that the color palette should be just one-click away, instead of hidden inside the color picker. I expect that to be useful for the majority of users, who might not know what those color formats are.

I got rid of the label on each field (R, G, B, etc.) that I had on https://github.com/WordPress/gutenberg/issues/18678#issuecomment-566728410 because this is not a common pattern and it's probably not really necessary here.

Also in this version, I like how the selected color is bigger and clearer

@richtabor @mapk @shaunandrews what do you think?

[enriquesanchez]

Closing this in favor of #19785, which is exploring similar iterations to the color picker.

Thanks @richtabor @mapk @shaunandrews for all the feedback and help. Let's continue moving this forward on that other issue.