Blankslate: shift size scale and use default button size

.changeset/blankslate-size-scale.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Blankslate: The default `medium` size now uses the previous `small` styles, the `large` size now uses the previous `medium` styles, and the `small` size has been removed.

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

@@ -54,8 +54,8 @@
     },
     {
       "name": "size",
-      "type": "'small' | 'medium' | 'large'",
-      "description": "The size of the componeont",
+      "type": "'medium' | 'large'",
+      "description": "The size of the component",
       "defaultValue": "'medium'"
     }
   ],

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

@@ -106,18 +106,6 @@ export const Spacious = () => (
   </Blankslate>
 )
 
-export const SizeSmall = () => (
-  <Blankslate border 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>

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

@@ -6,7 +6,6 @@ const props = {
     item: figma.children('leadingVisual'),
   }),
   size: figma.enum('size', {
-    small: 'small',
     medium: 'medium',
     large: 'large',
   }),

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

@@ -19,18 +19,6 @@
   }
 
   &: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);
@@ -39,15 +27,14 @@
     --blankslate-visual-size: var(--base-size-24);
   }
 
-  &:where([data-size='small'][data-spacious]) {
-    --blankslate-padding: var(--base-size-44) var(--base-size-28);
+  &:where([data-size='medium'][data-spacious]) {
+    --blankslate-padding: var(--base-size-80) var(--base-size-40);
   }
 
   &: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-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-description-margin-block: 0 var(--base-size-8);
     --blankslate-padding: var(--base-size-32);
     --blankslate-action-margin-block-end: var(--base-size-16);
   }
@@ -75,8 +62,6 @@
   /* 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 {
@@ -101,39 +86,3 @@
     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-padding: var(--base-size-20);
-
-    &:where([data-size='small']) {
-      --blankslate-padding: var(--base-size-16);
-    }
-
-    &:where([data-spacious]) {
-      --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 {
-    max-width: var(--base-size-24);
-    margin-bottom: var(--base-size-8);
-    color: var(--fgColor-muted);
-  }
-
-  .Action {
-    margin-top: var(--base-size-8);
-
-    &:first-of-type {
-      margin-top: var(--base-size-16);
-    }
-
-    &:last-of-type {
-      margin-bottom: calc(var(--base-size-8) / 2);
-    }
-  }
-}

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

@@ -59,7 +59,7 @@ Playground.args = {
 Playground.argTypes = {
   size: {
     controls: {
-      options: ['small', 'medium', 'large'],
+      options: ['medium', 'large'],
     },
   },
 }

packages/react/src/Blankslate/Blankslate.test.tsx

@@ -23,7 +23,7 @@ function getCSSStyleRules(): Array<CSSStyleRule> {
   })
 }
 
-function getSizePadding(size: 'small' | 'medium' | 'large') {
+function getSizePadding(size: 'medium' | 'large') {
   const rule = getCSSStyleRules().find(cssRule => {
     return (
       cssRule.selectorText.includes(`.${classes.Blankslate}`) &&
@@ -53,10 +53,10 @@ describe('Blankslate', () => {
     expect(container.firstChild!.firstChild).toHaveAttribute('data-spacious', '')
   })
 
-  it('sets reduced padding for small size variant', () => {
+  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/)
   })
 
   it('renders data-component attributes', () => {
@@ -146,6 +146,16 @@ describe('Blankslate', () => {
       expect(screen.getByRole('button', {name: 'Primary action'})).toBeInTheDocument()
     })
 
+    it.each(['medium', 'large'] as const)('should render a default-size button for the %s blankslate size', size => {
+      render(
+        <Blankslate size={size}>
+          <Blankslate.PrimaryAction>Primary action</Blankslate.PrimaryAction>
+        </Blankslate>,
+      )
+
+      expect(screen.getByRole('button', {name: 'Primary action'})).toHaveAttribute('data-size', 'medium')
+    })
+
     it('should handle click events on the button', async () => {
       const user = userEvent.setup()
       const onClick = vi.fn()

packages/react/src/Blankslate/Blankslate.tsx

@@ -1,9 +1,7 @@
 import {clsx} from 'clsx'
-import {useMemo} from 'react'
 import type React from 'react'
 import {Button} from '../Button'
 import Link from '../Link'
-import {Provider, useBlankslate} from './BlankslateContext'
 import classes from './Blankslate.module.css'
 
 type BlankslateProps = React.HTMLAttributes<HTMLElement> & {
@@ -30,31 +28,23 @@ type BlankslateProps = React.HTMLAttributes<HTMLElement> & {
   /**
    * Specify the size of this component
    */
-  size?: 'small' | 'medium' | 'large'
+  size?: 'medium' | 'large'
 }
 
 function Blankslate({border, children, narrow, spacious, className, size = 'medium', ...rest}: BlankslateProps) {
-  const value = useMemo(() => {
-    return {
-      size,
-    }
-  }, [size])
-
   return (
-    <Provider value={value}>
-      <div {...rest} className={classes.Container}>
-        <div
-          className={clsx(classes.Blankslate, className)}
-          data-component="Blankslate"
-          data-border={border ? '' : undefined}
-          data-narrow={narrow ? '' : undefined}
-          data-spacious={spacious ? '' : undefined}
-          data-size={size}
-        >
-          {children}
-        </div>
+    <div {...rest} className={classes.Container}>
+      <div
+        className={clsx(classes.Blankslate, className)}
+        data-component="Blankslate"
+        data-border={border ? '' : undefined}
+        data-narrow={narrow ? '' : undefined}
+        data-spacious={spacious ? '' : undefined}
+        data-size={size}
+      >
+        {children}
       </div>
-    </Provider>
+    </div>
   )
 }
 
@@ -108,16 +98,9 @@ type BlankslatePrimaryActionProps =
     }>
 
 function PrimaryAction({children, href, ...props}: BlankslatePrimaryActionProps) {
-  const {size} = useBlankslate()
   return (
     <div className={clsx('Blankslate-Action', classes.Action)} data-component="Blankslate.PrimaryAction">
-      <Button
-        {...props}
-        as={href ? 'a' : 'button'}
-        href={href}
-        variant="primary"
-        size={size === 'small' ? 'small' : undefined}
-      >
+      <Button {...props} as={href ? 'a' : 'button'} href={href} variant="primary">
         {children}
       </Button>
     </div>