Skip to content

fix Banner spacing - #6190

Merged
llastflowers merged 12 commits into
mainfrom
llastflowers/3720/banner-spacing-issues
Jun 13, 2025
Merged

fix Banner spacing#6190
llastflowers merged 12 commits into
mainfrom
llastflowers/3720/banner-spacing-issues

Conversation

@llastflowers

@llastflowersllastflowers commented Jun 10, 2025

Copy link
Copy Markdown
Contributor

Closeshttps://github.com/github/primer/issues/3720

Changelog

Changed

Styling update addressing banner spacing issues--see vertical alignment on single line banner below (before / after):

Banner before changes
Banner after changes

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

I used the following Playground settings to see this view where the issue was occurring (viewable here):

Banner Playground settings for testing

Merge checklist

@changeset-bot

changeset-botBot commented Jun 10, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 5f281fc

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

This comment was marked as resolved.

@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 Jun 10, 2025
@github-actions

github-actionsBot commented Jun 10, 2025

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
packages/react/dist/browser.esm.js92.18 KB (0%)
packages/react/dist/browser.umd.js92.25 KB (0%)

@github-actions
github-actionsBot requested a deployment to storybook-preview-6190 June 10, 2025 18:06 Abandoned
@llastflowersllastflowers added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jun 10, 2025
@github-actions
github-actionsBottemporarily deployed to storybook-preview-6190 June 10, 2025 18:20 Inactive
@github-actionsgithub-actionsBot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jun 10, 2025
@github-actions
github-actionsBottemporarily deployed to storybook-preview-6190 June 10, 2025 18:36 Inactive
@github-actionsgithub-actionsBot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Jun 10, 2025
@llastflowers
llastflowers marked this pull request as ready for review June 10, 2025 19:07
CopilotAI review requested due to automatic review settings June 10, 2025 19:07
@llastflowers
llastflowers requested review from a team as code ownersJune 10, 2025 19:07

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 patch fixes the vertical alignment of the Banner component and corrects a typo in the story description.

  • Aligns banner content centrally instead of at the start
  • Fixes typo in the Playground description text
  • Adds a changeset to trigger a patch release

Reviewed Changes

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

FileDescription
Banner.stories.tsxCorrected typo in the description arg (en ableenable)
Banner.module.cssChanged align-items from start to center in container
.changeset/big-hairs-agree.mdAdded changeset entry for a patch release

@llastflowers
llastflowers marked this pull request as draft June 10, 2025 21:08
@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 Jun 11, 2025
…tions are present, so that the button and x will be aligned when seen together, but there will will be no x position change if there is an x with no BannerActions
@github-actionsgithub-actionsBot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jun 11, 2025
@github-actions

This comment was marked as duplicate.

@github-actionsgithub-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jun 11, 2025
@github-actions

This comment was marked as outdated.

@github-actions
github-actionsBot requested a deployment to storybook-preview-6190 June 11, 2025 21:17 Abandoned
@github-actions
github-actionsBottemporarily deployed to storybook-preview-6190 June 11, 2025 21:31 Inactive
@llastflowers

Copy link
Copy Markdown
ContributorAuthor

Documenting some context for the newer code changes based on slack DMs with @lukasoppermann:

The change that addressed this original issue (before/after):

banner with buttons without dismiss zoomed in before

banner with buttons without dismiss zoomed in after

was causing this view to look wonky because the x was not vertically aligned, and the buttons now are:

banner with button with dismiss zoomed in before

So I have conditionally applied a matching style to the dismiss x to align it with buttons when present:

banner with button with dismiss zoomed in after

but the x will not move if there are no buttons, to prevent it from moving from its current top-right default position:

banner with position of dismiss x

Margins adjusted with buttons vs. default:

moved x showing margins
unmoved x showing margins

@github-actionsgithub-actionsBot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jun 11, 2025
@llastflowersllastflowers added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jun 11, 2025
@github-actionsgithub-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Jun 11, 2025
@github-actions

This comment was marked as outdated.

@lukasoppermann
lukasoppermann removed the request for review from maximedegreveJune 13, 2025 17:35
@llastflowers
llastflowers added this pull request to the merge queueJun 13, 2025
Merged via the queue into main with commit 613a362Jun 13, 2025
@llastflowers
llastflowers deleted the llastflowers/3720/banner-spacing-issues branch June 13, 2025 18:34
@primerprimerBot mentioned this pull request Jun 13, 2025
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: Bannerintegration-tests: passingChanges in this PR do NOT cause breaking changes in gh/ghintegration-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

@llastflowers@lukasoppermann@jonrohan