From 03b11c52d3ff67a230f0892211bd7f90eefd6a37 Mon Sep 17 00:00:00 2001 From: "emily c. ritter" Date: Wed, 20 Oct 2021 20:12:00 -0500 Subject: [PATCH 1/7] Remove extraneous space from MediaCard when no actions --- CHANGELOG.md | 1 + src/components/MediaCard/MediaCard.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 25b6a66af0e..0c0e90785c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -409,6 +409,7 @@ For instructions on updating from v5 to v6, see our [migration guide](https://gi - Removed `-ms-high-contrast` media query from `ms-high-contrast-outline` as it is non-standard and updated the outline color from `windowText` to `transparent` ([#3775](https://github.com/Shopify/polaris-react/pull/3775)). - Fixed `Collapsible` expand and collapse animation ([#3779](https://github.com/Shopify/polaris-react/pull/3779)) - Fixed a bug in `Page` where re-rendering of `secondaryActions` could cause layout jittering ([#3641](https://github.com/Shopify/polaris-react/pull/3641)) +- Removed extraneous space in `MediaCard` when card has no actions ([#4534](https://github.com/Shopify/polaris-react/issues/4534)) ### Development workflow diff --git a/src/components/MediaCard/MediaCard.tsx b/src/components/MediaCard/MediaCard.tsx index 9e5c9bbc988..f42f51a46b8 100644 --- a/src/components/MediaCard/MediaCard.tsx +++ b/src/components/MediaCard/MediaCard.tsx @@ -103,14 +103,14 @@ export function MediaCard({ portrait && styles.portrait, ); - const actionMarkup = ( + const actionMarkup = (primaryAction || secondaryAction) ? (
{primaryActionMarkup} {secondaryActionMarkup}
- ); + ): null; const mediaCardClassName = classNames( styles.MediaCard, From 3dc616de459a19c7a070ea7d6dea22ed812445d7 Mon Sep 17 00:00:00 2001 From: "emily c. ritter" Date: Wed, 20 Oct 2021 21:16:10 -0500 Subject: [PATCH 2/7] Add bug to UNRELEASED instead of CHANGELOG --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index f7bd2b9f8dc..c221dc518e6 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -11,6 +11,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Bug fixes - Fixed empty children being wrapped with `Item` in `Stack` ([#4487](https://github.com/Shopify/polaris-react/pull/4487)) +- Removed extraneous space in `MediaCard` when card has no actions ([#4534](https://github.com/Shopify/polaris-react/issues/4534)) ### Documentation From 8b3457f4cc39f20320cae8ede06b1d005a8ebfe1 Mon Sep 17 00:00:00 2001 From: "emily c. ritter" Date: Wed, 20 Oct 2021 21:16:45 -0500 Subject: [PATCH 3/7] Remove entry from CHANGELOG --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c0e90785c6..25b6a66af0e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -409,7 +409,6 @@ For instructions on updating from v5 to v6, see our [migration guide](https://gi - Removed `-ms-high-contrast` media query from `ms-high-contrast-outline` as it is non-standard and updated the outline color from `windowText` to `transparent` ([#3775](https://github.com/Shopify/polaris-react/pull/3775)). - Fixed `Collapsible` expand and collapse animation ([#3779](https://github.com/Shopify/polaris-react/pull/3779)) - Fixed a bug in `Page` where re-rendering of `secondaryActions` could cause layout jittering ([#3641](https://github.com/Shopify/polaris-react/pull/3641)) -- Removed extraneous space in `MediaCard` when card has no actions ([#4534](https://github.com/Shopify/polaris-react/issues/4534)) ### Development workflow From aa0aa5e508fbd164ac6244ba3c7f6a71eddaea4d Mon Sep 17 00:00:00 2001 From: "emily c. ritter" Date: Fri, 22 Oct 2021 10:50:13 -0500 Subject: [PATCH 4/7] Adds example to README for MediaCard without actions --- src/components/MediaCard/README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/components/MediaCard/README.md b/src/components/MediaCard/README.md index f1c83c35411..eea73181964 100644 --- a/src/components/MediaCard/README.md +++ b/src/components/MediaCard/README.md @@ -211,6 +211,26 @@ Use when there are two distinct actions merchants can take on the information in ``` +### Media card with no actions + +Use when media card does not require any actions + +```jsx + {}}]} +> + + +``` + ### Video card Use to provide a consistent layout for contextual learning content. Use to wrap thumbnails of educational videos about Shopify features in context. From 1ab4d343e442f864e3dbb651d2f1080ddccbeb23 Mon Sep 17 00:00:00 2001 From: Kaelig Deloumeau-Prigent Date: Thu, 28 Oct 2021 15:16:43 -0700 Subject: [PATCH 5/7] Add period to example description --- src/components/MediaCard/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MediaCard/README.md b/src/components/MediaCard/README.md index eea73181964..7cc99187600 100644 --- a/src/components/MediaCard/README.md +++ b/src/components/MediaCard/README.md @@ -213,7 +213,7 @@ Use when there are two distinct actions merchants can take on the information in ### Media card with no actions -Use when media card does not require any actions +Use when media card does not require any actions. ```jsx Date: Thu, 28 Oct 2021 15:25:46 -0700 Subject: [PATCH 6/7] Fix condition and formatting --- src/components/MediaCard/MediaCard.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/MediaCard/MediaCard.tsx b/src/components/MediaCard/MediaCard.tsx index 69ece300e3c..b30771bd5d0 100644 --- a/src/components/MediaCard/MediaCard.tsx +++ b/src/components/MediaCard/MediaCard.tsx @@ -103,14 +103,15 @@ export function MediaCard({ portrait && styles.portrait, ); - const actionMarkup = (primaryAction || secondaryAction) ? ( -
- - {primaryActionMarkup} - {secondaryActionMarkup} - -
- ): null; + const actionMarkup = + primaryActionMarkup || secondaryActionMarkup ? ( +
+ + {primaryActionMarkup} + {secondaryActionMarkup} + +
+ ) : null; const mediaCardClassName = classNames( styles.MediaCard, From f729d60187cdea8ab2bc69621711fad603feeb45 Mon Sep 17 00:00:00 2001 From: Kaelig Deloumeau-Prigent Date: Mon, 1 Nov 2021 17:09:30 -0700 Subject: [PATCH 7/7] Add test to check that the wrapper around actions only renders when expected --- .../MediaCard/tests/MediaCard.test.tsx | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/components/MediaCard/tests/MediaCard.test.tsx b/src/components/MediaCard/tests/MediaCard.test.tsx index 58f7a737851..628a7912a3e 100644 --- a/src/components/MediaCard/tests/MediaCard.test.tsx +++ b/src/components/MediaCard/tests/MediaCard.test.tsx @@ -3,6 +3,7 @@ import {Heading, Popover, Button, ActionList, Badge} from 'components'; import {mountWithApp} from 'test-utilities'; import {MediaCard} from '../MediaCard'; +import styles from '../MediaCard.scss'; const mockProps = { children: , @@ -48,6 +49,41 @@ describe('', () => { expect(videoCard).toContainReactComponent('p', {children: description}); }); + it('does not render a wrapper around actions when primaryAction and secondaryAction are empty', () => { + const videoCard = mountWithApp( + , + ); + + expect(videoCard).not.toContainReactComponent('div', { + className: expect.stringContaining(styles.ActionContainer), + }); + }); + + it('renders a wrapper around actions when primaryAction and secondaryAction are provided', () => { + const mockAction = {content: 'test'}; + const videoCardWithPrimaryAction = mountWithApp( + , + ); + const videoCardWithSecondaryAction = mountWithApp( + , + ); + + expect(videoCardWithPrimaryAction).toContainReactComponent('div', { + className: expect.stringContaining(styles.ActionContainer), + }); + expect(videoCardWithSecondaryAction).toContainReactComponent('div', { + className: expect.stringContaining(styles.ActionContainer), + }); + }); + it('renders a Button with the primaryAction', () => { const primaryAction = {content: 'test primary action'}; const videoCard = mountWithApp(