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(