Blankslate: shift size scale and use default button size#8034
Conversation
…um become large Co-authored-by: dylanatsmith <6905903+dylanatsmith@users.noreply.github.com>
🦋 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 | |||
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
|
Co-authored-by: dylanatsmith <6905903+dylanatsmith@users.noreply.github.com>
small) stylesCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
dylanatsmith
added
the
update snapshots
github-actions
Bot
removed
the
update snapshots
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
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
| 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>
llastflowers
left a comment
llastflowers
left a comment
There was a problem hiding this comment.
Looks good to me! Please add to this issue as a candidate for next major release: https://github.com/github/primer/issues/5430
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