From 7d086c73a980de333c55717717dd9e744196dd8e Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 25 Jul 2024 10:29:01 -0500 Subject: [PATCH] fix(Blankslate): update styles to prevent SSR hydration mismatch (#4710) * fix(Blankslate): update styles to prevent SSR mismatch * chore: add changeset --------- Co-authored-by: Josh Black --- .changeset/wild-maps-bathe.md | 5 + package-lock.json | 120 +++++++++++++++++++ packages/react/src/Blankslate/Blankslate.tsx | 34 +++--- 3 files changed, 143 insertions(+), 16 deletions(-) create mode 100644 .changeset/wild-maps-bathe.md diff --git a/.changeset/wild-maps-bathe.md b/.changeset/wild-maps-bathe.md new file mode 100644 index 00000000000..f27e21d45fa --- /dev/null +++ b/.changeset/wild-maps-bathe.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Update Blankslate styles to better support server-side rendering diff --git a/package-lock.json b/package-lock.json index 7dc8d28bff1..b33209bcc32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6330,6 +6330,126 @@ "node": ">= 10" } }, + "node_modules/@next/swc-darwin-x64": { + "version": "14.1.3", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.3.tgz", + "integrity": "sha512-E/9WQeXxkqw2dfcn5UcjApFgUq73jqNKaE5bysDm58hEUdUGedVrnRhblhJM7HbCZNhtVl0j+6TXsK0PuzXTCg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.1.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.3.tgz", + "integrity": "sha512-USArX9B+3rZSXYLFvgy0NVWQgqh6LHWDmMt38O4lmiJNQcwazeI6xRvSsliDLKt+78KChVacNiwvOMbl6g6BBw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.1.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.3.tgz", + "integrity": "sha512-esk1RkRBLSIEp1qaQXv1+s6ZdYzuVCnDAZySpa62iFTMGTisCyNQmqyCTL9P+cLJ4N9FKCI3ojtSfsyPHJDQNw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.1.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.3.tgz", + "integrity": "sha512-8uOgRlYEYiKo0L8YGeS+3TudHVDWDjPVDUcST+z+dUzgBbTEwSSIaSgF/vkcC1T/iwl4QX9iuUyUdQEl0Kxalg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.1.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.3.tgz", + "integrity": "sha512-DX2zqz05ziElLoxskgHasaJBREC5Y9TJcbR2LYqu4r7naff25B4iXkfXWfcp69uD75/0URmmoSgT8JclJtrBoQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.1.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.3.tgz", + "integrity": "sha512-HjssFsCdsD4GHstXSQxsi2l70F/5FsRTRQp8xNgmQs15SxUfUJRvSI9qKny/jLkY3gLgiCR3+6A7wzzK0DBlfA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.1.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.3.tgz", + "integrity": "sha512-DRuxD5axfDM1/Ue4VahwSxl1O5rn61hX8/sF0HY8y0iCbpqdxw3rB3QasdHn/LJ6Wb2y5DoWzXcz3L1Cr+Thrw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.1.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.3.tgz", + "integrity": "sha512-uC2DaDoWH7h1P/aJ4Fok3Xiw6P0Lo4ez7NbowW2VGNXw/Xv6tOuLUcxhBYZxsSUJtpeknCi8/fvnSpyCFp4Rcg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@nicolo-ribaudo/chokidar-2": { "version": "2.1.8-no-fsevents.3", "dev": true, diff --git a/packages/react/src/Blankslate/Blankslate.tsx b/packages/react/src/Blankslate/Blankslate.tsx index abfad264cdf..29126a5e36e 100644 --- a/packages/react/src/Blankslate/Blankslate.tsx +++ b/packages/react/src/Blankslate/Blankslate.tsx @@ -26,16 +26,17 @@ const StyledBlankslate = styled.div` container-type: inline-size; .Blankslate { - --blankslate-outer-padding-block: var(--base-size-32); - --blankslate-outer-padding-inline: var(--base-size-32); + --blankslate-outer-padding-block: var(--base-size-32, 2rem); + --blankslate-outer-padding-inline: var(--base-size-32, 2rem); + display: grid; justify-items: center; padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline); } .Blankslate[data-spacious='true'] { - --blankslate-outer-padding-block: var(--base-size-80); - --blankslate-outer-padding-inline: var(--base-size-40); + --blankslate-outer-padding-block: var(--base-size-80, 5rem); + --blankslate-outer-padding-inline: var(--base-size-40, 2.5rem); } .Blankslate[data-border='true'] { @@ -51,29 +52,30 @@ const StyledBlankslate = styled.div` .Blankslate-Heading, .Blankslate-Description { margin: 0; - margin-bottom: var(--stack-gap-condensed); + margin-bottom: var(--stack-gap-condensed, 0.5rem); } .Blankslate-Heading { - font-size: var(--text-title-size-medium); - font-weight: var(--text-title-weight-medium); + font-size: var(--text-title-size-medium, 1.25rem); + font-weight: var(--text-title-weight-medium, 600); } .Blankslate-Description { color: var(--fgColor-muted, ${get('colors.fg.muted')}); - font-size: var(--text-body-size-large); + font-size: var(--text-body-size-large, 1rem); + line-height: var(--text-body-lineHeight-large, 1.5); } .Blankslate-Action { - margin-top: var(--stack-gap-normal); + margin-top: var(--stack-gap-normal, 1rem); } .Blankslate-Action:first-of-type { - margin-top: var(--stack-gap-spacious); + margin-top: var(--stack-gap-spacious, 1.5rem); } .Blankslate-Action:last-of-type { - margin-bottom: var(--stack-gap-condensed); + margin-bottom: var(--stack-gap-condensed, 0.5rem); } ` @@ -92,7 +94,7 @@ const BlankslateContainerQuery = ` } ${StyledBlankslate} .Blankslate-Visual { - margin-bottom: var(--stack-gap-condensed); + margin-bottom: var(--stack-gap-condensed, 0.5rem); max-width: var(--base-size-24); } @@ -109,15 +111,15 @@ const BlankslateContainerQuery = ` } ${StyledBlankslate} .Blankslate-Action { - margin-top: var(--stack-gap-condensed); + margin-top: var(--stack-gap-condensed, 0.5rem); } ${StyledBlankslate} .Blankslate-Action:first-of-type { - margin-top: var(--stack-gap-normal); + margin-top: var(--stack-gap-normal, 1rem); } ${StyledBlankslate} .Blankslate-Action:last-of-type { - margin-bottom: calc(var(--stack-gap-condensed) / 2); + margin-bottom: calc(var(--stack-gap-condensed, 0.5rem) / 2); } ` @@ -128,7 +130,7 @@ function Blankslate({border, children, narrow, spacious}: BlankslateProps) { This is a workaround so we can use `@container` without upgrading `styled-components` to 6.x See [this comment](https://github.com/primer/react/pull/3869#discussion_r1392523030) for more info */} - +