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: Make the modal overlay scrim darker #15974

Merged
merged 1 commit into from Jun 17, 2019

Conversation

@kjellr
Copy link
Contributor

commented Jun 3, 2019

Over in #7602 (comment), I noticed @afercia bring up the point that the scrim (also known as the color overlay) behind the modal is inconsistent with the color used throughout WP-Admin. This is true — you'll notice that the Media modal brings up a dark background, whereas other modals use the white background.

I know this has been discussed in the past, but now that some time has passed I'm wondering if we'd be open to reconsidering?

The purpose of the scrim is to de-emphasise distracting elements of the screen and focus attention on an important area (in this case, the modal). Darkening the scrim helps fulfill this purpose more effectively by increasing the contrast between the important area and the rest of the page. This seems like a simple change that'd benefit everyone.

For the PR here, I've swapped out the white with black, and adjusted the opacity to match the color used in the media modal's scrim.

Before:

gutenberg test_wp-admin_post php_post=1 action=edit(iPad) (1)

After:

gutenberg test_wp-admin_post php_post=1 action=edit(iPad)

@afercia

This comment has been minimized.

Copy link
Contributor

commented Jun 4, 2019

Note: the overlay color was discussed a few times in the past and there was no great consensus (I'm for the darker option for consistency) 🙂 See for example #6261 (comment)

@sarahmonster

This comment has been minimized.

Copy link
Member

commented Jun 7, 2019

This looks great! With the background and foreground both in white, this change helps provide contrast so that users can better focus on the import information in the foreground, which is the intention of the modal.

Also, it's more in line with almost every scrim pattern I've seen elsewhere on the internet and it's on my personal wishlist for #7602, so I'm biased. 😉

@afercia

This comment has been minimized.

Copy link
Contributor

commented Jun 7, 2019

Quickly discussed during today's accessibility bug-scrub.

Anything that makes a dialog work like a real modal interaction, helping users to focus on the specific requested task, is very welcome. Thanks for working on this. Consistency is also important, to avoid users can potentially be confused by different styling in different parts of core.

@mapk

mapk approved these changes Jun 15, 2019

Copy link
Contributor

left a comment

I just tested it. Looks great! So much more focused. :shipit:

I've been partial to the white scrim in the past, but that's because I've regularly tested on somewhat blank pages, and it looks/works good in that context. But on pages that are filled with content, the darker scrim works way better at narrowing focus on the modal.

@jasmussen
Copy link
Contributor

left a comment

👍 👍

At some point, and I keep saying that I hope we can reach that day soon, I would love for all the improvements we've made to components (button/input focus styles) that are exclusive to Gutenberg, to apply to the rest of the UI, so we can bring consistency across the board.

When that day comes, I would love for us to make this scrim not quite as dark — 40% opacity seems way sufficient — and make that consisten across all scrims. But we'll cross that bridge when we get there!

@kjellr kjellr merged commit 06eb744 into master Jun 17, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details

@kjellr kjellr deleted the try/update-scrim-from-white-to-black branch Jun 17, 2019

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

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

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.