Skip to content

fix(Banner): update layout to only create explicit row when actions are defined#6509

Merged
joshblack merged 5 commits intomainfrom
fix/update-banner-row-sizing
Aug 12, 2025
Merged

fix(Banner): update layout to only create explicit row when actions are defined#6509
joshblack merged 5 commits intomainfrom
fix/update-banner-row-sizing

Conversation

@joshblack
Copy link
Copy Markdown
Member

Closes https://github.com/github/primer/issues/5652

There was a space being generated in smaller viewports when no actions were present in a Banner. This was due to us creating two explicit rows and we had a row-gap defined. This change updates our rule to only create explicit rows when we have actions defined

Changelog

New

Changed

  • Update layout logic within Banner to accommodate no actions

Removed

Rollout strategy

  • Patch release

Copilot AI review requested due to automatic review settings August 7, 2025 18:45
@joshblack joshblack requested a review from a team as a code owner August 7, 2025 18:45
@joshblack joshblack requested a review from francinelucca August 7, 2025 18:45
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Aug 7, 2025

🦋 Changeset detected

Latest commit: 57b9c41

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR fixes a layout issue in the Banner component where extra spacing was appearing below the description when no actions were present. The issue occurred because the CSS was creating explicit grid rows even when actions weren't needed.

Key changes:

  • Modified CSS grid template to only create two rows when actions are present
  • Added conditional grid layout using CSS :has() selector

Reviewed Changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated no comments.

File Description
packages/react/src/Banner/Banner.module.css Updated grid layout to conditionally apply two-row template only when actions container exists
.changeset/bright-dolls-dance.md Added changeset entry documenting the layout fix

@github-actions github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Aug 7, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Aug 7, 2025

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Aug 7, 2025

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 90.2 KB (-0.02% 🔽)
packages/react/dist/browser.umd.js 90.38 KB (-0.01% 🔽)

@pksjce
Copy link
Copy Markdown
Contributor

pksjce commented Aug 8, 2025

Seems like there's a Banner snapshot that's failing inside TreeView. Updating should fix it.

@primer primer bot requested a review from a team as a code owner August 8, 2025 03:36
@primer primer bot requested a review from langermank August 8, 2025 03:36
@github-actions github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Aug 8, 2025
@github-actions github-actions bot temporarily deployed to storybook-preview-6509 August 8, 2025 03:46 Inactive
Copy link
Copy Markdown
Contributor

@langermank langermank left a comment

Choose a reason for hiding this comment

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

It's a little funny that the only VRT that picks this up is in TreeView 😂 should probably add a story + VRT to test this but merge away!

@joshblack joshblack added this pull request to the merge queue Aug 12, 2025
Merged via the queue into main with commit 3b3cf52 Aug 12, 2025
41 of 42 checks passed
@joshblack joshblack deleted the fix/update-banner-row-sizing branch August 12, 2025 16:42
@primer primer bot mentioned this pull request Aug 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm staff Author is a staff member

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants