From fe8e423fdf11e29cba55300943cc52d6be4f5133 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Mon, 29 Dec 2025 10:24:07 -0600
Subject: [PATCH 1/2] feat: add padding prop to blankslate

---
 e2e/components/Blankslate.test.ts             |  1 +
 e2e/test-helpers/matrix.ts                    |  2 +-
 .../react/src/Blankslate/Blankslate.docs.json |  5 +++++
 .../src/Blankslate/Blankslate.module.css      | 12 +++++++++++
 .../src/Blankslate/Blankslate.stories.tsx     |  5 +++++
 packages/react/src/Blankslate/Blankslate.tsx  | 20 +++++++++++++++++--
 6 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/e2e/components/Blankslate.test.ts b/e2e/components/Blankslate.test.ts
index 051d645d7e9..ddadf952480 100644
--- a/e2e/components/Blankslate.test.ts
+++ b/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', () => {
diff --git a/e2e/test-helpers/matrix.ts b/e2e/test-helpers/matrix.ts
index 650fd717ec5..c079c96c0b0 100644
--- a/e2e/test-helpers/matrix.ts
+++ b/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>]>
diff --git a/packages/react/src/Blankslate/Blankslate.docs.json b/packages/react/src/Blankslate/Blankslate.docs.json
index 98babaf6230..b45f04d674f 100644
--- a/packages/react/src/Blankslate/Blankslate.docs.json
+++ b/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",
diff --git a/packages/react/src/Blankslate/Blankslate.module.css b/packages/react/src/Blankslate/Blankslate.module.css
index f0def64e867..679a56c05e0 100644
--- a/packages/react/src/Blankslate/Blankslate.module.css
+++ b/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,
diff --git a/packages/react/src/Blankslate/Blankslate.stories.tsx b/packages/react/src/Blankslate/Blankslate.stories.tsx
index 571a68a5c53..330334cd376 100644
--- a/packages/react/src/Blankslate/Blankslate.stories.tsx
+++ b/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'],
diff --git a/packages/react/src/Blankslate/Blankslate.tsx b/packages/react/src/Blankslate/Blankslate.tsx
index d0c532089ea..70374053948 100644
--- a/packages/react/src/Blankslate/Blankslate.tsx
+++ b/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}

From 6a1ef2056e35e11d7dc7d10b709d93e48cf14cde Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Mon, 29 Dec 2025 10:24:55 -0600
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/wide-carrots-brush.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/wide-carrots-brush.md

diff --git a/.changeset/wide-carrots-brush.md b/.changeset/wide-carrots-brush.md
new file mode 100644
index 00000000000..181107a166f
--- /dev/null
+++ b/.changeset/wide-carrots-brush.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add `padding` prop to `Blankslate`