Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider revising the color swatch states. #17332

Open
kjellr opened this issue Sep 4, 2019 · 4 comments

Comments

@kjellr
Copy link
Contributor

commented Sep 4, 2019

The current "Selected" color circle makes it really difficult to see the actual selected color. To combat this, Gutenberg adds a second, rectangular color swatch next to the panel title.

Screen Shot 2019-09-04 at 3 02 01 PM

We should consider revising the circular swatch treatment in order to negate the need for that additional swatch.

One quick idea would be to adopt the select + focus states used for block styles. Here's how that might look:

Frame 5

Comparison to current approach:
Frame 6

This isn't quite as clear, so I think some more iteration is needed. Also worth considering: either way, we'll need a place to include a swatch if the user selects a custom color.

@drw158

This comment has been minimized.

Copy link
Contributor

commented Sep 4, 2019

What about a white check icon in the circle without the additional white circle inside it?

Screen Shot 2019-09-04 at 3 10 41 PM

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

commented Sep 4, 2019

@drw158 That wouldn't work for the color white... unless the check had a black outline around it. Alternatively, a black check icon with a white outline could be used.

@drw158

This comment has been minimized.

Copy link
Contributor

commented Sep 4, 2019

Yes, that is what I had in mind. The check icon color would simply change to black to meet contrast requirements, depending on the color.

@sarahmonster

This comment has been minimized.

Copy link
Member

commented Sep 11, 2019

I could see how the concentric circles might make it tricky for users to differentiate between the selected and hover/focus states. A check mark feels a bit more universally understood here, and it's a pattern we're already establishing elsewhere (see: image galleries) for selected states. (See also #17189, where an idea was floated for using the checkmark for a non-selected state.)

Here's a quick comparison of those options, including how it might look with the inverse (black check mark) treatment, riffing off @kjellr's original mockup. This should be easily accomplished using the tinycolor2 library already in use for contrast checks. (The mostReadable function is probably the easiest way to return the best result against the swatch colour.)

Mockups of unselected and selected colour swatches in default, hover, and focus states, using different styles of select indicators.

Note that this screenshot uses the blue focus ring used elsewhere in the UI for consistency, but we could also use the grey one currently in use for a less jarring contrast against certain colours:

The same swatch mockups, using a grey focus ring and a smaller checkmark

The above mockup also uses a slightly smaller checkmark, just so we can see more of the swatch itself. Providing it doesn't cause visibility issues, I'd be inclined to go with slightly more padding inside of the swatch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.