From 830c4ed8f82396980a8d415ea3d2f56150a68f16 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 5 Apr 2022 11:21:42 +0200 Subject: [PATCH] Card: adjust border radius size (#40032) * Card: adjust border radius size * Update unit tests * CHANGELOG --- packages/components/CHANGELOG.md | 1 + packages/components/src/card/styles.js | 16 +- .../src/card/test/__snapshots__/index.js.snap | 143 ++++++++++-------- packages/components/src/card/test/index.js | 12 +- .../flyout/test/__snapshots__/index.js.snap | 12 +- 5 files changed, 105 insertions(+), 79 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index eb4e732b4438c7..c3d28c0de13f9f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,7 @@ - Update `BorderControl` and `BorderBoxControl` to allow the passing of custom class names to popovers ([#39753](https://github.com/WordPress/gutenberg/pull/39753)). - `ToggleGroupControl`: Reintroduce backdrop animation ([#40021](https://github.com/WordPress/gutenberg/pull/40021)). +- `Card`: Adjust border radius effective size ([#40032](https://github.com/WordPress/gutenberg/pull/40032)). ### Internal diff --git a/packages/components/src/card/styles.js b/packages/components/src/card/styles.js index 9162a4790a93b3..ad08bf2690e8fa 100644 --- a/packages/components/src/card/styles.js +++ b/packages/components/src/card/styles.js @@ -8,6 +8,12 @@ import { css } from '@emotion/react'; */ import { COLORS, CONFIG } from '../utils'; +// Since the border for `Card` is rendered via the `box-shadow` property +// (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)`; + export const Card = css` box-shadow: 0 0 0 1px ${ CONFIG.surfaceBorderColor }; outline: none; @@ -62,13 +68,13 @@ export const Divider = css` export const borderRadius = css` &:first-of-type { - border-top-left-radius: ${ CONFIG.cardBorderRadius }; - border-top-right-radius: ${ CONFIG.cardBorderRadius }; + border-top-left-radius: ${ adjustedBorderRadius }; + border-top-right-radius: ${ adjustedBorderRadius }; } &:last-of-type { - border-bottom-left-radius: ${ CONFIG.cardBorderRadius }; - border-bottom-right-radius: ${ CONFIG.cardBorderRadius }; + border-bottom-left-radius: ${ adjustedBorderRadius }; + border-bottom-right-radius: ${ adjustedBorderRadius }; } `; @@ -85,7 +91,7 @@ export const borderless = css` `; export const rounded = css` - border-radius: ${ CONFIG.cardBorderRadius }; + border-radius: ${ adjustedBorderRadius }; `; const xSmallCardPadding = css` diff --git a/packages/components/src/card/test/__snapshots__/index.js.snap b/packages/components/src/card/test/__snapshots__/index.js.snap index 2c0dc3d22eb2d0..eea876b0cffe56 100644 --- a/packages/components/src/card/test/__snapshots__/index.js.snap +++ b/packages/components/src/card/test/__snapshots__/index.js.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-mgwsf4-View-Content em57xhy0" >
Header
@@ -113,6 +113,23 @@ Snapshot Diff:
`; +exports[`Card Card component should add rounded border when the isRounded prop is true 1`] = ` +Snapshot Diff: +- Received styles ++ Base styles + +@@ -1,9 +1,8 @@ + Array [ + Object { + "background-color": "#fff", +- "border-radius": "calc(2px - 1px)", + "box-shadow": "0 0 0 1px rgba(0, 0, 0, 0.1)", + "color": "#000", + "outline": "none", + "position": "relative", + }, +`; + exports[`Card Card component should get the isBorderless and isSize props (passed from its context) overriddenwhen the same props is specified directly on the component 1`] = ` Snapshot Diff: - First value @@ -124,24 +141,24 @@ Snapshot Diff: class="css-mgwsf4-View-Content em57xhy0" >
Header
Body
@@ -157,8 +174,8 @@ Snapshot Diff: @@ -1,30 +1,30 @@
@@ -166,24 +183,24 @@ Snapshot Diff: class="css-mgwsf4-View-Content em57xhy0" >
Header
Body
@@ -200,7 +217,7 @@ Object { position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); outline: none; - border-radius: 2px; + border-radius: calc(2px - 1px); } .emotion-2 { @@ -242,13 +259,13 @@ Object { } .emotion-4:first-of-type { - border-top-left-radius: 2px; - border-top-right-radius: 2px; + border-top-left-radius: calc(2px - 1px); + border-top-right-radius: calc(2px - 1px); } .emotion-4:last-of-type { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + border-bottom-left-radius: calc(2px - 1px); + border-bottom-right-radius: calc(2px - 1px); } .emotion-6 { @@ -259,13 +276,13 @@ Object { } .emotion-6:first-of-type { - border-top-left-radius: 2px; - border-top-right-radius: 2px; + border-top-left-radius: calc(2px - 1px); + border-top-right-radius: calc(2px - 1px); } .emotion-6:last-of-type { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + border-bottom-left-radius: calc(2px - 1px); + border-bottom-right-radius: calc(2px - 1px); } .emotion-10 { @@ -294,13 +311,13 @@ Object { } .emotion-14:first-of-type { - border-top-left-radius: 2px; - border-top-right-radius: 2px; + border-top-left-radius: calc(2px - 1px); + border-top-right-radius: calc(2px - 1px); } .emotion-14:last-of-type { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + border-bottom-left-radius: calc(2px - 1px); + border-bottom-right-radius: calc(2px - 1px); } .emotion-16 { @@ -338,13 +355,13 @@ Object { } .emotion-16:first-of-type { - border-top-left-radius: 2px; - border-top-right-radius: 2px; + border-top-left-radius: calc(2px - 1px); + border-top-right-radius: calc(2px - 1px); } .emotion-16:last-of-type { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + border-bottom-left-radius: calc(2px - 1px); + border-bottom-right-radius: calc(2px - 1px); } .emotion-18 { @@ -456,7 +473,7 @@ Object { position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); outline: none; - border-radius: 2px; + border-radius: calc(2px - 1px); } .emotion-2 { @@ -498,13 +515,13 @@ Object { } .emotion-4:first-of-type { - border-top-left-radius: 2px; - border-top-right-radius: 2px; + border-top-left-radius: calc(2px - 1px); + border-top-right-radius: calc(2px - 1px); } .emotion-4:last-of-type { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + border-bottom-left-radius: calc(2px - 1px); + border-bottom-right-radius: calc(2px - 1px); } .emotion-6 { @@ -515,13 +532,13 @@ Object { } .emotion-6:first-of-type { - border-top-left-radius: 2px; - border-top-right-radius: 2px; + border-top-left-radius: calc(2px - 1px); + border-top-right-radius: calc(2px - 1px); } .emotion-6:last-of-type { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + border-bottom-left-radius: calc(2px - 1px); + border-bottom-right-radius: calc(2px - 1px); } .emotion-10 { @@ -550,13 +567,13 @@ Object { } .emotion-14:first-of-type { - border-top-left-radius: 2px; - border-top-right-radius: 2px; + border-top-left-radius: calc(2px - 1px); + border-top-right-radius: calc(2px - 1px); } .emotion-14:last-of-type { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + border-bottom-left-radius: calc(2px - 1px); + border-bottom-right-radius: calc(2px - 1px); } .emotion-16 { @@ -594,13 +611,13 @@ Object { } .emotion-16:first-of-type { - border-top-left-radius: 2px; - border-top-right-radius: 2px; + border-top-left-radius: calc(2px - 1px); + border-top-right-radius: calc(2px - 1px); } .emotion-16:last-of-type { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + border-bottom-left-radius: calc(2px - 1px); + border-bottom-right-radius: calc(2px - 1px); } .emotion-18 { @@ -796,7 +813,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`] position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); outline: none; - border-radius: 2px; + border-radius: calc(2px - 1px); } .emotion-2 { diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js index 01a51c0cf329bc..613de06c24ad8e 100644 --- a/packages/components/src/card/test/index.js +++ b/packages/components/src/card/test/index.js @@ -14,7 +14,6 @@ import { CardHeader, CardMedia, } from '../'; -import { CONFIG } from '../../utils'; describe( 'Card', () => { describe( 'Card component', () => { @@ -51,12 +50,15 @@ describe( 'Card', () => { } ); it( 'should add rounded border when the isRounded prop is true', () => { - const { container } = render( + const { container: containerRounded } = render( Code is Poetry ); - expect( container.firstChild ).toHaveStyle( { - borderRadius: CONFIG.cardBorderRadius, - } ); + const { container: containerSquared } = render( + Code is Poetry + ); + expect( containerRounded.firstChild ).toMatchStyleDiffSnapshot( + containerSquared.firstChild + ); } ); it( 'should show a box shadow when the elevation prop is greater than 0', () => { diff --git a/packages/components/src/flyout/test/__snapshots__/index.js.snap b/packages/components/src/flyout/test/__snapshots__/index.js.snap index 9aeeace655ce5e..1759d8ddb0e8b5 100644 --- a/packages/components/src/flyout/test/__snapshots__/index.js.snap +++ b/packages/components/src/flyout/test/__snapshots__/index.js.snap @@ -7,7 +7,7 @@ exports[`props should render correctly 1`] = ` position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); outline: none; - border-radius: 2px; + border-radius: calc(2px - 1px); } .emotion-1 .components-card-body { @@ -26,13 +26,13 @@ exports[`props should render correctly 1`] = ` } .emotion-5:first-of-type { - border-top-left-radius: 2px; - border-top-right-radius: 2px; + border-top-left-radius: calc(2px - 1px); + border-top-right-radius: calc(2px - 1px); } .emotion-5:last-of-type { - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + border-bottom-left-radius: calc(2px - 1px); + border-bottom-right-radius: calc(2px - 1px); } .emotion-7 { @@ -172,7 +172,7 @@ Snapshot Diff: tabindex="-1" /> +