diff --git a/UNRELEASED.md b/UNRELEASED.md index 8828be140b2..6174474018c 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -10,6 +10,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Bug fixes +- Removed extraneous space in `MediaCard` when card has no actions ([#4538](https://github.com/Shopify/polaris-react/pull/4538)) + ### Documentation ### Development workflow diff --git a/src/components/MediaCard/MediaCard.tsx b/src/components/MediaCard/MediaCard.tsx index 373b213002e..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 = ( -
- - {primaryActionMarkup} - {secondaryActionMarkup} - -
- ); + const actionMarkup = + primaryActionMarkup || secondaryActionMarkup ? ( +
+ + {primaryActionMarkup} + {secondaryActionMarkup} + +
+ ) : null; const mediaCardClassName = classNames( styles.MediaCard, diff --git a/src/components/MediaCard/README.md b/src/components/MediaCard/README.md index f1c83c35411..7cc99187600 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. 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(