[MediaCard] Remove extraneous space when card has no actions

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

src/components/MediaCard/MediaCard.tsx

@@ -103,14 +103,15 @@ export function MediaCard({
     portrait && styles.portrait,
   );
 
-  const actionMarkup = (
-    <div className={actionClassName}>
-      <ButtonGroup>
-        {primaryActionMarkup}
-        {secondaryActionMarkup}
-      </ButtonGroup>
-    </div>
-  );
+  const actionMarkup =
+    primaryActionMarkup || secondaryActionMarkup ? (
+      <div className={actionClassName}>
+        <ButtonGroup>
+          {primaryActionMarkup}
+          {secondaryActionMarkup}
+        </ButtonGroup>
+      </div>
+    ) : null;
 
   const mediaCardClassName = classNames(
     styles.MediaCard,

src/components/MediaCard/README.md

@@ -211,6 +211,26 @@ Use when there are two distinct actions merchants can take on the information in
 </MediaCard>
 ```
 
+### Media card with no actions
+
+Use when media card does not require any actions.
+
+```jsx
+<MediaCard
+  title="Getting Started"
+  description="Discover how Shopify can power up your entrepreneurial journey."
+  popoverActions={[{content: 'Dismiss', onAction: () => {}}]}
+>
+  <img
+    alt=""
+    width="100%"
+    height="100%"
+    style={{objectFit: 'cover', objectPosition: 'center'}}
+    src="https://burst.shopifycdn.com/photos/business-woman-smiling-in-office.jpg?width=1850"
+  />
+</MediaCard>
+```
+
 ### Video card
 
 Use to provide a consistent layout for contextual learning content. Use to wrap thumbnails of educational videos about Shopify features in context.

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: <img alt="" />,
@@ -48,6 +49,41 @@ describe('<MediaCard>', () => {
     expect(videoCard).toContainReactComponent('p', {children: description});
   });
 
+  it('does not render a wrapper around actions when primaryAction and secondaryAction are empty', () => {
+    const videoCard = mountWithApp(
+      <MediaCard
+        {...mockProps}
+        primaryAction={undefined}
+        secondaryAction={undefined}
+      />,
+    );
+
+    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(
+      <MediaCard {...mockProps} primaryAction={mockAction} />,
+    );
+    const videoCardWithSecondaryAction = mountWithApp(
+      <MediaCard
+        {...mockProps}
+        primaryAction={undefined}
+        secondaryAction={mockAction}
+      />,
+    );
+
+    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(