diff --git a/.changeset/blankslate-compact-default.md b/.changeset/blankslate-compact-default.md new file mode 100644 index 00000000000..dde727d6bc1 --- /dev/null +++ b/.changeset/blankslate-compact-default.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Blankslate: Make compact sizing and default-sized primary actions standard. Remove the `small` size; use `medium` instead. diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-colorblind-linux.png index 56ecbc1fba6..c37590d12ed 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-dimmed-linux.png index 0dc48de5c7c..191f293f8ee 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-high-contrast-linux.png index 0c22c375326..fcae081ca54 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-linux.png index df43c545810..873761e2130 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-tritanopia-linux.png index 56ecbc1fba6..c37590d12ed 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-colorblind-linux.png index 189c133c8fd..f02e8a7a0cb 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-high-contrast-linux.png index eb92a219a1a..5f7cd35012b 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-linux.png index 38ddd283cfa..3c7da1f4974 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-tritanopia-linux.png index 189c133c8fd..f02e8a7a0cb 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-sm-linux.png index 2bdf4ee172d..cdf25c6d2a0 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-sm-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-xs-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-xs-linux.png index 28e019801f3..b1efbcecfa5 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-xs-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-xs-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-colorblind-linux.png index 8ca3408c410..6273c2ea92e 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-dimmed-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-dimmed-linux.png index fbd89e0bbcf..c9ce7b5f004 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-dimmed-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-high-contrast-linux.png index 636a642dcca..3f53d767847 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-linux.png index 8ca3408c410..6273c2ea92e 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-tritanopia-linux.png index 8ca3408c410..6273c2ea92e 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-colorblind-linux.png index 29aefc95712..5c3295e3a23 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-high-contrast-linux.png index cfce9f9bae6..b3ecb119e24 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-linux.png index 29aefc95712..5c3295e3a23 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-tritanopia-linux.png index 29aefc95712..5c3295e3a23 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-sm-linux.png index b9819243a9a..fcf241804bd 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-sm-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-xs-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-xs-linux.png index 2d13c321a74..d416a71a4a5 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-xs-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-xs-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-colorblind-linux.png index ba7422967bc..02dcb02c99a 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-dimmed-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-dimmed-linux.png index 9f904567282..ac916553dd1 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-dimmed-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-high-contrast-linux.png index f2b37945e9d..3cda944bcb8 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-linux.png index ba7422967bc..02dcb02c99a 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-tritanopia-linux.png index ba7422967bc..02dcb02c99a 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-colorblind-linux.png index d06680b794a..d9b35005f11 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-high-contrast-linux.png index 38744605f2a..0fe25bdc6e6 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-linux.png index d06680b794a..d9b35005f11 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-tritanopia-linux.png index d06680b794a..d9b35005f11 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-primer-breakpoint-sm-linux.png index 80b25f62f07..2422ddc9c53 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-primer-breakpoint-sm-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-colorblind-linux.png index 02f7c3d8f4c..bbbd50be102 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-dimmed-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-dimmed-linux.png index 19820ce34b9..719c244eb7e 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-dimmed-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-high-contrast-linux.png index 89a3493a873..bc7d421f7b5 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-linux.png index 02f7c3d8f4c..bbbd50be102 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-tritanopia-linux.png index 02f7c3d8f4c..bbbd50be102 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-colorblind-linux.png index ff84b2edac6..310d46d2df9 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-high-contrast-linux.png index 2cdd6524729..c020a53f238 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-linux.png index ff84b2edac6..310d46d2df9 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-tritanopia-linux.png index ff84b2edac6..310d46d2df9 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-primer-breakpoint-sm-linux.png index 98edcac6d60..74bbeb05545 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-primer-breakpoint-sm-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-colorblind-linux.png index 565fa1f9061..a90bd48be27 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-dimmed-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-dimmed-linux.png index 0c112f2c1f8..b85b54f2b3d 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-dimmed-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-high-contrast-linux.png index 875e171d405..68de2877c16 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-linux.png index 0052733d02d..ea3076899e6 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-tritanopia-linux.png index 565fa1f9061..a90bd48be27 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-colorblind-linux.png index 53476fc91ed..8352f956c77 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-high-contrast-linux.png index 8849ab33e79..0ffbf17fcba 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-linux.png index 4d18bc01e15..0efb51cb0ef 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-tritanopia-linux.png index 53476fc91ed..8352f956c77 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-primer-breakpoint-sm-linux.png index 7faca5ac1ce..fc666707375 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-primer-breakpoint-sm-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-colorblind-linux.png index b2cc3cfef6e..a420495eaac 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-dimmed-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-dimmed-linux.png index c803131a140..2167ecf0fe9 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-dimmed-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-high-contrast-linux.png index 63e163fadb1..d1cee9aafb1 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-linux.png index b2cc3cfef6e..a420495eaac 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-tritanopia-linux.png index b2cc3cfef6e..a420495eaac 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-colorblind-linux.png index 73ef4715340..c5858246e2f 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-high-contrast-linux.png index 6b939637378..0ef42fa424f 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-linux.png index 73ef4715340..c5858246e2f 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-tritanopia-linux.png index 73ef4715340..c5858246e2f 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-primer-breakpoint-sm-linux.png index d300dfbdf16..8ff4e7b4589 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-primer-breakpoint-sm-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-colorblind-linux.png index 5a86bc9ebcf..1a87a9b099b 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-dimmed-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-dimmed-linux.png index 0bf0b46ae67..aec2528c86d 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-dimmed-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-high-contrast-linux.png index 0eed7e57981..b10e4ad977e 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-linux.png index 5a86bc9ebcf..1a87a9b099b 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-tritanopia-linux.png index 5a86bc9ebcf..1a87a9b099b 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-colorblind-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-colorblind-linux.png index 8af7e6d36fd..676acff3a70 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-colorblind-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-high-contrast-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-high-contrast-linux.png index 0f04d6b2d57..5255dd499f3 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-high-contrast-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-linux.png index 8af7e6d36fd..676acff3a70 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-tritanopia-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-tritanopia-linux.png index 8af7e6d36fd..676acff3a70 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-tritanopia-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-primer-breakpoint-sm-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-primer-breakpoint-sm-linux.png index 39360e490aa..7cdd265e0ec 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-primer-breakpoint-sm-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-primer-breakpoint-sm-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-large-spacious-false-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-large-spacious-false-linux.png index 9e1ea75d9fc..38ddd283cfa 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-large-spacious-false-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-large-spacious-false-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-large-spacious-true-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-large-spacious-true-linux.png index ac3b4398e5b..5d8e6b5638f 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-large-spacious-true-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-large-spacious-true-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-medium-spacious-false-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-medium-spacious-false-linux.png index 38ddd283cfa..3c7da1f4974 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-medium-spacious-false-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-medium-spacious-false-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-medium-spacious-true-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-medium-spacious-true-linux.png index 7e6017dd920..058b78fc114 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-medium-spacious-true-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-medium-spacious-true-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-small-spacious-false-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-small-spacious-false-linux.png index 400d6112df6..3c7da1f4974 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-small-spacious-false-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-small-spacious-false-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-small-spacious-true-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-small-spacious-true-linux.png index 6f5c494f1d6..058b78fc114 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-small-spacious-true-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-false-size-small-spacious-true-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-large-spacious-false-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-large-spacious-false-linux.png index 0dcafc9621d..d7b585390d2 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-large-spacious-false-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-large-spacious-false-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-large-spacious-true-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-large-spacious-true-linux.png index 1fe22789e47..4e1e3d4d638 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-large-spacious-true-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-large-spacious-true-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-medium-spacious-false-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-medium-spacious-false-linux.png index d7b585390d2..16be3a2ac52 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-medium-spacious-false-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-medium-spacious-false-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-medium-spacious-true-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-medium-spacious-true-linux.png index 3a3aa249444..395b04954c4 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-medium-spacious-true-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-medium-spacious-true-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-small-spacious-false-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-small-spacious-false-linux.png index a605f3de485..16be3a2ac52 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-small-spacious-false-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-small-spacious-false-linux.png differ diff --git a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-small-spacious-true-linux.png b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-small-spacious-true-linux.png index e3a2018dcac..395b04954c4 100644 Binary files a/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-small-spacious-true-linux.png and b/.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-border-true-size-small-spacious-true-linux.png differ diff --git a/e2e/components/Blankslate.test.ts b/e2e/components/Blankslate.test.ts index 051d645d7e9..d53dff86a50 100644 --- a/e2e/components/Blankslate.test.ts +++ b/e2e/components/Blankslate.test.ts @@ -43,7 +43,7 @@ const stories: Array<{title: string; id: string; viewports?: Array ( ) -export const SizeSmall = () => ( - - - - - Blankslate heading - Use it to provide information when no dynamic content exists. - Primary action - Secondary action - -) - export const SizeLarge = () => ( diff --git a/packages/react/src/Blankslate/Blankslate.figma.tsx b/packages/react/src/Blankslate/Blankslate.figma.tsx index 241095ab5b2..c619d463b72 100644 --- a/packages/react/src/Blankslate/Blankslate.figma.tsx +++ b/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', }), diff --git a/packages/react/src/Blankslate/Blankslate.module.css b/packages/react/src/Blankslate/Blankslate.module.css index 106e492f366..c50df594deb 100644 --- a/packages/react/src/Blankslate/Blankslate.module.css +++ b/packages/react/src/Blankslate/Blankslate.module.css @@ -19,35 +19,24 @@ } &: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-description-margin-block: 0; --blankslate-padding: var(--base-size-16); --blankslate-action-margin-block-end: var(--base-size-12); --blankslate-visual-size: var(--base-size-24); } - &:where([data-size='small'][data-spacious]) { + &:where([data-size='medium'][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-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-description-margin-block: 0; --blankslate-padding: var(--base-size-32); --blankslate-action-margin-block-end: var(--base-size-16); } @@ -102,87 +91,6 @@ } } -/* 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); - } - } -} - -.Blankslate:where([data-compact-default][data-size='medium']) { - --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-description-margin-block: 0; - --blankslate-padding: var(--base-size-16); - --blankslate-action-margin-block-end: var(--base-size-12); - --blankslate-visual-size: var(--base-size-24); - - &:where([data-spacious]) { - --blankslate-padding: var(--base-size-44) var(--base-size-28); - } -} - -.Blankslate:where([data-compact-default][data-size='large']) { - --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; - --blankslate-padding: var(--base-size-32); - --blankslate-action-margin-block-end: var(--base-size-16); - - &:where([data-spacious]) { - --blankslate-padding: var(--base-size-80) var(--base-size-40); - } -} - -.Blankslate:where([data-compact-default]) { - & .Action { - margin-block-start: var(--base-size-16); - } - - &[data-size='medium'] .Action:last-of-type { - margin-block-end: var(--base-size-12); - } - - &[data-size='large'] .Action:last-of-type { - margin-block-end: var(--base-size-16); - } - - & .Visual { - margin-block-end: var(--base-size-8); - } -} - -.Blankslate:where([data-compact-default][data-size='large']) .Visual { +.Blankslate:where([data-size='large']) .Visual { max-width: none; } diff --git a/packages/react/src/Blankslate/Blankslate.stories.tsx b/packages/react/src/Blankslate/Blankslate.stories.tsx index 571a68a5c53..a9a14805644 100644 --- a/packages/react/src/Blankslate/Blankslate.stories.tsx +++ b/packages/react/src/Blankslate/Blankslate.stories.tsx @@ -59,7 +59,7 @@ Playground.args = { Playground.argTypes = { size: { controls: { - options: ['small', 'medium', 'large'], + options: ['medium', 'large'], }, }, } diff --git a/packages/react/src/Blankslate/Blankslate.test.tsx b/packages/react/src/Blankslate/Blankslate.test.tsx index 29ee6031966..e1b11e94505 100644 --- a/packages/react/src/Blankslate/Blankslate.test.tsx +++ b/packages/react/src/Blankslate/Blankslate.test.tsx @@ -2,41 +2,9 @@ import {describe, expect, it, vi} from 'vitest' import {render} from '@testing-library/react' import {page, userEvent} from 'vitest/browser' import {Blankslate} from '../Blankslate' -import {FeatureFlags} from '../FeatureFlags' import {implementsClassName} from '../utils/testing' import classes from './Blankslate.module.css' -function getCSSStyleRules(): Array { - return Array.from(document.styleSheets).flatMap(sheet => { - return Array.from(sheet.cssRules).flatMap(rule => { - if (rule instanceof CSSStyleRule) { - return [rule] - } - - if ('cssRules' in rule) { - return Array.from(rule.cssRules as CSSRuleList).filter((nestedRule): nestedRule is CSSStyleRule => { - return nestedRule instanceof CSSStyleRule - }) - } - - return [] - }) - }) -} - -function getSizePadding(size: 'small' | 'medium' | 'large', compactDefault = false) { - const rule = getCSSStyleRules().find(cssRule => { - return ( - cssRule.selectorText.includes(`.${classes.Blankslate}`) && - cssRule.selectorText.includes(`data-size="${size}"`) && - cssRule.selectorText.includes('data-compact-default') === compactDefault && - !cssRule.selectorText.includes('data-spacious') - ) - }) - - return rule?.style.getPropertyValue('--blankslate-padding').trim() -} - describe('Blankslate', () => { implementsClassName(Blankslate, classes.Blankslate) @@ -61,43 +29,56 @@ describe('Blankslate', () => { .toHaveAttribute('data-spacious', '') }) - it('sets reduced padding for small size variant', () => { - render(Test content) - - expect(getSizePadding('small')).toMatch(/^var\(--base-size-16/) - }) - - it('keeps the existing size scale when the compact default feature is disabled', async () => { - render(Test content) - const blankslate = page.getByText('Test content', {exact: true}) - - await expect.element(blankslate).toHaveAttribute('data-size', 'small') - await expect.element(blankslate).not.toHaveAttribute('data-compact-default') - }) - - it('uses the compact default size scale when the feature is enabled', async () => { - render( - - Test content - , - ) - const blankslate = page.getByText('Test content', {exact: true}) - - await expect.element(blankslate).toHaveAttribute('data-size', 'medium') - await expect.element(blankslate).toHaveAttribute('data-compact-default', '') - expect(getSizePadding('medium', true)).toMatch(/^var\(--base-size-16/) - expect(getSizePadding('large', true)).toMatch(/^var\(--base-size-32/) - }) - - it('maps the legacy small size to the compact default size when the feature is enabled', async () => { - render( - - Test content - , - ) - const blankslate = page.getByText('Test content', {exact: true}) + describe.each([480, 800])('in a %ipx container', width => { + it.each([undefined, 'medium', 'large'] as const)('uses the graduated size scale for size=%s', async size => { + const {container, rerender} = render( +
+ + + + + Test heading + Test description + Primary action + Secondary action + +
, + ) + const heading = page.getByRole('heading', {name: 'Test heading', exact: true}) + const blankslate = heading.element().parentElement + const primaryAction = page.getByRole('button', {name: 'Primary action', exact: true}) + const secondaryAction = page.getByRole('link', {name: 'Secondary action', exact: true}) + const large = size === 'large' + + await expect.element(blankslate).toHaveAttribute('data-size', large ? 'large' : 'medium') + await expect.element(blankslate).toHaveStyle({padding: large ? '32px' : '16px'}) + await expect.element(heading).toHaveStyle({fontSize: large ? '20px' : '16px', marginTop: '0px'}) + await expect.element(page.getByText('Test description', {exact: true})).toHaveStyle({ + fontSize: large ? '16px' : '14px', + marginBottom: '0px', + }) + await expect.element(container.querySelector('[data-component="Blankslate.Visual"]')).toHaveStyle({ + maxWidth: large ? 'none' : '24px', + }) + await expect.element(primaryAction).toHaveAttribute('data-size', 'medium') + await expect.element(primaryAction.element().parentElement).toHaveStyle({marginTop: '16px'}) + await expect.element(secondaryAction.element().parentElement).toHaveStyle({ + marginTop: '16px', + marginBottom: large ? '16px' : '12px', + }) + + rerender( +
+ + Test heading + +
, + ) - await expect.element(blankslate).toHaveAttribute('data-size', 'medium') + await expect.element(heading.element().parentElement).toHaveStyle({ + padding: large ? '80px 40px' : '44px 28px', + }) + }) }) it('renders data-component attributes', async () => { @@ -201,32 +182,6 @@ describe('Blankslate', () => { await expect.element(page.getByRole('button', {name: 'Primary action'})).toBeInTheDocument() }) - it('uses the default button size when the compact default feature is enabled', async () => { - render( - - - Primary action - - , - ) - - await expect - .element(page.getByRole('button', {name: 'Primary action', exact: true})) - .toHaveAttribute('data-size', 'medium') - }) - - it('keeps the small button size when the compact default feature is disabled', async () => { - render( - - Primary action - , - ) - - await expect - .element(page.getByRole('button', {name: 'Primary action', exact: true})) - .toHaveAttribute('data-size', 'small') - }) - it('should handle click events on the button', async () => { const onClick = vi.fn() render( diff --git a/packages/react/src/Blankslate/Blankslate.tsx b/packages/react/src/Blankslate/Blankslate.tsx index 21908142cb9..00e5a7e88cb 100644 --- a/packages/react/src/Blankslate/Blankslate.tsx +++ b/packages/react/src/Blankslate/Blankslate.tsx @@ -1,10 +1,7 @@ import {clsx} from 'clsx' -import {useMemo} from 'react' import type React from 'react' import {Button} from '../Button' -import {useFeatureFlag} from '../FeatureFlags' import Link from '../Link' -import {Provider, useBlankslate} from './BlankslateContext' import classes from './Blankslate.module.css' type BlankslateProps = React.HTMLAttributes & { @@ -31,34 +28,23 @@ type BlankslateProps = React.HTMLAttributes & { /** * 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 compactDefault = useFeatureFlag('primer_react_blankslate_compact_default') - const value = useMemo(() => { - return { - size, - compactDefault, - } - }, [size, compactDefault]) - return ( - -
-
- {children} -
+
+
+ {children}
- +
) } @@ -112,16 +98,9 @@ type BlankslatePrimaryActionProps = }> function PrimaryAction({children, href, ...props}: BlankslatePrimaryActionProps) { - const {size, compactDefault} = useBlankslate() return (
-
diff --git a/packages/react/src/Blankslate/BlankslateContext.ts b/packages/react/src/Blankslate/BlankslateContext.ts deleted file mode 100644 index 0c8afaa5890..00000000000 --- a/packages/react/src/Blankslate/BlankslateContext.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {createContext, useContext} from 'react' - -type BlankslateContextType = { - size: 'small' | 'medium' | 'large' - compactDefault: boolean -} - -const BlankslateContext = createContext(null) - -function useBlankslate(): BlankslateContextType { - const context = useContext(BlankslateContext) - if (!context) { - throw new Error('useBlankslate must be used within a BlankslateProvider') - } - return context -} - -const Provider = BlankslateContext.Provider - -export {Provider, useBlankslate} diff --git a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts index 726bcd42906..0862870621f 100644 --- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts +++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts @@ -11,5 +11,4 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({ primer_react_timeline_list_semantics: false, primer_react_merged_forwarded_refs: false, primer_react_button_loading_disabled_styles: false, - primer_react_blankslate_compact_default: false, })