feat: add support for size to Blankslate

.changeset/famous-eagles-think.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for different sizes to Blankslate

.changeset/purple-numbers-leave.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for HTML attributes being passed to Blankslate components

e2e/components/Blankslate.test.ts

@@ -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>}> = [
   {
@@ -41,6 +42,12 @@ const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof
   },
 ]
 
+const scenarios = matrix({
+  size: ['small', 'medium', 'large'],
+  spacious: [true, false],
+  border: [true, false],
+})
+
 test.describe('Blankslate', () => {
   for (const story of stories) {
     test.describe(story.title, () => {
@@ -78,4 +85,20 @@ test.describe('Blankslate', () => {
       }
     })
   }
+
+  for (const scenario of scenarios) {
+    const id = serialize(scenario)
+
+    test.describe(id, () => {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {
+          id: 'experimental-components-blankslate--playground',
+          args: scenario,
+        })
+
+        // Default state
+        expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${id}.png`)
+      })
+    })
+  }
 })

packages/react/src/Blankslate/Blankslate.docs.json

@@ -51,6 +51,12 @@
       "type": "string",
       "description": "Class name(s) for custom styling.",
       "defaultValue": ""
+    },
+    {
+      "name": "size",
+      "type": "'small' | 'medium' | 'large'",
+      "description": "The size of the componeont",
+      "defaultValue": "'medium'"
     }
   ],
   "subcomponents": [

packages/react/src/Blankslate/Blankslate.features.stories.tsx

@@ -105,3 +105,27 @@ export const Spacious = () => (
     <Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
   </Blankslate>
 )
+
+export const SizeSmall = () => (
+  <Blankslate size="small">
+    <Blankslate.Visual>
+      <BookIcon size="medium" />
+    </Blankslate.Visual>
+    <Blankslate.Heading>Blankslate heading</Blankslate.Heading>
+    <Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
+    <Blankslate.PrimaryAction href="#">Primary action</Blankslate.PrimaryAction>
+    <Blankslate.SecondaryAction href="#">Secondary action</Blankslate.SecondaryAction>
+  </Blankslate>
+)
+
+export const SizeLarge = () => (
+  <Blankslate size="large">
+    <Blankslate.Visual>
+      <BookIcon size="medium" />
+    </Blankslate.Visual>
+    <Blankslate.Heading>Blankslate heading</Blankslate.Heading>
+    <Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
+    <Blankslate.PrimaryAction href="#">Primary action</Blankslate.PrimaryAction>
+    <Blankslate.SecondaryAction href="#">Secondary action</Blankslate.SecondaryAction>
+  </Blankslate>
+)

packages/react/src/Blankslate/Blankslate.figma.tsx

@@ -2,95 +2,73 @@ import React from 'react'
 import {Blankslate} from '../Blankslate'
 import figma from '@figma/code-connect'
 
+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} size={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, size, description, heading, PrimaryAction}) => (
+    <Blankslate border={border} spacious={spacious} size={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>
-  ),
-})
+)

packages/react/src/Blankslate/Blankslate.module.css

@@ -3,70 +3,107 @@
 }
 
 .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-size='medium']) {
+    --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-size='medium'][data-spacious]) {
+    --blankslate-padding: var(--base-size-80) var(--base-size-40);
+  }
+
+  &:where([data-size='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-size='small'][data-spacious]) {
+    --blankslate-padding: var(--base-size-44) var(--base-size-28);
+  }
+
+  &:where([data-size='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-size='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);
+  /* stylelint-disable-next-line primer/typography */
+  font: var(--blankslate-heading-text);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-block: var(--blankslate-heading-margin-block);
 }
 
 .Description {
-  font-size: var(--text-body-size-large);
-  line-height: var(--text-body-lineHeight-large);
+  /* stylelint-disable-next-line primer/typography */
+  font: var(--blankslate-description-text);
   color: var(--fgColor-muted);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-block: var(--blankslate-description-margin-block);
+}
+
+.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);
 }
 
 .Action {
-  margin-top: var(--base-size-16);
+  /* stylelint-disable-next-line primer/typography */
+  font: var(--blankslate-description-text);
+  margin-block-start: var(--base-size-16);
 
-  &:first-of-type {
-    margin-top: var(--base-size-24);
-  }
-
-  &:last-of-type {
-    margin-bottom: var(--base-size-8);
+  &:where(:last-of-type) {
+    /* stylelint-disable-next-line primer/spacing */
+    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 {
@@ -79,14 +116,6 @@
     }
   }
 
-  .Heading {
-    font-size: var(--text-title-size-small);
-  }
-
-  .Description {
-    font-size: var(--text-body-size-medium);
-  }
-
   .Action {
     margin-top: var(--base-size-8);