[Brand Refactor] River and RiverAccordion updates

[danielguillan]

Summary

• Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=186261171
• Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=173811415

Addresses QA feedback for River and RiverAccordion, including spacing/layout refinements, gridline behavior updates, and the River.Visual prop removal.

List of notable changes:

• Spacing tweaks to River and RiverAccordion, including tablet constrained layouts with lateral gridlines for gridline variants.
• River variant="gridline" now applies full-bleed visual background behavior by default.
• Breaking change: removes imageBackgroundColor from River.Visual.

What should reviewers focus on?

• Verify River spacing, visual background behavior, and lateral gridlines across desktop, tablet, and mobile.
• Verify River start, end, center, and 60:40 gridline layouts still align content and visuals correctly.

Steps to test:

1. Open River stories in Storybook, especially Components/River/Features/GridLine variants (tablet, centered, end-aligned, and 60:40).
2. Verify River gridline visual background is full-bleed by default and tablet layouts are constrained with lateral gridlines.
3. Open Components/RiverAccordion/Features/Gridline variants and verify default/end-aligned/tablet layouts.

Supporting resources (related issues, external links, etc):

• https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=186261171
• https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=173811415

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After

[changeset-bot]

🦋 Changeset detected

Latest commit: 971bd4a

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

This PR includes changesets to release 9 packages

Name	Type
@primer/react-brand	Minor
@primer/brand-docs	Minor
@primer/brand-css	Minor
@primer/brand-primitives	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-mcp	Minor
@primer/brand-config	Minor
@primer/brand-storybook	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]

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

If the changes are expected, please run npm run test:visual:update to replace the previous fixtures.

Review visual differences

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	101.65 kB	101.62 kB	✅ -31 B (-0.0%)
UMD — full bundle (CSS)	66.98 kB	67.00 kB	⬆️ +26 B (+0.0%)
ESM — full bundle (JS + CSS)	1.52 MB	1.52 MB	⬆️ +217 B (+0.0%)
ESM — tree-shaken simple (Button)	70.29 kB	70.20 kB	✅ -86 B (-0.1%)
ESM — tree-shaken complex (ActionMenu)	79.14 kB	79.06 kB	✅ -86 B (-0.1%)

[github-actions]

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 0 new tests, 0 removed tests, 1 improved, 1 decreased

Component/Hook	Statements	Functions	Branches	Change
River	100.0%	100.0%	98.4% 96.9%	-1.5%
RiverBreakout	100.0%	100.0%	83.3% 87.5%	+4.2%

[Copilot]

Pull request overview

This PR refines the River and RiverAccordion “gridline” tablet layout (constrained max-width + lateral gridlines), makes the gridline visual background full-bleed by default, and removes the imageBackgroundColor prop from River.Visual as a breaking change. It also updates RiverAccordion’s toggle icon from chevrons to triangles and adds/updates visual regression coverage for tablet scenarios.

Changes:

• Remove imageBackgroundColor from River.Visual and apply the background styling automatically for River variant="gridline".
• Update River/RiverAccordion gridline tablet styling (max-width + lateral borders) and adjust spacing.
• Update RiverAccordion toggle icons + refresh unit/visual tests and Storybook stories for new behaviors.

Show a summary per file

File	Description
packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.tsx	Reintroduces imageBackgroundColor support on RiverBreakoutTabs.Visual via a wrapper class toggle.
packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.examples.stories.tsx	Removes imageBackgroundColor usage from River.Visual inside gridline Rivers in examples.
packages/react/src/river/RiverBreakout/RiverBreakout.tsx	Adds a Visual wrapper so RiverBreakout.Visual can still accept imageBackgroundColor.
packages/react/src/river/RiverAccordion/RiverAccordion.visual.spec.ts	Adds a tablet-viewport visual regression test for the gridline tablet story.
packages/react/src/river/RiverAccordion/RiverAccordion.tsx	Switches accordion toggle icons from chevrons to triangles.
packages/react/src/river/RiverAccordion/RiverAccordion.test.tsx	Updates assertions to match new triangle octicon classnames.
packages/react/src/river/RiverAccordion/RiverAccordion.module.css	Adjusts breakpoints and adds tablet-only constrained layout + lateral borders for gridline.
packages/react/src/river/RiverAccordion/RiverAccordion.gridline.stories.tsx	Adds a dedicated “Gridline (tablet)” story using an iPad viewport preset.
packages/react/src/river/River/River.visual.spec.ts	Adds a tablet-viewport visual regression test and renames gridline tests to “default background”.
packages/react/src/river/River/River.tsx	Applies the background class to River.Visual automatically when variant="gridline"; removes the prop from RiverVisualProps.
packages/react/src/river/River/River.test.tsx	Updates unit tests for the new default background behavior and className preservation.
packages/react/src/river/River/River.gridline.stories.tsx	Updates Gridline stories to remove imageBackgroundColor usage and adds a tablet story.
packages/react/src/river/River/River.examples.stories.tsx	Removes imageBackgroundColor usage and updates explanatory copy.
packages/react/src/river/river-shared.module.css	Adds tablet max-width + lateral borders for gridline variant and adjusts CTA spacing.
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx	Migrates gridline Rivers off imageBackgroundColor usage.
apps/next-docs/content/components/River/react.mdx	Updates docs for the breaking change by removing the “Visual with background” section and the prop row.
.changeset/silver-pandas-draw.md	Adds a patch changeset for RiverAccordion tablet layout/icon update.
.changeset/quiet-otters-dance.md	Adds a minor changeset documenting the breaking change + tablet gridline updates.

Copilot's findings

• Files reviewed: 18/80 changed files
• Comments generated: 3

[danielguillan]

@copilot please fix the branch conflicts

[Copilot]

@copilot please fix the branch conflicts

Conflicts are fixed by merging origin/main into this branch and resolving the snapshot merge conflicts in commit 29b564a7.

[danielguillan]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Resolved and merged in commit ff24cc6c.

[rezrah]

FYI this test is no longer relevant and should be removed instead of inverting it