[Card] Add overflowX and overflowY props for horizontal and vertical clipping

.changeset/sharp-queens-fly.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Add `overflowX` and `overflowY` properties to the `Card`

polaris-react/src/components/Card/Card.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 
 import {useBreakpoints} from '../../utilities/breakpoints';
 import type {ResponsiveProp} from '../../utilities/css';
+import type {BoxProps} from '../Box';
 import {Box} from '../Box';
 import {ShadowBevel} from '../ShadowBevel';
 import {WithinContentContext} from '../../utilities/within-content-context';
@@ -31,13 +32,23 @@ export interface CardProps {
    * @default 'sm'
    */
   roundedAbove?: BreakpointsAlias;
+  /** Clip or scroll horizontal overflow of children content
+   * @default 'clip'
+   */
+  overflowX?: BoxProps['overflowX'];
+  /** Clip or scroll vertical overflow of children content
+   * @default 'clip'
+   */
+  overflowY?: BoxProps['overflowY'];
 }
 
 export const Card = ({
   children,
   background = 'bg-surface',
   padding = {xs: '400'},
   roundedAbove = 'sm',
+  overflowX = 'clip',
+  overflowY = 'clip',
 }: CardProps) => {
   const breakpoints = useBreakpoints();
   const defaultBorderRadius: BorderRadiusAliasOrScale = '300';
@@ -53,8 +64,8 @@ export const Card = ({
         <Box
           background={background}
           padding={padding}
-          overflowX="clip"
-          overflowY="clip"
+          overflowX={overflowX}
+          overflowY={overflowY}
           minHeight="100%"
         >
           {children}

polaris-react/src/components/Card/tests/Card.test.tsx

@@ -5,6 +5,7 @@ import {setMediaWidth} from 'tests/utilities/breakpoints';
 import {WithinContentContext} from '../../../utilities/within-content-context';
 import {Card} from '..';
 import {ShadowBevel} from '../../ShadowBevel';
+import {Box} from '../../Box';
 
 const heading = <p>Online store dashboard</p>;
 const subheading = <p>View a summary of your online store performance</p>;
@@ -55,4 +56,26 @@ describe('Card', () => {
       borderRadius: '300',
     });
   });
+
+  it('uses default overflow values if none provided', () => {
+    const card = mountWithApp(<Card>{heading}</Card>);
+    expect(card).toContainReactComponent(Box, {
+      overflowX: 'clip',
+      overflowY: 'clip',
+    });
+  });
+
+  it('forwards overflowX and overflowY props to Box', () => {
+    const card = mountWithApp(
+      <Card overflowX="hidden" overflowY="clip">
+        {heading}
+        {subheading}
+      </Card>,
+    );
+
+    expect(card).toContainReactComponent(Box, {
+      overflowX: 'hidden',
+      overflowY: 'clip',
+    });
+  });
 });