[Brand Refactor] Fixes SectionIntro layout by danielguillan · Pull Request #1360 · primer/brand

danielguillan · 2026-06-02T17:14:27Z

Summary

Resolves https://github.com/orgs/github/projects/23995/views/5?filterQuery=section&pane=issue&itemId=185437322
Resolves https://github.com/orgs/github/projects/23995/views/5?filterQuery=section&pane=issue&itemId=173809910
Resolves https://github.com/orgs/github/projects/23995/views/5?filterQuery=section&pane=issue&itemId=173785876

Addresses 3 different items of QA feedback from the board.

Towards https://github.com/github/brand-marketing-design/issues/2606

List of notable changes:

Updates SectionIntroStacked layout alignment across variants.
Adjusts tablet presentation for the gridline variant.
Refines gridline divider behavior on larger viewports.

What should reviewers focus on?

Verify spacing and alignment across desktop, tablet, and mobile.
Verify the gridline variant dividers align as expected without affecting the outer gridlines.

Steps to test:

Open the SectionIntroStacked stories in the Storybook preview.
Verify the default and playground stories maintain the expected content and item alignment.
Verify the gridline story at mobile, tablet, and desktop widths.

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 · 2026-06-02T17:14:36Z

🦋 Changeset detected

Latest commit: ad8dccc

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	Patch
@primer/brand-docs	Patch
@primer/brand-css	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-mcp	Patch
@primer/brand-config	Patch
@primer/brand-storybook	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 · 2026-06-02T17:16:35Z

🟢 No design token changes found

github-actions · 2026-06-02T17:17:39Z

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	101.36 kB	101.34 kB	✅ -22 B (-0.0%)
UMD — full bundle (CSS)	66.82 kB	66.91 kB	⬆️ +91 B (+0.1%)
ESM — full bundle (JS + CSS)	1.51 MB	1.51 MB	⬆️ +122 B (+0.0%)
ESM — tree-shaken simple (Button)	69.82 kB	69.82 kB	🟢 No change
ESM — tree-shaken complex (ActionMenu)	78.60 kB	78.60 kB	🟢 No change

github-actions · 2026-06-02T17:18:00Z

🟢 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
`IDE`	~~91.2%~~ 91.6%	97.4%	~~82.8%~~ 83.4%	+0.7%
`SectionIntroStacked`	98.4%	100.0%	~~95.8%~~ 95.5%	-0.4%

github-actions · 2026-06-02T17:22:13Z

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

Copilot

Pull request overview

This PR refines SectionIntroStacked layout behavior to address QA feedback around alignment and gridline divider presentation across responsive breakpoints.

Changes:

Standardizes the SectionIntroStacked grid column layout and removes inter-column gap via columnGap="none".
Updates SectionIntroStacked responsive spacing rules, including new tablet-specific layout constraints and gridline adjustments.
Tweaks spacing in the FlexSuite AI overview recipe to better match the updated section intro layout.

Show a summary per file

File	Description
packages/react/src/SectionIntroStacked/SectionIntroStacked.tsx	Simplifies/stabilizes the grid column layout and sets `columnGap="none"` for alignment consistency.
packages/react/src/SectionIntroStacked/SectionIntroStacked.module.css	Introduces new responsive spacing rules and adjusts gridline divider behavior across breakpoints.
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx	Adjusts section padding to maintain consistent vertical rhythm after layout updates.
.changeset/soft-clouds-shift.md	Publishes the spacing/layout adjustment as a patch changeset for `@primer/react-brand`.

Copilot's findings

Files reviewed: 4/21 changed files
Comments generated: 2

danielguillan · 2026-06-03T08:14:06Z

+    max-width: 618px;
+    margin-inline: auto;


@rezrah I ended up using a max-width instead of the inline paddings, following @jesussandreas's comment on the QA ticket.

@jesussandreas, can you please confirm that this is the correct max-width for tablet viewports?

@danielguillan literally just seeing this. but it seems correct.

danielguillan · 2026-06-16T08:55:29Z

@copilot resolve the merge conflicts in this pull request

Copilot · 2026-06-16T09:07:01Z

@copilot resolve the merge conflicts in this pull request

Done — I merged origin/main into this branch and resolved the merge conflicts in commit b7b19691.

jesussandreas · 2026-06-16T17:45:05Z

another change here @danielguillan

can you ensure the gap is set to 64px in mobile? please.

this gap should be 12px instead of 8px.

border radius should be 12px.

total inner padding, should be 20px, currently is set to 32px~

on tablet, the gap is 40px instead of 64px.

rezrah · 2026-06-22T14:34:32Z

@danielguillan @jesussandreas the space under the section intro is now really large on older templates like flex suite.. checkout this snapshot diff out for an example 👇.

Personally feel the spacing is too much even on gridline, but it looks dramatically worse on older termplates. Could/should we constrain or reduce it?

rezrah · 2026-06-22T14:36:42Z

+
+@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
+  .SectionIntroStacked {
+    max-width: 618px;


Just curious whether we're accounting for some kind of inline borders here? Is that why it's not rounded up to 620px?

rezrah · 2026-06-22T14:38:54Z

 }

-@media screen and (max-width: 63.25rem) {
+@media screen and (max-width: 63.24rem) {


@danielguillan what was the reason for this breakpoint change? Want to understand the reason so we can consider fixing the inconsistencies in other components. We same to have more components using max-width of 63.25rem instead of 63.24rem right now.

rezrah · 2026-06-22T14:39:37Z

@danielguillan is this intended for this PR?

rezrah

Code looks good. Some minor feedback, but ✅ to unblock.

@jesussandreas can you please 👍 on your side too if you're ready for this to land.

danielguillan · 2026-07-16T13:26:02Z

@copilot resolve the merge conflicts in this pull request

Copilot · 2026-07-16T13:33:51Z

@copilot resolve the merge conflicts in this pull request

Done — I merged origin/main into this branch and resolved the merge conflicts in commit 7c29d112.

danielguillan added 5 commits June 2, 2026 18:41

Fix section spacing in FlexSuite overview template

12d8135

QA fixes

11325cf

Add changeset

849c270

Fix overflowing internal gridlines

2b765fb

Update snapshots

b900823

danielguillan temporarily deployed to github-pages June 2, 2026 17:18 — with GitHub Actions Inactive

danielguillan marked this pull request as ready for review June 2, 2026 17:24

danielguillan requested a review from a team as a code owner June 2, 2026 17:24

Copilot AI review requested due to automatic review settings June 2, 2026 17:24

Copilot started reviewing on behalf of danielguillan June 2, 2026 17:24 View session

Copilot AI reviewed Jun 2, 2026

View reviewed changes

Comment thread packages/react/src/SectionIntroStacked/SectionIntroStacked.module.css

Comment thread packages/react/src/SectionIntroStacked/SectionIntroStacked.module.css

danielguillan added 4 commits June 2, 2026 19:32

Fix max-width media query

c8b6d27

Add tablet story

1535e09

Update snapshots

5ff58ae

Merge branch 'main' into danielguillan/brand-refactor-qa-seciton-intro

4daf8e9

danielguillan temporarily deployed to github-pages June 2, 2026 17:49 — with GitHub Actions Inactive

danielguillan requested review from jesussandreas and rezrah June 2, 2026 17:52

danielguillan commented Jun 3, 2026

View reviewed changes

rezrah reviewed Jun 4, 2026

View reviewed changes

Comment thread ...s.visual.spec.ts-snapshots/Visual-Comparison-examples-examples-Copilot-Business-1-darwin.png

Add missing gap between content and items

5806ae4

danielguillan temporarily deployed to github-pages June 4, 2026 16:49 — with GitHub Actions Inactive

Copilot started work on behalf of danielguillan June 16, 2026 08:55 View session

Merge origin/main and resolve snapshot conflicts

b7b1969

Copilot finished work on behalf of danielguillan June 16, 2026 09:07

danielguillan added 2 commits June 22, 2026 14:30

Apply feedback

5a24197

Update snapshots

006c7c4

danielguillan temporarily deployed to github-pages June 22, 2026 12:56 — with GitHub Actions Inactive

rezrah reviewed Jun 22, 2026

View reviewed changes

rezrah approved these changes Jun 22, 2026

View reviewed changes

Copilot started work on behalf of danielguillan July 16, 2026 13:26 View session

Merge origin/main and resolve snapshot conflicts

7c29d11

Copilot finished work on behalf of danielguillan July 16, 2026 13:34

Update snapshots

ad8dccc

danielguillan temporarily deployed to github-pages July 16, 2026 13:59 — with GitHub Actions Inactive

danielguillan merged commit 5cbb414 into main Jul 16, 2026
17 checks passed

danielguillan deleted the danielguillan/brand-refactor-qa-seciton-intro branch July 16, 2026 14:09

primer Bot mentioned this pull request Jul 16, 2026

Release tracking #1403

Merged

github-actions Bot mentioned this pull request Jul 29, 2026

New release available "@primer/react-brand@0.72.0" primer/brand-releases#44

Closed

22 tasks

Uh oh!

Conversation

danielguillan commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

Contributor checklist:

Reviewer checklist:

Screenshots:

Uh oh!

changeset-bot Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No design token changes found

Uh oh!

github-actions Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Bundle size report

Uh oh!

github-actions Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Unit test coverage changes found

Uh oh!

github-actions Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No visual differences found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Uh oh!

Uh oh!

danielguillan Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

jesussandreas Jun 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

danielguillan commented Jun 16, 2026

Uh oh!

Copilot AI commented Jun 16, 2026

Uh oh!

jesussandreas commented Jun 16, 2026

Uh oh!

rezrah Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

rezrah Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

rezrah Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

rezrah Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

rezrah left a comment

Choose a reason for hiding this comment

Uh oh!

danielguillan commented Jul 16, 2026

Uh oh!

Copilot AI commented Jul 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

danielguillan commented Jun 2, 2026 •

edited

Loading

changeset-bot Bot commented Jun 2, 2026 •

edited

Loading

github-actions Bot commented Jun 2, 2026 •

edited

Loading

github-actions Bot commented Jun 2, 2026 •

edited

Loading

github-actions Bot commented Jun 2, 2026 •

edited

Loading

github-actions Bot commented Jun 2, 2026 •

edited

Loading