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 adding some additional padding to the modal component. #16690

Merged
merged 3 commits into from Aug 2, 2019

Conversation

@kjellr
Copy link
Contributor

commented Jul 19, 2019

The modal component currently has 16px of padding all the way around it. This is fine, but it does leave things feeling a little closed in. This PR updates that from 16px to 24px instead. This is more padding than we typically use around these sorts of containers, but I think the extra breathing room makes the modals feel a lot more comfortable.

Before:

Screen Shot 2019-07-19 at 3 52 18 PM

Screen Shot 2019-07-19 at 3 46 28 PM

Screen Shot 2019-07-19 at 3 46 13 PM

After

Screen Shot 2019-07-19 at 3 52 01 PM

Screen Shot 2019-07-19 at 3 43 36 PM

Screen Shot 2019-07-19 at 3 43 17 PM

@@ -61,7 +61,7 @@
.components-modal__header {
box-sizing: border-box;
border-bottom: $border-width solid $light-gray-500;
padding: 0 $grid-size-large;
padding: 0 ($grid-size * 3);

This comment has been minimized.

Copy link
@kjellr

kjellr Jul 19, 2019

Author Contributor

($grid-size * 3) feels a little weird to repeat so many times here. I'm wondering if this should be an additional variable: $grid-size-extra-large or something.

@kjellr kjellr requested a review from mapk Jul 19, 2019

@mapk
mapk approved these changes Jul 24, 2019
Copy link
Contributor

left a comment

Yep! Just tested and confirmed a better feeling of comfort provided by the extra padding. Thanks for improving the small details, Kjell. It doesn't look like this extra padding interferes with the content at all either.

@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Jul 26, 2019

@mapk Would you mind giving this one more spin? I've taken my own advice from up here and made 24px into a reusable variable for better readability. Should look exactly the same.

@mapk

This comment has been minimized.

Copy link
Contributor

commented Aug 1, 2019

The padding is working well. I did notice one little thing bothering me... the close icon or X in the upper right corner looks a bit far away from the edge. I realize that's because it has its own padding. On hover, when I see the button's outline, it looks good. But when it's by itself, it feels far from the edge. I'm not sure of a better solution here, so don't let that hold up the PR. :shipit:

Unfocused and unhovered

Screen Shot 2019-08-01 at 1 59 27 PM

Hovered

Screen Shot 2019-08-01 at 2 02 45 PM

@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Aug 2, 2019

the close icon or X in the upper right corner looks a bit far away from the edge.

Yeah, I agree, it looks weird. 😕 I'll try working on that in a followup PR. (Edit: I opened #16883 to try this out.)

Thanks!

@kjellr kjellr merged commit 56f0600 into master Aug 2, 2019

1 of 2 checks passed

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

@kjellr kjellr deleted the try/more-modal-padding branch Aug 2, 2019

@youknowriad youknowriad added this to the Gutenberg 6.3 milestone Aug 9, 2019

gziolo added a commit that referenced this pull request Aug 29, 2019
Try adding some additional padding to the modal component. (#16690)
* Add additional padding to the modal component.

* Update block manager padding to match the new modal padding.

* Make ($grid-size * 3) into a variable
gziolo added a commit that referenced this pull request Aug 29, 2019
Try adding some additional padding to the modal component. (#16690)
* Add additional padding to the modal component.

* Update block manager padding to match the new modal padding.

* Make ($grid-size * 3) into a variable
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.