From e2d7722ec6430fe5fb5aea6ed122ca9508499d26 Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 16 Sep 2024 16:37:10 +0100 Subject: [PATCH] Update Card radius (#65053) Co-authored-by: jameskoster Co-authored-by: ciampo Co-authored-by: tyxla Co-authored-by: jasmussen --- packages/components/CHANGELOG.md | 1 + .../components/src/card/card/component.tsx | 2 +- packages/components/src/card/styles.ts | 2 +- .../card/test/__snapshots__/index.tsx.snap | 108 +++++++++--------- .../components/src/utils/config-values.js | 1 - .../components/global-styles/screen-root.js | 10 +- .../src/components/global-styles/style.scss | 8 ++ 7 files changed, 72 insertions(+), 60 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 04858e448da7f0..1473cf5f5df40e 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -19,6 +19,7 @@ - `Navigator`: warn if a screen's `path` doesn't follow a URL-like scheme ([#65231](https://github.com/WordPress/gutenberg/pull/65231)). - `Modal`: Decrease close button size and remove horizontal offset ([#65131](https://github.com/WordPress/gutenberg/pull/65131)). +- `Card`: Adopt radius scale ([#65053](https://github.com/WordPress/gutenberg/pull/65053)). ### Bug Fixes diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx index 8fefc33bd48027..e459f9abb9275b 100644 --- a/packages/components/src/card/card/component.tsx +++ b/packages/components/src/card/card/component.tsx @@ -34,7 +34,7 @@ function UnconnectedCard( size, ...otherProps } = useCard( props ); - const elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0; + const elevationBorderRadius = isRounded ? CONFIG.radiusLarge : 0; const cx = useCx(); diff --git a/packages/components/src/card/styles.ts b/packages/components/src/card/styles.ts index fa70b19054e2fc..df0fe4eb7ed720 100644 --- a/packages/components/src/card/styles.ts +++ b/packages/components/src/card/styles.ts @@ -12,7 +12,7 @@ import { COLORS, CONFIG } from '../utils'; // (as opposed to the `border` property), the value of the border radius needs // to be adjusted by removing 1px (this is because the `box-shadow` renders // as an "outer radius"). -const adjustedBorderRadius = `calc(${ CONFIG.cardBorderRadius } - 1px)`; +const adjustedBorderRadius = `calc(${ CONFIG.radiusLarge } - 1px)`; export const Card = css` box-shadow: 0 0 0 1px ${ CONFIG.surfaceBorderColor }; diff --git a/packages/components/src/card/test/__snapshots__/index.tsx.snap b/packages/components/src/card/test/__snapshots__/index.tsx.snap index cc1a754e1d37c9..e9073edba3e3e4 100644 --- a/packages/components/src/card/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/card/test/__snapshots__/index.tsx.snap @@ -8,8 +8,8 @@ Snapshot Diff: @@ -1,8 +1,8 @@
@@ -25,8 +25,8 @@ Snapshot Diff: @@ -1,8 +1,8 @@
@@ -42,8 +42,8 @@ Snapshot Diff: @@ -1,8 +1,8 @@
@@ -59,8 +59,8 @@ Snapshot Diff: @@ -1,8 +1,8 @@
@@ -76,8 +76,8 @@ Snapshot Diff: @@ -1,8 +1,8 @@
@@ -96,16 +96,16 @@ Snapshot Diff: class="css-76dw7d-PolymorphicDiv-Content e19lxcc00" >
Header
@@ -122,7 +122,7 @@ Snapshot Diff: Array [ Object { "background-color": "#fff", -- "border-radius": "calc(2px - 1px)", +- "border-radius": "calc(8px - 1px)", "box-shadow": "0 0 0 1px rgba(0, 0, 0, 0.1)", "color": "#1e1e1e", "outline": "none", @@ -141,24 +141,24 @@ Snapshot Diff: class="css-76dw7d-PolymorphicDiv-Content e19lxcc00" >
Header
Body
@@ -174,8 +174,8 @@ Snapshot Diff: @@ -1,30 +1,30 @@
@@ -183,24 +183,24 @@ Snapshot Diff: class="css-76dw7d-PolymorphicDiv-Content e19lxcc00" >
Header
Body
@@ -215,7 +215,7 @@ exports[`Card Card component should render correctly 1`] = ` position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); outline: none; - border-radius: calc(2px - 1px); + border-radius: calc(8px - 1px); } .emotion-2 { @@ -254,13 +254,13 @@ exports[`Card Card component should render correctly 1`] = ` } .emotion-4:first-of-type { - border-top-left-radius: calc(2px - 1px); - border-top-right-radius: calc(2px - 1px); + border-top-left-radius: calc(8px - 1px); + border-top-right-radius: calc(8px - 1px); } .emotion-4:last-of-type { - border-bottom-left-radius: calc(2px - 1px); - border-bottom-right-radius: calc(2px - 1px); + border-bottom-left-radius: calc(8px - 1px); + border-bottom-right-radius: calc(8px - 1px); } .emotion-6 { @@ -271,13 +271,13 @@ exports[`Card Card component should render correctly 1`] = ` } .emotion-6:first-of-type { - border-top-left-radius: calc(2px - 1px); - border-top-right-radius: calc(2px - 1px); + border-top-left-radius: calc(8px - 1px); + border-top-right-radius: calc(8px - 1px); } .emotion-6:last-of-type { - border-bottom-left-radius: calc(2px - 1px); - border-bottom-right-radius: calc(2px - 1px); + border-bottom-left-radius: calc(8px - 1px); + border-bottom-right-radius: calc(8px - 1px); } .emotion-10 { @@ -306,13 +306,13 @@ exports[`Card Card component should render correctly 1`] = ` } .emotion-14:first-of-type { - border-top-left-radius: calc(2px - 1px); - border-top-right-radius: calc(2px - 1px); + border-top-left-radius: calc(8px - 1px); + border-top-right-radius: calc(8px - 1px); } .emotion-14:last-of-type { - border-bottom-left-radius: calc(2px - 1px); - border-bottom-right-radius: calc(2px - 1px); + border-bottom-left-radius: calc(8px - 1px); + border-bottom-right-radius: calc(8px - 1px); } .emotion-16 { @@ -347,13 +347,13 @@ exports[`Card Card component should render correctly 1`] = ` } .emotion-16:first-of-type { - border-top-left-radius: calc(2px - 1px); - border-top-right-radius: calc(2px - 1px); + border-top-left-radius: calc(8px - 1px); + border-top-right-radius: calc(8px - 1px); } .emotion-16:last-of-type { - border-bottom-left-radius: calc(2px - 1px); - border-bottom-right-radius: calc(2px - 1px); + border-bottom-left-radius: calc(8px - 1px); + border-bottom-right-radius: calc(8px - 1px); } .emotion-18 { @@ -370,7 +370,7 @@ exports[`Card Card component should render correctly 1`] = ` left: 0; right: 0; top: 0; - border-radius: 2px; + border-radius: 8px; } @media not ( prefers-reduced-motion ) { @@ -469,15 +469,15 @@ Snapshot Diff: