[Brand Refactor] MinimalFooter updates by danielguillan · Pull Request #1429 · primer/brand

danielguillan · 2026-07-30T13:41:58Z

Summary

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

Updates MinimalFooter with refreshed visual treatment, an opt-in custom content slot, and a back-to-top control.

📚 Docs
🕹️ Storybook

List of notable changes:

Reorganizes the footer into top, optional content, and bottom sections with updated spacing, dividers, typography, responsive behavior, and GitHub logomark.
Adds MinimalFooter.Content for custom controls or information.
Adds MinimalFooter.BackToTop with localized labels, configurable scroll behavior.
Updates social icon colors and interaction states across light and dark modes.

What should reviewers focus on?

Verify the layout, spacing, dividers, typography, and content order across desktop, tablet, and mobile, with and without social links.
Check the default and dark color modes, including social icon and Back to Top hover, focus-visible, active, and disabled states.
Verify Back to Top behavior with pointer and keyboard activation, reduced motion, custom focus targets, and consumer cancellation.

Steps to test:

Open the MinimalFooter Playground story.
Open the responsive medium and small stories, including the variants without social links, and verify the layout.
Open the Custom Content and Back to Top stories and verify their layout and interaction states.
Activate Back to Top with pointer and keyboard input. Verify it scrolls to the top, moves keyboard focus to the first <main> element, and respects disabled and reduced-motion behavior.

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

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

Before	After

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 14d976ff-b313-4037-9297-bb6554ecfdea

changeset-bot · 2026-07-30T13:42:05Z

🦋 Changeset detected

Latest commit: 9be256c

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

This PR includes changesets to release 9 packages

Name	Type
@primer/brand-primitives	Minor
@primer/react-brand	Minor
@primer/brand-docs	Minor
@primer/brand-css	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

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3cd8d822-3861-4204-a7bb-16d62f57c85c

github-actions · 2026-07-30T13:55:13Z

🔍 Design token changes found

View CSS variable changes

+ --brand-footer-borderColor: var(--base-color-scale-green-6);

+ --brand-footer-backToTop-borderColor-rest: var(--base-color-scale-gray-2);

+ --brand-footer-backToTop-borderColor-hover: var(--base-color-scale-gray-2);

+ --brand-footer-backToTop-borderColor-active: var(--base-color-scale-gray-2);

+ --brand-footer-backToTop-bgColor-rest: rgba(0, 0, 0, 0.01);

+ --brand-footer-backToTop-bgColor-hover: rgba(0, 0, 0, 0.1164);

+ --brand-footer-backToTop-bgColor-active: rgba(0, 0, 0, 0.2104);

+ --brand-footer-socialIcon-restFilter: sepia(37%) saturate(152%) hue-rotate(77deg) brightness(57%);

+ --brand-footer-borderColor: var(--base-color-scale-green-3);

+ --brand-footer-backToTop-borderColor-rest: var(--base-color-scale-gray-6);

+ --brand-footer-backToTop-borderColor-hover: rgba(255, 255, 255, 0.12);

+ --brand-footer-backToTop-borderColor-active: rgba(255, 255, 255, 0.12);

+ --brand-footer-backToTop-bgColor-rest: rgba(0, 0, 0, 0.01);

+ --brand-footer-backToTop-bgColor-hover: rgba(255, 255, 255, 0.16);

+ --brand-footer-backToTop-bgColor-active: rgba(255, 255, 255, 0.24);

+ --brand-footer-socialIcon-restFilter: saturate(73%) hue-rotate(-89deg) brightness(110%);

+ --brand-footer-socialIcon-restFilter: sepia(37%) saturate(152%) hue-rotate(77deg) brightness(57%);

+ --brand-footer-borderColor: var(--base-color-scale-green-6);

+ --brand-footer-backToTop-bgColor-active: rgba(0, 0, 0, 0.2104);

+ --brand-footer-backToTop-bgColor-hover: rgba(0, 0, 0, 0.1164);

+ --brand-footer-backToTop-bgColor-rest: rgba(0, 0, 0, 0.01);

+ --brand-footer-backToTop-borderColor-active: var(--base-color-scale-gray-2);

+ --brand-footer-backToTop-borderColor-hover: var(--base-color-scale-gray-2);

+ --brand-footer-backToTop-borderColor-rest: var(--base-color-scale-gray-2);

github-actions · 2026-07-30T13:57:02Z

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	101.76 kB	101.50 kB	✅ -261 B (-0.3%)
UMD — full bundle (CSS)	67.57 kB	68.01 kB	⬆️ +452 B (+0.7%)
ESM — full bundle (JS + CSS)	1.59 MB	1.59 MB	✅ -3.04 kB (-0.2%)
ESM — tree-shaken simple (Button)	70.86 kB	71.24 kB	⬆️ +384 B (+0.5%)
ESM — tree-shaken complex (ActionMenu)	79.82 kB	80.20 kB	⬆️ +384 B (+0.5%)

github-actions · 2026-07-30T13:57:04Z

🟢 No unit test coverage changes found

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

github-actions · 2026-07-30T14:00:06Z

🟢 No visual differences found

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

rezrah · 2026-08-04T13:44:00Z


+type MinimalFooterContentProps = React.HTMLAttributes<HTMLElement> & Omit<BaseProps<HTMLElement>, 'animate'>
+
+function Content({children, className, ...rest}: PropsWithChildren<MinimalFooterContentProps>) {


@danielguillan calling it content feels a bit too broad, generic and permissive. I'm guessing this is for edge-case content, not a general purpose slot.

For arbitrary content, we've always used props like leadingComponent or trailingComponent partly because they inherently have intrinsic friction. Giving slots a named child feels like we're encouraging this as first-class API.

I missed any API explorations here, but did you have other options you considered? E.g. centerComponent or similar.

Agree that calling it content is generic and permissive. I don't think it's necessarily for edge-cases, but making it a slot prop feels more appropriate and cohesive. I've named it centerComponent for now but I'm open to other suggestions.

sounds good, only alternatives to centerComponent are adjacent terms like middle, etc. Not sure those are better.

the test is going to be, can you see this prop being used in other components (where arbitrary centered content is applicable).

rezrah · 2026-08-04T14:01:57Z

+.Footer__copyright,
+.Footer__link-text {
+  font-family: var(--brand-fontStack-monospace);
+  font-size: var(--base-size-12);


Random note: We should consider adding 12px to our type scale. I think we use it more than we realize.

Yes, definitely. I always feel bad when I use or see the --base-size-12 token for a font size.

rezrah

Did a quick scan and it's looking good @danielguillan. Thanks for addressing the feedback I shared earlier.

jesussandreas · 2026-08-07T03:29:46Z

@danielguillan stupid question, why is the footer notes included with the footer, isn't that a separate component but we are merging them together here? 👀

jesussandreas · 2026-08-07T03:31:33Z

@danielguillan where can i see the deployment? it seeems its failing 🥺

…ates on deployment.

danielguillan · 2026-08-07T08:25:34Z

@jesussandreas sorry about the missing deployment, it seems there was a hiccup with GitHub Actions. Here’s the Storybook link

Regarding footnotes, they’ve been part of the MinimalFooter component since day 1, no changes in this PR. See current production docs.

jesussandreas · 2026-08-07T17:20:59Z

Thank you for that @danielguillan

Design notes:

Can we then have "try github, enterprise and email" on the top right

above the icons, per design.

the background of the footer being canvas/subtle instead of bg/white.

the font size of the footer, i have as 12px, currently in production shows as 14px - is this because is that the smallest we can go?

the logo size on desktop should be 32px by 32px.

IF we need to keep the footnotes, then i think we should separate them visually.

to something like this, (added on the figma file for reference)

danielguillan added 10 commits July 16, 2026 12:16

Update MinimalFooter gridline layout

0b15af6

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 14d976ff-b313-4037-9297-bb6554ecfdea

Update changeset

9dc7331

Update MinimalFooter

0aa15e2

Fixes and cleanu

d0d612f

Update changeset

5b77d1b

Update docs

4ff8383

Update tests

f765dc0

Cleanup

2a84390

Rename footer regions into sections

23b3d7e

Layout fixes

f768376

Merge main into MinimalFooter updates

eb2660c

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3cd8d822-3861-4204-a7bb-16d62f57c85c

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

Update snapshots

1dc3bfc

danielguillan temporarily deployed to github-pages July 30, 2026 14:11 — with GitHub Actions Inactive

Clean up

2e326fb

danielguillan temporarily deployed to github-pages July 30, 2026 14:24 — with GitHub Actions Inactive

Update stories

c700408

danielguillan temporarily deployed to github-pages July 30, 2026 14:45 — with GitHub Actions Inactive

Fix back to top control styles

556a9da

danielguillan temporarily deployed to github-pages July 30, 2026 14:55 — with GitHub Actions Inactive

danielguillan added 2 commits July 30, 2026 17:22

Fix inline padding on large viewports

4f4edd0

Update snapshots

7753e6d

danielguillan temporarily deployed to github-pages July 30, 2026 15:26 — with GitHub Actions Inactive

danielguillan marked this pull request as ready for review July 31, 2026 06:54

Copilot AI review requested due to automatic review settings July 31, 2026 06:54