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

Try improving and standardizing the block styles focus + active states #16545

Merged
merged 2 commits into from Jul 12, 2019

Conversation

@kjellr
Copy link
Contributor

commented Jul 11, 2019

Fixes #15906.

This PR adopts the proposal in #15906 (comment) to make the focus state for the block styles buttons more accessible. With this change, the is-active and :focus states are differentiated by both size and color. The PR also rolls this change out to the inserter-list-item component, so that both are in sync. This may come in handy later on for #16283.

The change in a few words:

  • The is-active gray border is moved inside the active element. Minor padding adjustments are made to accommodate it.
  • The :focus border is moved to the outside of the active element, and given a 1px white buffer zone, similar to our Button block focus style.

Screenshots

Before

Focus, is-active:
Screen Shot 2019-07-11 at 12 29 26 PM

Focus and is-active:
Screen Shot 2019-07-11 at 12 31 39 PM

After

Focus, is-active:
Screen Shot 2019-07-11 at 12 30 50 PM

Focus and is-active:
Screen Shot 2019-07-11 at 12 31 09 PM

GIFs

Before

focus-states-old

After

focus-states-new

@jasmussen
Copy link
Contributor

left a comment

Yep! Solid.

@enriquesanchez

This comment has been minimized.

Copy link

commented Jul 12, 2019

This is a big improvement 👏
Tested on grayscale, inverted colors and high contrast on Mac and looks great.

@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Jul 12, 2019

Thanks, folks!

@kjellr kjellr merged commit 8c77742 into master Jul 12, 2019

1 of 13 checks passed

Filter merged Filter merged
Details
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Travis CI - Pull Request Build Passed
Details

@kjellr kjellr added this to the Gutenberg 6.2 milestone Jul 12, 2019

mcsf added a commit that referenced this pull request Jul 19, 2019

Try improving and standardizing the block styles focus + active states (
#16545)

* Improve and align focus styles.

* Add padding to prevent focus style clipping in the block list.

jg314 added a commit to jg314/gutenberg that referenced this pull request Jul 19, 2019

Try improving and standardizing the block styles focus + active states (
WordPress#16545)

* Improve and align focus styles.

* Add padding to prevent focus style clipping in the block list.

sbardian added a commit to sbardian/gutenberg that referenced this pull request Jul 29, 2019

Try improving and standardizing the block styles focus + active states (
WordPress#16545)

* Improve and align focus styles.

* Add padding to prevent focus style clipping in the block list.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.