Fixing minor UI bugs in Footnotes, Hero and SectionIntroStacked

[rezrah]

Summary

Towards https://github.com/github/brand-experience/issues/289

Fixes 5 reported ui bugs in flex suite templates and their deps.

Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=196245989
Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=196245548
Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=192905495
Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=196638860
Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=185436715

List of notable changes:

• Updates icon with background border-radius from 8px to 12px in SectionIntroStacked
• Updates Hero padding in gridline-expressive variant
• Fixes dark mode bug in Expandable arrow stories
• Reduces footnote spacing to 12px from 24px
• Reduced the margin-top on hero actions for gridline-expressive variant

What should reviewers focus on?

• Check the story links below.
• Check we're comfortable with the Hero padding misalignment now that we've reduced inline padding

Steps to test:

Use the following links to verify changes:

1. Updated footnote spacing
2. Hero spacing on narrow
3. Dark mode expandable arrows
4. Rounded SectionIntroStacked icons
5. Reduced height on Hero gridline-expressive variant actions

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

Before	After

Before	After

[changeset-bot]

🦋 Changeset detected

Latest commit: 5953d24

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]

🟢 No design token changes found

[github-actions]

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	101.33 kB	101.33 kB	🟢 No change
UMD — full bundle (CSS)	66.78 kB	66.74 kB	✅ -46 B (-0.1%)
ESM — full bundle (JS + CSS)	1.51 MB	1.51 MB	⬆️ +276 B (+0.0%)
ESM — tree-shaken simple (Button)	69.66 kB	69.69 kB	⬆️ +32 B (+0.0%)
ESM — tree-shaken complex (ActionMenu)	78.44 kB	78.47 kB	⬆️ +32 B (+0.0%)

[Copilot]

Pull request overview

This PR addresses a set of small UI/Storybook presentation fixes across Primer Brand components used in Flex templates, aligning component styling with the reported design adjustments (spacing, padding, and icon rounding), and improving dark-mode presentation for the ExpandableArrow Storybook stories.

Changes:

• Increased SectionIntroStacked icon border-radius to match the updated spec (8px → 12px).
• Adjusted Hero gridline-expressive column padding on narrow viewports, including reduced inline padding.
• Reduced Footnotes item spacing (gap 24px → 12px) and wrapped ExpandableArrow stories in Text to ensure correct currentColor behavior in dark mode.

Show a summary per file

File	Description
packages/react/src/SectionIntroStacked/SectionIntroStacked.module.css	Updates icon border-radius token usage to achieve 12px rounding.
packages/react/src/Hero/Hero.module.css	Tweaks narrow-viewport padding for expressive header/body columns to address alignment.
packages/react/src/Footnotes/Footnotes.module.css	Reduces vertical spacing between footnote items via gap.
packages/react/src/ExpandableArrow/ExpandableArrow.stories.tsx	Adds a Text decorator to set an appropriate inherited text color in dark mode; minor wrapper adjustment for hover story.
.changeset/section-intro-stacked-icon-radius.md	Changeset documenting the SectionIntroStacked icon radius adjustment (patch).
.changeset/hero-gridline-expressive-narrow-padding.md	Changeset documenting the Hero narrow padding adjustment (patch).
.changeset/footnotes-gap-reduce.md	Changeset documenting the Footnotes gap reduction (patch).

Review details

• Files reviewed: 7/13 changed files
• Comments generated: 0
• Review effort level: Low

[github-actions]

🟢 No unit test coverage changes found

All components and hooks with tests maintain the same coverage as the main branch.

[github-actions]

🟢 No visual differences found

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

[jesussandreas]

@rezrah I was going to add here, for the footer notes.

lets align it to the content as well. please 🙏

[danielguillan]

Looking good!

[rezrah]

@jesussandreas your screenshot is from the prod page, we'll need to apply that change in the flex template directly. cc. @rfearing could i leave that with you please? It looks like you'll need to apply the same Box + padding that you applied to the FAQ group heading to the footnotes to fix this. I've added some footnotes to the storybook to have this represented there too.