Skip to content

Remove margins from Notice component #54741

@ecgan

Description

@ecgan

What problem does this address?

Currently the Notice component has margins being defined in its CSS:

Because of the above defined margins, consumers who use the Notice component have to specify their own margins to override this, which is an inconvenient developer experience.

Here's a screenshot from https://wordpress.github.io/gutenberg/?path=/story/components-notice--notice-list-subcomponent - we can see that the Notices are not left-aligned with the checkbox because they have a 15px left margin:

image

This issue can also be seen in the Gutenberg editor, where the Notice component's margin is being overridden with 0:

image

It would be better to have no margins. The spacing of the Notice component should be controlled by the parent layout component.

As an example, we can refer to Ant Design's Alert component. The component does not have any margins. Spacing between multiple Notice components are controlled by the parent layout component.

image

What is your proposed solution?

Remove the margins from the Notice component.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions