Blankslate: make compact styling the default#4110
Draft
dylanatsmith wants to merge 2 commits into
Draft
Conversation
Mirrors primer/react#8034. The default Blankslate now uses the compact padding, heading, and body text styles, and the redundant responsive @container block has been removed since the compact presentation it produced is now the default. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
🦋 Changeset detectedLatest commit: 65353cb The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
The pinned @primer/stylelint-config no longer flags these spacing-token values, so the disable comments are reported as needless. Co-authored-by: Copilot <223556219+Copilot@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
1 participant
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.
What are you trying to accomplish?
Mirrors primer/react#8034 for view_components. That PR shifts the
Blankslatesize scale so the compact presentation becomes the default. view_components has nosizeprop, so the portable part of that change is: make the compact styling the default and drop the now-redundant responsive block.The default
Blankslatenow renders with the tighter compact styling: reduced outer padding (32->20), smaller heading (text-title-size-medium->small), smaller body text (large->medium), tightened action margins, and reduced spacious padding (80/40->44/28).Screenshots
N/A (visual change is a restyle of the default; no committed Playwright snapshots exist for Blankslate to regenerate).
Integration
This restyles the default
Blankslateeverywhere it is used. No API changes, so no consumer code updates are required, but the default appearance is more compact.List the issues that this change affects.
N/A
Risk Assessment
What approach did you choose and why?
The previous CSS produced the compact presentation only below the
34rem@containerbreakpoint. Since the compact styling is now the intended default at all widths, I promoted those values into the base.blankslaterules and deleted the@container (max-width: 34rem)block entirely, rather than leaving a redundant override.Unlike primer/react#8034, there is no
sizeprop,BlankslateContext, orsmall/medium/largescale to rescale here, andprimary_actionalready renders a:mediumbutton, so those parts of the upstream PR do not apply.Anything you want to highlight for special attention from reviewers?
One judgement call: I marked the changeset as
minorrather thanmajor. primer/react wentmajorbecause it removed thesize="small"API; view_components has no such API, so this is a visual restyle with no breaking change. Happy to adjust if you would prefer a different bump.Accessibility
Merge checklist