Skip to content

Blankslate: graduate compact default sizing - #8757

Draft
francinelucca wants to merge 3 commits into
mainfrom
francinelucca-graduate-blankslate-compact-default
Draft

francinelucca wants to merge 3 commits into
mainfrom
francinelucca-graduate-blankslate-compact-default

Conversation

@francinelucca

@francinelucca francinelucca commented Nov 14, 2026 •

Copy link
Copy Markdown
Member

No linked issue. Follow-up to #8034.

Graduate primer_react_blankslate_compact_default by making its enabled presentation unconditional. Remove the flag, legacy sizing and responsive overrides, and the now-unused internal size context. Remove size="small" completely: the supported sizes are now medium (default) and large.

The default/medium presentation uses 16px padding, compact heading typography, and medium body typography. Large uses 32px padding, medium heading typography, and large body typography. Primary actions use the default medium button size in every variant. Spacious padding remains 44px/28px for medium and 80px/40px for large, including narrow containers.

Changelog

New

  • Computed-style regression coverage for default, medium, and large sizes in narrow and wide containers, including spacious padding, typography, visual sizing, and action spacing.

Changed

  • Compact-default sizing and medium-sized primary actions now apply without a feature flag.
  • Size documentation, Storybook controls, Figma mappings, and the visual-test matrix only expose medium and large.
  • Includes an @primer/react major changeset for the narrowed public size type.

Removed

  • primer_react_blankslate_compact_default, its disabled presentation, and the unused internal Blankslate context.
  • The small size, its compatibility alias, its feature story, and four obsolete visual baselines.

Rollout strategy

  • No changes needed in github/github-ui
  • Needs changes in github/github-ui
  • Ships with feature flag(s)
  • Not sure
  • None

Breaking change: replace size="small" with size="medium" or omit the size prop. Consumers already using the flag-enabled medium/large presentation retain the same sizing. Consumers without the flag receive the compact size scale. Confirm rollout readiness and run github/github-ui integration before merging; no downstream changes were made or verified in this PR.

Testing & Reviewing

  • npm run build — passed after removing small.
  • npx vitest run --project '@primer/react' packages/react/src/Blankslate/Blankslate.test.tsx packages/react/src/FeatureFlags — passed, 21 tests.
  • npm run type-check — passed after removing small.
  • npx eslint --fix packages/react/src/Blankslate/Blankslate.tsx packages/react/src/Blankslate/Blankslate.figma.tsx packages/react/src/Blankslate/Blankslate.test.tsx packages/react/src/Blankslate/Blankslate.features.stories.tsx packages/react/src/Blankslate/Blankslate.stories.tsx e2e/components/Blankslate.test.ts — passed.
  • npx stylelint -q --rd --fix packages/react/src/Blankslate/Blankslate.module.css — passed for graduation; CSS was unchanged by small-size removal.
  • npm run format:diff, npm run format, and git diff --check — passed.
  • npx playwright test e2e/components/Blankslate.test.ts --list — passed, 81 tests discovered; size scenarios only include medium and large. This enumerated tests, not screenshot comparisons.
  • Live Storybook verification — medium and large render, and the removed small story is absent. The default story was visually reviewed in Chromium during graduation. Local playground: http://localhost:6007/?path=/story/experimental-components-blankslate--playground
  • Full unit suite, full-repository lint, VRT comparisons, accessibility suite, and github/github-ui integration were not run. The update snapshots label requests canonical baseline regeneration for the newly default presentation.

Review default, medium, and large across narrow/wide containers, with and without spacious padding. Confirm all primary actions retain medium button sizing and migrate any downstream small usages to medium.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@changeset-bot

changeset-bot Bot commented Nov 14, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 400f394

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

This PR includes changesets to release 2 packages
Name Type
@primer/react Major
@primer/mcp 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

@francinelucca francinelucca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Nov 14, 2026
@github-actions github-actions Bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Nov 14, 2026
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

francinelucca and others added 2 commits November 13, 2026 19:18
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

This branch was successfully deployed

2 active deployments
storybook-preview-8757 — 400f3946 Deployed Nov 14, 2026 by github-actions[bot]
github-pages — 400f3946 Deployed Nov 14, 2026 by primer[bot] via deploy-preview #34306
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm staff Author is a staff member

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant