Banner: Add flush prop for use inside dialogs, sidebars and other confined spaces

[siddharthkp]

• Fixes https://github.com/github/primer/issues/6244

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: 0514121

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	Minor

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-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull request overview

This PR adds a flush prop to the Banner component for use within confined spaces like dialogs, sidebars, tables, cards, or boxes. The flush variant removes the left and right borders and border-radius to create a full-width appearance that integrates better with container boundaries.

Key changes:

• Adds boolean flush prop with default value of false to Banner component
• Applies CSS styling to remove left/right borders and border-radius when flush is true
• Includes a story demonstrating the flush banner inside a Dialog component

Reviewed changes

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

File	Description
packages/react/src/Banner/Banner.tsx	Adds flush prop definition, default value, and data attribute implementation
packages/react/src/Banner/Banner.module.css	Adds CSS selector for data-flush='true' to remove side borders and border-radius
packages/react/src/Banner/Banner.features.stories.tsx	Updates InsideDialog story to FlushInsideDialog demonstrating the flush prop usage with custom Dialog renderBody
packages/react/src/Banner/Banner.docs.json	Adds documentation for the flush prop with type, default value, and description

[github-actions]

👋 Hi, there are new commits since the last successful integration test. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[github-actions]

👋 Hi, there are new commits since the last successful integration test. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[francinelucca]

LGTM! non-blocking suggestions

[francinelucca]

(you might be onto this already) Should we also plan to add some guidance around when flush is acceptable to our docs? 👀

[siddharthkp]

yep! Lukas has a PR open

[github-actions]

👋 Hi, there are new commits since the last successful integration test. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[github-actions]

👋 Hi, there are new commits since the last successful integration test. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[lukasoppermann]

Looks great. 👍

[github-actions]

👋 Hi, there are new commits since the last successful integration test. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.