Skip to content

Fix banner alignment with actions - #6326

Merged
joshblack merged 4 commits into
mainfrom
adierkens/banner-alignment
Jul 16, 2025
Merged

Fix banner alignment with actions#6326
joshblack merged 4 commits into
mainfrom
adierkens/banner-alignment

Conversation

@adierkens

Copy link
Copy Markdown
Contributor

Updates the styling of the banner component that includes a hidden-title and actions. Today, the presence of actions causes the icon and description to become misaligned (non-vertically centered), because the margins are updated to be slightly smaller when titles are hidden.

BeforeAfter
Banner BeforeBanner After

Rollout strategy

  • Patch release

Testing & Reviewing

Review storybook & VRTs

Merge checklist

@changeset-bot

changeset-botBot commented Jul 16, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: f917078

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

This PR includes changesets to release 1 package
NameType
@primer/reactPatch

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

@github-actions

Copy link
Copy Markdown
Contributor

👋 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-actionsgithub-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jul 16, 2025
@github-actions

github-actionsBot commented Jul 16, 2025

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
packages/react/dist/browser.esm.js91.9 KB (0%)
packages/react/dist/browser.umd.js92.23 KB (0%)

@adierkens
adierkensforce-pushed the adierkens/banner-alignment branch from 10b4b8d to 464218fCompareJuly 16, 2025 14:53
@adierkensadierkens added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jul 16, 2025
@github-actionsgithub-actionsBot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jul 16, 2025
@github-actions
github-actionsBottemporarily deployed to storybook-preview-6326 July 16, 2025 15:06 Inactive
@github-actions
github-actionsBot requested a deployment to storybook-preview-6326 July 16, 2025 15:11 Abandoned
@github-actions
github-actionsBottemporarily deployed to storybook-preview-6326 July 16, 2025 15:21 Inactive
@adierkens
adierkens marked this pull request as ready for review July 16, 2025 15:23
CopilotAI review requested due to automatic review settings July 16, 2025 15:23
@adierkens
adierkens requested review from a team as code ownersJuly 16, 2025 15:23
@adierkens
adierkens requested a review from mperrottiJuly 16, 2025 15:23

CopilotAI left a comment

Copy link
Copy Markdown
Contributor

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 visual alignment issue in the Banner component where icons and descriptions become misaligned when the component has both hidden titles and actions. The fix ensures that styling adjustments for hidden titles are only applied when actions are not present.

  • Updates CSS selectors to conditionally apply hidden-title styles only when actions are absent
  • Adds a changeset file to document the patch release

Reviewed Changes

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

FileDescription
packages/react/src/Banner/Banner.module.cssUpdates CSS selectors to fix alignment by excluding banners with actions from hidden-title styling
.changeset/tame-dancers-count.mdAdds changeset documentation for the patch release

@joshblack
joshblack added this pull request to the merge queueJul 16, 2025
@github-merge-queue
github-merge-queueBot removed this pull request from the merge queue due to failed status checks Jul 16, 2025
@github-actions
github-actionsBottemporarily deployed to storybook-preview-6326 July 16, 2025 18:25 Inactive
Merged via the queue into main with commit 3b6d68aJul 16, 2025
@joshblack
joshblack deleted the adierkens/banner-alignment branch July 16, 2025 18:30
@primerprimerBot mentioned this pull request Jul 16, 2025
llastflowers pushed a commit that referenced this pull request Jul 23, 2025
Co-authored-by: adierkens <13004162+adierkens@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommendedThis change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@adierkens@joshblack@langermank