fix(Banner): update layout to only create explicit row when actions are defined#6509
fix(Banner): update layout to only create explicit row when actions are defined#6509
Conversation
🦋 Changeset detectedLatest commit: 57b9c41 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
There was a problem hiding this comment.
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 |
|
👋 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! |
size-limit report 📦
|
|
Seems like there's a Banner snapshot that's failing inside TreeView. Updating should fix it. |
langermank
left a comment
There was a problem hiding this comment.
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!
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
Removed
Rollout strategy