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

Slimmer top/bottom spacing inside notices #16589

Merged
merged 2 commits into from Jul 16, 2019

Conversation

@kjellr
Copy link
Contributor

commented Jul 15, 2019

Currently, our Notice component ships with 1em of padding on the top and bottom of the content area:

Screen Shot 2019-07-15 at 8 16 25 AM

This results in a lot of extra room on the top and bottom of the text:

Screen Shot 2019-07-15 at 8 11 25 AM

This PR changes that spacing to $grid-size-small, to balance it out with the spacing on the sides, and to align to our standard spacing increments, instead of 1em:

Screen Shot 2019-07-15 at 8 12 57 AM

@aduth

aduth approved these changes Jul 15, 2019

Copy link
Member

left a comment

Code-wise this looks good, and I agree the padding is both too much and inconsistent with the rest of the admin.

I was curious where the original values might have come from, and I note that the rest of the admin uses a total of 1em margin for paragraphs in a notice:

https://github.com/WordPress/wordpress-develop/blob/master/src/wp-admin/css/common.css#L1388

I don't know if we care to mimic this, or if it's necessary to adjust other style values here (there's default padding on the notice itself, in addition to the margin of the content).)

@chrisvanpatten

This comment has been minimized.

Copy link
Member

commented Jul 15, 2019

This has been bugging me for a while but I've been too busy to fix it, so I'm very happy to see this PR! Thanks @kjellr!

@youknowriad
Copy link
Contributor

left a comment

Capture d’écran 2019-07-15 à 4 07 22 PM

I knew there was some back and forth here. It looks like this breaks the alignment of the "close" button in the regular notices of the editor.

Try

wp.data.dispatch('core/notices').createNotice(
		'info',
		'Post published.', // Text string to display.
		{
			isDismissible: true, // Whether the user can dismiss the notice.
			// Any actions the user can perform.
            actions: [
				{
					onClick: () => console.log( 'test' ),
					label: 'View post'
				}
			]
		}
	);
Add slightly taller margins inside of notices in the notice list.
So that they're not the same height as the sidebar's nav.
@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Jul 16, 2019

@youknowriad good catch. I pushed a new change that sets the top/bottom margins to $grid-size when they're inside of the components-notice-list. This keeps that close button in the right space, and also ensures that notices up there are a bit taller than the Sidebar's tabbed nav area (I remember this being a concern before, since we don't want the notices to be interpreted as an extension of that bar):

Screen Shot 2019-07-16 at 8 33 55 AM

Screen Shot 2019-07-16 at 8 34 10 AM

@youknowriad
Copy link
Contributor

left a comment

Thanks for the fix

@chrisvanpatten
Copy link
Member

left a comment

Looks great! 🚢

@kjellr kjellr merged commit 62439f0 into master Jul 16, 2019

1 of 2 checks passed

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

This comment has been minimized.

Copy link
Contributor Author

commented Jul 16, 2019

Thanks everyone!

@kjellr kjellr deleted the update/notices-top-bottom-margins branch Jul 16, 2019

jffng added a commit to jffng/gutenberg that referenced this pull request Jul 18, 2019

Slimmer top/bottom spacing inside notices (WordPress#16589)
* Slimmer top/bottom spacing inside notices

* Add slightly taller margins inside of notices in the notice list.

So that they're not the same height as the sidebar's nav.

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

Slimmer top/bottom spacing inside notices (#16589)
* Slimmer top/bottom spacing inside notices

* Add slightly taller margins inside of notices in the notice list.

So that they're not the same height as the sidebar's nav.

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

Slimmer top/bottom spacing inside notices (WordPress#16589)
* Slimmer top/bottom spacing inside notices

* Add slightly taller margins inside of notices in the notice list.

So that they're not the same height as the sidebar's nav.

@youknowriad youknowriad added this to the Gutenberg 6.2 milestone Jul 26, 2019

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

Slimmer top/bottom spacing inside notices (WordPress#16589)
* Slimmer top/bottom spacing inside notices

* Add slightly taller margins inside of notices in the notice list.

So that they're not the same height as the sidebar's nav.
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.