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

Switch the custom color control to a text link, fix padding for color picker. #13708

Merged
merged 8 commits into from Feb 19, 2019

Conversation

@kjellr
Copy link
Contributor

kjellr commented Feb 6, 2019

Fixes #5258.

This PR changes the custom color control from a multi-color palette icon to a text link, lined up next to the "Clear" button. It also adds proper top + bottom padding to the color picker's controls area (This appears to have been a regression at some point).

Before

original-02


original-01


After

new-02


new-01


kjellr added some commits Feb 6, 2019

Change custom color control into a text link.
Changes the custom color control into a text link instead of a multi-colored palette icon. Updates styles to properly line it up to the left of the clear button.
@mapk

mapk approved these changes Feb 6, 2019

Copy link
Contributor

mapk left a comment

Looks and works great! Tested on smaller and larger screens without any issues. I do feel a little awkward with a link opening up a popover, which feels more like a button interaction. But we can always iterate if needed. 🚢

@gziolo

This comment has been minimized.

Copy link
Member

gziolo commented Feb 7, 2019

There are 4 failing unit tests which fail because HTML markup has changed. Related docs on how to update snapshots:
https://github.com/WordPress/gutenberg/blob/master/docs/contributors/testing-overview.md#snapshot-testing

@kjellr

This comment has been minimized.

Copy link
Contributor Author

kjellr commented Feb 7, 2019

There are 4 failing unit tests which fail because HTML markup has changed. Related docs on how to update snapshots:

Thanks, @gziolo! Should be all set now.


I do feel a little awkward with a link opening up a popover, which feels more like a button interaction. But we can always iterate if needed. 🚢

Yep. For now, this actually follows the behavior for the "Visibility" and "Publish" state popovers:

screen shot 2019-02-07 at 10 55 54 am


I'll hold off for some a11y 👀 before merging. Thanks, all!

@mapk

This comment has been minimized.

Copy link
Contributor

mapk commented Feb 11, 2019

@LukePettway Can we get some a11y eyes on this before merging?

@LukePettway

This comment has been minimized.

Copy link
Contributor

LukePettway commented Feb 12, 2019

@mapk I can take a look today 🌝

@LukePettway

This comment has been minimized.

Copy link
Contributor

LukePettway commented Feb 12, 2019

Initial keyboard testing seems fine so far. I'm having issues with my VM so I can't test NVDA until I get home later today.

@kjellr

This comment has been minimized.

Copy link
Contributor Author

kjellr commented Feb 18, 2019

Hey @LukePettway — just wanted to see if you'd had a moment to review this with NVDA? I really appreciate the help. 🙂

@afercia

This comment has been minimized.

Copy link
Contributor

afercia commented Feb 18, 2019

I'd suggest to remove the tooltip, as it's now pointless :)

screenshot 2019-02-18 at 22 33 44

@mapk @LukePettway this change shouldn't impact a11y in any way as it touches only the button and CSS.

@LukePettway

This comment has been minimized.

Copy link
Contributor

LukePettway commented Feb 19, 2019

Thanks @afercia I did retest this again in Voice Over (since I can't seem to get Gutenberg running on Windows) and it worked. I think I wasn't using Safari 🤣. Everything worked fine. I agree that it shouldn't mess with anything AT related. Everything looks good to me.

@kjellr

This comment has been minimized.

Copy link
Contributor Author

kjellr commented Feb 19, 2019

Thanks, @afercia and @LukePettway. I've removed the tooltip, and I'll get this in as soon as those tests pass. 👍

@gziolo

gziolo approved these changes Feb 19, 2019

Copy link
Member

gziolo left a comment

Code changes look good as commented earlier 👍

@kjellr

This comment has been minimized.

Copy link
Contributor Author

kjellr commented Feb 19, 2019

Thanks, everyone!

@kjellr kjellr merged commit 8e18caf into master Feb 19, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@kjellr kjellr deleted the update/custom-color-control-as-text-link branch Feb 19, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment