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`
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 = {
[Key in InputKeys]: Input[Key] extends ReadonlyArray ? Input[Key] : never
}[InputKeys]
-export function matrix>(input: Input): Array> {
+export function matrix>(input: Input): Array> {
const {include = [], exclude = [], ...scenarios} = input
const excluded = exclude.map(scenario => {
return Object.entries(scenario) as Array<[InputKeys, Combination]>
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 & {
*/
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 & {
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}