Skip to content

feat: add support for size to Blankslate #5899

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 21 commits into from
May 22, 2025
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
8d8a676
feat: add support for HTML attributes to blankslate components
joshblack Mar 31, 2025
f8cb205
feat: add support for variant to Blankslate
joshblack Apr 7, 2025
71b61f2
chore: add changeset
joshblack Apr 7, 2025
f32c348
update code connect file for BlankSlate
lukasoppermann Apr 8, 2025
a642bf0
refactor(Blankslate): update variant to size
joshblack Apr 11, 2025
70caaa6
chore: update changeset
joshblack Apr 11, 2025
e842def
chore: fix eslint errors
joshblack Apr 11, 2025
f87c244
Merge branch 'main' into feat/update-blankslate
joshblack Apr 11, 2025
074679d
fix: update border color, e2e test
joshblack Apr 11, 2025
54a30c3
Merge branch 'feat/update-blankslate' of github.com:primer/react into…
joshblack Apr 11, 2025
4dc6e32
test(vrt): update snapshots
joshblack Apr 11, 2025
a99df82
Merge branch 'main' into feat/update-blankslate
francinelucca Apr 14, 2025
1dcce51
fix: update padding when size is small and not spacious
joshblack Apr 24, 2025
b15f6d5
test(vrt): update snapshots
joshblack Apr 24, 2025
4e45afa
Merge branch 'main' of github.com:primer/react into feat/update-blank…
joshblack May 7, 2025
799c636
fix: update stories, add size=small support for actions
joshblack May 7, 2025
6705fe8
docs: add specific toggles for primary/secondary actions
joshblack May 7, 2025
da8cd14
test(vrt): update snapshots
joshblack May 7, 2025
f607bfd
Merge branch 'main' into feat/update-blankslate
joshblack May 12, 2025
2ad940d
Merge branch 'main' of github.com:primer/react into feat/update-blank…
joshblack May 22, 2025
62bb259
test: update tests for new style of attributes
joshblack May 22, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/famous-eagles-think.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': minor
---

Add support for different variants for sizing to Blankslate
5 changes: 5 additions & 0 deletions .changeset/purple-numbers-leave.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': minor
---

Add support for HTML attributes being passed to Blankslate components
30 changes: 30 additions & 0 deletions e2e/components/Blankslate.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {test, expect} from '@playwright/test'
import {visit} from '../test-helpers/storybook'
import {themes} from '../test-helpers/themes'
import {viewports} from '../test-helpers/viewports'
import {matrix, serialize} from '../test-helpers/matrix'

const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof viewports>}> = [
{
Expand Down Expand Up @@ -41,6 +42,12 @@ const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof
},
]

const scenarios = matrix({
variant: ['default', 'large', 'small'],
spacious: [true, false],
border: [true, false],
})

test.describe('Blankslate', () => {
for (const story of stories) {
test.describe(story.title, () => {
Expand Down Expand Up @@ -78,4 +85,27 @@ test.describe('Blankslate', () => {
}
})
}

for (const scenario of scenarios) {
const id = serialize(scenario)

test.describe(id, () => {
for (const theme of themes) {
test.describe(theme, () => {
test('default @vrt', async ({page}) => {
await visit(page, {
id: 'experimental-components-blankslate-features--playground',
globals: {
colorScheme: theme,
},
args: scenario,
})

// Default state
expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${id}.${theme}.png`)
})
})
}
})
}
})
133 changes: 56 additions & 77 deletions packages/react/src/Blankslate/Blankslate.figma.tsx
Original file line number Diff line number Diff line change
@@ -1,96 +1,75 @@
import React from 'react'
import {Blankslate} from '../Blankslate'
import figma from '@figma/code-connect'
import type {Primary} from '../Button/IconButton.features.stories'

Check failure on line 4 in packages/react/src/Blankslate/Blankslate.figma.tsx

View workflow job for this annotation

GitHub Actions / lint

'Primary' is defined but never used

const props = {
leadingVisual: figma.nestedProps('_BlankslateVisual', {
item: figma.children('leadingVisual'),
}),
size: figma.enum('size', {
small: 'small',
medium: 'medium',
large: 'large',
}),
spacious: figma.boolean('spacious'),
border: figma.boolean('border'),
heading: figma.textContent('Text: Heading'),
description: figma.textContent('Text: Description'),
PrimaryAction: figma.children('_BlankSlate.PrimaryAction'),
SecondaryActionText: figma.boolean('SecondaryAction?', {
true: figma.textContent('Secondary action link'),
false: undefined,
}),
}

figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
props: {
leadingVisual: figma.nestedProps('_BlankslateVisual', {
item: figma.children('leadingVisual'),
}),
narrow: figma.boolean('narrow?'),
spacious: figma.boolean('spacious?'),
border: figma.boolean('border?'),
heading: figma.textContent('Text: Heading'),
description: figma.textContent('Text: Description'),
},
variant: {primaryAction: 'false', secondaryAction: 'false'},
example: ({leadingVisual, border, spacious, narrow, description, heading}) => (
<Blankslate border={border} spacious={spacious} narrow={narrow}>
props,
variant: {'SecondaryAction?': 'true'},
example: ({leadingVisual, border, spacious, size, description, heading, SecondaryActionText, PrimaryAction}) => (
<Blankslate border={border} spacious={spacious} variant={size}>
<Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
<Blankslate.Heading>{heading}</Blankslate.Heading>
<Blankslate.Description>{description}</Blankslate.Description>
<Blankslate.SecondaryAction href="">{SecondaryActionText}</Blankslate.SecondaryAction>
{PrimaryAction}
</Blankslate>
),
})
figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
props: {
leadingVisual: figma.nestedProps('_BlankslateVisual', {
item: figma.children('leadingVisual'),
}),
narrow: figma.boolean('narrow?'),
spacious: figma.boolean('spacious?'),
border: figma.boolean('border?'),
heading: figma.textContent('Text: Heading'),
description: figma.textContent('Text: Description'),
primaryAction: figma.nestedProps('Primary action', {
text: figma.textContent('Button'),
}),
},
variant: {primaryAction: 'true', secondaryAction: 'false'},
example: ({leadingVisual, border, spacious, narrow, description, heading, primaryAction}) => (
<Blankslate border={border} spacious={spacious} narrow={narrow}>
props,
variant: {'SecondaryAction?': 'false'},
example: ({leadingVisual, border, spacious, description, heading, PrimaryAction}) => (
<Blankslate border={border} spacious={spacious} variant={size}>
<Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
<Blankslate.Heading>{heading}</Blankslate.Heading>
<Blankslate.Description>{description}</Blankslate.Description>
<Blankslate.PrimaryAction href="">{primaryAction.text}</Blankslate.PrimaryAction>
{PrimaryAction}
</Blankslate>
),
})
figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
props: {
leadingVisual: figma.nestedProps('_BlankslateVisual', {
item: figma.children('leadingVisual'),
}),
narrow: figma.boolean('narrow?'),
spacious: figma.boolean('spacious?'),
border: figma.boolean('border?'),
heading: figma.textContent('Text: Heading'),
description: figma.textContent('Text: Description'),
primaryAction: figma.nestedProps('Primary action', {
text: figma.textContent('Button'),
}),
secondaryAction: figma.textContent('Secondary action link'),
},
variant: {primaryAction: 'true', secondaryAction: 'true'},
example: ({leadingVisual, border, spacious, narrow, description, heading, primaryAction, secondaryAction}) => (
<Blankslate border={border} spacious={spacious} narrow={narrow}>
<Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
<Blankslate.Heading>{heading}</Blankslate.Heading>
<Blankslate.Description>{description}</Blankslate.Description>
<Blankslate.PrimaryAction href="">{primaryAction.text}</Blankslate.PrimaryAction>
<Blankslate.SecondaryAction href="">{secondaryAction}</Blankslate.SecondaryAction>
</Blankslate>
),
})
figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
props: {
leadingVisual: figma.nestedProps('_BlankslateVisual', {
item: figma.children('leadingVisual'),
}),
narrow: figma.boolean('narrow?'),
spacious: figma.boolean('spacious?'),
border: figma.boolean('border?'),
heading: figma.textContent('Text: Heading'),
description: figma.textContent('Text: Description'),
secondaryAction: figma.textContent('Secondary action link'),

figma.connect(
Blankslate,
'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=40491-3841&t=5mMfBZbhHgyouYtk-4',
{
props: {
PrimaryAction: figma.nestedProps('Primary action', {
text: figma.textContent('Button'),
icon: figma.children('icon'),
variant: figma.enum('variant', {
primary: 'primary',
secondary: 'secondary',
danger: 'danger',
invisible: 'invisible',
}),
}),
},
example: ({PrimaryAction}) => (
<Blankslate.PrimaryAction href="">
{PrimaryAction.icon}
{PrimaryAction.text}
</Blankslate.PrimaryAction>
),
},
variant: {primaryAction: 'false', secondaryAction: 'true'},
example: ({leadingVisual, border, spacious, narrow, description, heading, secondaryAction}) => (
<Blankslate border={border} spacious={spacious} narrow={narrow}>
<Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
<Blankslate.Heading>{heading}</Blankslate.Heading>
<Blankslate.Description>{description}</Blankslate.Description>
<Blankslate.SecondaryAction href="">{secondaryAction}</Blankslate.SecondaryAction>
</Blankslate>
),
})
)
94 changes: 58 additions & 36 deletions packages/react/src/Blankslate/Blankslate.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,70 +3,100 @@
}

.Blankslate {
--blankslate-outer-padding-block: var(--base-size-32);
--blankslate-outer-padding-inline: var(--base-size-32);

display: grid;
justify-items: center;
/* stylelint-disable-next-line primer/spacing */
padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);

&:where([data-spacious='true']) {
--blankslate-outer-padding-block: var(--base-size-80);
--blankslate-outer-padding-inline: var(--base-size-40);
}
padding: var(--blankslate-padding);

&:where([data-border='true']) {
&:where([data-border]) {
border: var(--borderWidth-thin) solid var(--borderColor-default);
border-radius: var(--borderRadius-medium);
}

&:where([data-narrow='true']) {
&:where([data-narrow]) {
max-width: 485px;
margin: 0 auto;
}

&:where([data-variant='default']) {
--blankslate-heading-text: var(--text-title-shorthand-medium);
--blankslate-heading-margin-block: 0 var(--base-size-4);
--blankslate-description-text: var(--text-body-shorthand-large);
--blankslate-padding: var(--base-size-32);
--blankslate-action-margin-block-end: var(--base-size-16);
}

&:where([data-variant='default'][data-spacious]) {
--blankslate-padding: var(--base-size-80) var(--base-size-40);
}

&:where([data-variant='small']) {
--blankslate-heading-text: var(--text-title-shorthand-small);
--blankslate-heading-margin-block: 0 var(--base-size-4);
--blankslate-description-text: var(--text-body-shorthand-medium);
--blankslate-padding: var(--base-size-20);
--blankslate-action-margin-block-end: var(--base-size-12);
}

&:where([data-variant='small'][data-spacious]) {
--blankslate-padding: var(--base-size-44) var(--base-size-28);
}

&:where([data-variant='large']) {
--blankslate-heading-text: var(--text-title-shorthand-large);
--blankslate-heading-margin-block: var(--base-size-8) var(--base-size-4);
--blankslate-description-text: var(--text-body-shorthand-large);
--blankslate-description-margin-block: 0 var(--base-size-8);
--blankslate-padding: var(--base-size-32);
--blankslate-action-margin-block-end: var(--base-size-16);
}

&:where([data-variant='large'][data-spacious]) {
--blankslate-padding: var(--base-size-80) var(--base-size-40);
}
}

.Heading,
.Description {
margin: 0;
margin-bottom: var(--base-size-8);
text-align: center;
}

.Heading {
font-size: var(--text-title-size-medium);
font-weight: var(--text-title-weight-medium);
font: var(--blankslate-heading-text);
margin-block: var(--blankslate-heading-margin-block);
}

.Description {
font-size: var(--text-body-size-large);
line-height: var(--text-body-lineHeight-large);
font: var(--blankslate-description-text);
color: var(--fgColor-muted);
margin-block: var(--blankslate-description-margin-block);
}

.Action {
margin-top: var(--base-size-16);
.Visual {
/* This display property exists so that the container matches the size of the inner svg element */
display: inline-flex;
margin-block-end: var(--base-size-8);
}

&:first-of-type {
margin-top: var(--base-size-24);
}
.Action {
margin-block-start: var(--base-size-16);

&:last-of-type {
margin-bottom: var(--base-size-8);
&:where(:last-of-type) {
margin-block-end: var(--blankslate-action-margin-block-end);
}
}

/* At the time these styles were written, 34rem was our "small" breakpoint width */
@container blankslate (max-width: 34rem) {
.Blankslate {
--blankslate-outer-padding-block: var(--base-size-20);
--blankslate-outer-padding-inline: var(--base-size-20);
--blankslate-padding: var(--base-size-20);

&:where([data-spacious='true']) {
--blankslate-outer-padding-block: var(--base-size-44);
--blankslate-outer-padding-inline: var(--base-size-28);
--blankslate-padding: var(--base-size-44) var(--base-size-28);
}

--blankslate-heading-text: var(--text-title-shorthand-small);
--blankslate-description-text: var(--text-body-shorthand-medium);
}

.Visual {
Expand All @@ -79,14 +109,6 @@
}
}

.Heading {
font-size: var(--text-title-size-small);
}

.Description {
font-size: var(--text-body-size-medium);
}

.Action {
margin-top: var(--base-size-8);

Expand Down
8 changes: 8 additions & 0 deletions packages/react/src/Blankslate/Blankslate.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,12 @@ Playground.args = {
border: false,
narrow: false,
spacious: false,
variant: 'default',
}
Playground.argTypes = {
variant: {
controls: {
options: ['default', 'large', 'small'],
},
},
}
Loading
Loading