Skip to content

🐛 [BUG] - Bento.Item removes vertical padding #792

Open
@stefankp

Description

Describe the bug

A simple Bento.Item without background, has vertical padding removed by row-padding-override. This doesn't happen when the visualAsBackground is set, even if there's no visual. Which is also the case for the No Visual example in Storybook.

Reproduction steps

Reproduce here https://primer.style/brand/components/Bento with the following snippet:

<Box
  style={{backgroundColor: 'var(--base-color-scale-gray-2)'}}
  padding="normal"
>
  <Bento>
    <Bento.Item>
      <Bento.Content>
        <Bento.Heading>
          Heading
        </Bento.Heading>

        <Link href="#">
          Link
        </Link>
      </Bento.Content>
    </Bento.Item>
  </Bento>
</Box>

Expected behavior

Padding should stay consistent or it should be clear why vertical padding is removed.

Screenshots

Bento item with no vertical padding

row-padding-override styles applied

Browsers

No response

OS

No response

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    brandbugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions