improve banner wrapping behavior

[CON3JITO]

• Closes: https://github.com/github/primer/issues/5897
• Needed for: https://github.com/github/projects-platform/issues/3471

Changelog

New

This pull request updates the Banner component's stories and refines its layout and styling to better support variants with hidden titles and actions. The changes include adding a new story for a short message variant, renaming an existing stories, and making several CSS adjustments to improve layout flexibility and responsiveness.

before demo

before.mov

after demo

after.mov

New Banner Variants and Test Coverage:

• Added new story WithHiddenTitleAndActionsShort and renamed the existing WithHiddenTitleAndActions story to WithHiddenTitleAndActionsLong in Banner.features.stories.tsx to provide better coverage for banners with hidden titles and varying action/description lengths.
• Updated the end-to-end test suite in Banner.test.ts to include the new WithHiddenTitleAndActionsShort story and reflect the renaming of the long variant, ensuring both are tested across small viewports.

Changed

• Updated .BannerContainer and .BannerContent in Banner.module.css to improve alignment, wrapping, and max-width handling, especially when the title is hidden or actions are present. This includes changes to flex/grid usage and container alignment for better responsiveness. [
• Updated .BannerActions CSS to control the display of primary actions based on their position (leading/trailing) and to prevent shrinking, ensuring consistent action button placement.
• Updated container queries to use more precise min/max-width breakpoints for grid layouts, improving layout transitions at specific banner widths.

Removed

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

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 7c6a33d

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

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Patch
@primer/styled-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

[github-actions]

👋 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!

[primer-integration]

🟢 ci completed with status success.

[Copilot]

Pull Request Overview

This PR improves the Banner component's wrapping behavior and layout flexibility, particularly for variants with hidden titles and actions. The changes address layout issues when banner content needs to wrap or when actions are displayed alongside content of varying lengths.

• Updated CSS styling to improve flex layout, alignment, and container queries for better responsiveness
• Added new story variant for short messages with hidden titles and actions
• Updated test coverage to include the new story variant and reflect story name changes

Reviewed Changes

Copilot reviewed 5 out of 31 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react/src/Banner/Banner.module.css	Updated flex layout, alignment properties, and container queries to improve banner wrapping behavior
packages/react/src/Banner/Banner.features.stories.tsx	Added new short message story and renamed existing long message story for better test coverage
packages/react/src/Banner/Banner.docs.json	Updated documentation references to reflect story name changes
e2e/components/Banner.test.ts	Added test coverage for new story variant and updated existing test references
.changeset/cold-papers-say.md	Added changeset entry for the patch release

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/3444

[CON3JITO]

integration tests passed :D