Revise margins for notices in the notice list

[kjellr]

Looks like #16589 may have introduced a slight regression in the size/alignment of content inside of Notices that appear at the top of the screen. The notices appear too short, and the close button is misaligned. I'm not sure why this looked fine when we merged #16589, but doesn't work now:

In any case, this PR switches back to using 1em margins on the top and bottom of .components-notice__content to even that out:

It only applies this to notices when they're inside of .components-notice-list, so it should have no negative effect on notices that appear inline, elsewhere. (Thus preserving the original intent of #16589).

[youknowriad]

haha, so I figured that the issue depens on whether you have an action or not :). With this change, the design is broken if you have an action, it's the opposite in master.

wp.data.dispatch('core/notices').createNotice(
		'warning',
		'Post publis sdf sdf sdfsdhed osdfsdfsdf sdfs fsdf sdfsdf sdfsdfsdfst publis sdf sdf sdfsdhedost publis sdf sdf sdfsdhedost publis sdf sdf sdfsdhed.', // 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'
				}
			]
		}
	);

[kjellr]

Good find. 😄

I messed around with this for a bit, and I actually still think the treatment in the PR is the best option for now. The x button is only misaligned if there's an action and the content doesn't flow onto more than one line. On smaller screens (or with longer text), the close button position seems correct:

The current close button is absolutely positioned. We could theoretically restyle this to use flexbox, and have the button center-aligned vertically, but that ends up looking weird when things wrap to more than one line:

The current state of this PR how this situation was treated before #16589, so I think it at least reverts us back to that and leaves the door open for further improvements. That seems like a solid move for now.

[youknowriad]

I think my main concern here is: Can we make sure that the height of the notice stays the same with or without action if it fits in one line?

[kjellr]

I think my main concern here is: Can we make sure that the height of the notice stays the same with or without action if it fits in one line?

I pushed some updates to do that, but I feel that they're a little hacky. The issue is that the inline button pushes up the line height quite a bit. It notices were always on one line, we'd just add some extra line height to match, and we'd be all set. But we don't want to add too much line height, because when things wrap onto a second line, it'll look weird.

That last commit seeks out a middle ground: taller (but still acceptable) line height than we had before, and a very slightly shorter button + button margins:

[youknowriad]

Interesting, it makes me wonder why the actions are shown inline and not on the right. And align "text | actions | close" button using flex alignment or something?

Happy to follow your judgment and go with the current approach though.

[kjellr]

Ha, I just realized I never pushed that change. 🙃 Anyway. I think we should:

1. Merge this PR as is, without that hack. So that we essentially revert back to what we had before and fix the immediate bug.
2. Start a new PR to work on getting the size/alignment right regardless of whether there's a button or not — either using the line-height hack, or by moving the action button over to the right (which probably feels like a much cleaner method).

(Here's a diff of the hack just for the record)

Does that sound reasonable?

[youknowriad]

Works for me 👍