Blankslate: shift size scale and use default button size#8034
Open
Copilot wants to merge 9 commits into
Open
Conversation
…um become large Co-authored-by: dylanatsmith <6905903+dylanatsmith@users.noreply.github.com>
Copilot created this pull request from a session on behalf of
dylanatsmith
June 23, 2026 13:52
View session
🦋 Changeset detectedLatest commit: ff86353 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
| @@ -0,0 +1,5 @@ | |||
| --- | |||
| '@primer/react': major | |||
Member
There was a problem hiding this comment.
I’d argue this could be a minor version but it is sort of a breaking change so 🤷♂️
github-actions
Bot
added
the
integration-tests: recommended
Contributor
|
Co-authored-by: dylanatsmith <6905903+dylanatsmith@users.noreply.github.com>
Copilot
AI
changed the title
Shift Blankslate size scale: default to the compact (former
Blankslate: shift size scale and use default button size
Jun 23, 2026
small) stylesCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
dylanatsmith
added
the
update snapshots
github-actions
Bot
removed
the
update snapshots
10 tasks
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
dylanatsmith
added
the
update snapshots
llastflowers
removed
the
update snapshots
llastflowers
added
the
update snapshots
github-actions
Bot
removed
the
update snapshots
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates Blankslate in @primer/react to make the compact presentation the default, aligning the size scale and visuals with the companion primer/view_components implementation. It removes the old small size, shifts the remaining size styles up one step, and ensures Blankslate.PrimaryAction uses the default Button size across variants.
Changes:
- Rescaled
Blankslatesizeprop (medium→ oldsmall,large→ oldmedium) and removedsize="small"(plus old “large” visuals). - Removed now-unused
BlankslateContext/provider wiring and stopped conditionally rendering a small primary action button. - Updated CSS, tests, Storybook stories, docs metadata, Figma connect, and added a major changeset for the breaking change.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/Blankslate/BlankslateContext.ts | Removed the Blankslate size context now that button sizing is no longer conditional. |
| packages/react/src/Blankslate/Blankslate.tsx | Dropped size="small" from the API and removed context usage; primary action now always uses the default Button size. |
| packages/react/src/Blankslate/Blankslate.module.css | Shifted the size token/padding scale and removed the now-redundant container query block. |
| packages/react/src/Blankslate/Blankslate.test.tsx | Updated padding test expectations to match the new size scale. |
| packages/react/src/Blankslate/Blankslate.stories.tsx | Updated Storybook controls to only offer medium and large. |
| packages/react/src/Blankslate/Blankslate.features.stories.tsx | Removed the SizeSmall story now that small is no longer supported. |
| packages/react/src/Blankslate/Blankslate.docs.json | Updated the documented size union type to match the new API. |
| packages/react/src/Blankslate/Blankslate.figma.tsx | Removed small from the Figma enum props mapping. |
| .changeset/blankslate-size-scale.md | Added a major-version changeset describing the breaking size scale change. |
Review details
- Files reviewed: 9/94 changed files
- Comments generated: 3
- Review effort level: Low
Comment on lines
+56
to
60
| it('sets reduced padding for the default medium size variant', () => { | ||
| render(<Blankslate>Test content</Blankslate>) | ||
|
|
||
| expect(getSizePadding('small')).toMatch(/^var\(--base-size-16/) | ||
| expect(getSizePadding('medium')).toMatch(/^var\(--base-size-16/) | ||
| }) |
Co-authored-by: dylanatsmith <6905903+dylanatsmith@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Rescales
Blankslatesizes so the compact styling is the default. The oldsmallstyles become the defaultmedium, the oldmediumstyles becomelarge, and the oldlargestyles are removed. The primary action button now uses the default (medium) size at every Blankslate size.Related PR
Companion change: primer/view_components#4110 — Blankslate: make compact styling the default.
Both PRs make the compact
Blankslatepresentation the default so the component stays visually consistent across our React and Rails/ViewComponents implementations. view_components has nosizeprop,BlankslateContext, orsmall/medium/largescale, so the portable part of this change there is simply promoting the compact styling to the base rules and dropping the now-redundant@containerresponsive block. They should land together to avoid the two implementations drifting apart.Changelog
New
Changed
size="medium"(default) now renders the formersmallstyling;size="large"renders the formermediumstyling.Blankslate.PrimaryActionalways renders a default-size button instead of asmallbutton on the compact size.Removed
size="small"value and the formerlargestyles.@containerresponsive block (the compact presentation it produced is now the default).BlankslateContext), which only existed to drive the conditional button size.Rollout strategy
Migration:
sizeno longer accepts"small". Consumers usingsize="small"should drop the prop (defaultmediumnow matches the old small visuals). Consumers relying on the oldmedium/largevisuals should bump up one step (medium→large); the oldlargehas no replacement.Testing & Reviewing
Default,SizeMedium, andSizeLargestories render the expected padding/typography.mediumandlarge.Merge checklist