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

Remove unnecessary padding-right on the dismissible notice #52240

Conversation

kmanijak
Copy link
Contributor

@kmanijak kmanijak commented Jul 3, 2023

What?

In this PR I removed the padding-right from a Notice component when it's dismissable.

Why?

When Notice was dismissable, an additional 36px padding-right was applied to the Notice container, pushing the content to the left, which makes little space for Notice content especially when used in Inspector Controls. It seems incorrect on the frontend (see screenshots below).

Worth to mention that the "X" button is coincidentally 36px wide, so the original idea might've been to apply the padding so the content makes space for an "X" button, but now it pushes both: "X" button and content.

How?

It's fixed by removing the unnecessary padding-right from the .components-notice.is-dismissable selector.

Testing Instructions

  1. Edit some block Inspector Controls by including:
import { Notice } from '@wordpress/components';

...

<Notice>
    Some content of the Notice. Make sure it's wide enough to fill available space.
</Notice>

Notice component is dismissable by default, so there's no need to pass any additional props to it.
2. Display the Notice in the frontend
3. Expected: There's no unnecessary gap on the right side (check screenshots below).

Screenshots or screencast

Before After
image image

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @kmanijak, thank you for this fix. I think it makes sense to apply this fix and not change padding when the notice is dismissible. If needed users of the component can style it and change for example notices related to post saving falling already change the padding.

@jorgefilipecosta jorgefilipecosta merged commit b5c6940 into WordPress:trunk Sep 11, 2023
@github-actions github-actions bot added this to the Gutenberg 16.7 milestone Sep 11, 2023
@mikachan mikachan added [Package] Components /packages/components [Type] Enhancement A suggestion for improvement. labels Sep 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants