feat: add padding prop to blankslate

.changeset/wide-carrots-brush.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add `padding` prop to `Blankslate`

e2e/components/Blankslate.test.ts

@@ -46,6 +46,7 @@ const scenarios = matrix({
   size: ['small', 'medium', 'large'],
   spacious: [true, false],
   border: [true, false],
+  padding: ['condensed', 'normal', 'spacious'],
 })
 
 test.describe('Blankslate', () => {

e2e/test-helpers/matrix.ts

@@ -16,7 +16,7 @@ type Values<Input> = {
   [Key in InputKeys<Input>]: Input[Key] extends ReadonlyArray<unknown> ? Input[Key] : never
 }[InputKeys<Input>]
 
-export function matrix<Input extends Config<Input>>(input: Input): Array<Combination<Input>> {
+export function matrix<const Input extends Config<Input>>(input: Input): Array<Combination<Input>> {
   const {include = [], exclude = [], ...scenarios} = input
   const excluded = exclude.map(scenario => {
     return Object.entries(scenario) as Array<[InputKeys<Input>, Combination<Input>]>

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

@@ -41,6 +41,11 @@
       "type": "boolean",
       "description": ""
     },
+    {
+      "name": "padding",
+      "type": "'condensed' | 'normal' | 'spacious'",
+      "description": "The size of the component padding"
+    }
     {
       "name": "spacious",
       "type": "boolean",

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

@@ -55,6 +55,18 @@
   &:where([data-size='large'][data-spacious]) {
     --blankslate-padding: var(--base-size-80) var(--base-size-40);
   }
+
+  &:where([data-padding='condensed']) {
+    --blankslate-padding: var(--base-size-16);
+  }
+
+  &:where([data-padding='normal']) {
+    --blankslate-padding: var(--base-size-20);
+  }
+
+  &:where([data-padding='spacious']) {
+    --blankslate-padding: var(--base-size-24);
+  }
 }
 
 .Heading,

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

@@ -57,6 +57,11 @@ Playground.args = {
 }
 
 Playground.argTypes = {
+  padding: {
+    controls: {
+      options: ['condensed', 'normal', 'spacious'],
+    },
+  },
   size: {
     controls: {
       options: ['small', 'medium', 'large'],

packages/react/src/Blankslate/Blankslate.tsx

@@ -22,8 +22,14 @@ type BlankslateProps = React.HTMLAttributes<HTMLElement> & {
    */
   narrow?: boolean
 
+  /**
+   * Specify the padding of this component
+   */
+  padding?: 'condensed' | 'normal' | 'spacious'
+
   /**
    * Increase the padding of this component
+   * @deprecated use the `padding` prop instead
    */
   spacious?: boolean
 
@@ -33,7 +39,16 @@ type BlankslateProps = React.HTMLAttributes<HTMLElement> & {
   size?: 'small' | 'medium' | 'large'
 }
 
-function Blankslate({border, children, narrow, spacious, className, size = 'medium', ...rest}: BlankslateProps) {
+function Blankslate({
+  border,
+  children,
+  className,
+  narrow,
+  padding,
+  spacious,
+  size = 'medium',
+  ...rest
+}: BlankslateProps) {
   const value = useMemo(() => {
     return {
       size,
@@ -47,7 +62,8 @@ function Blankslate({border, children, narrow, spacious, className, size = 'medi
           className={clsx(classes.Blankslate, className)}
           data-border={border ? '' : undefined}
           data-narrow={narrow ? '' : undefined}
-          data-spacious={spacious ? '' : undefined}
+          data-padding={padding ?? undefined}
+          data-spacious={!padding && spacious ? '' : undefined}
           data-size={size}
         >
           {children}