Remove card shadows from smaller breakpoints

Shopify · Nov 8, 2024 · 6fee7aa · 6fee7aa
1 parent a9e9e4d
commit 6fee7aa
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 15 deletions.
diff --git a/.changeset/stupid-otters-smile.md b/.changeset/stupid-otters-smile.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Removed default `Card` and `LegacyCard` bevel styles below sm breakpoint
diff --git a/polaris-react/src/components/Card/Card.tsx b/polaris-react/src/components/Card/Card.tsx
@@ -1,12 +1,10 @@
 import type {
   BreakpointsAlias,
   ColorBackgroundAlias,
-  BorderRadiusAliasOrScale,
   SpaceScale,
 } from '@shopify/polaris-tokens';
 import React from 'react';
 
-import {useBreakpoints} from '../../utilities/breakpoints';
 import type {ResponsiveProp} from '../../utilities/css';
 import {Box} from '../Box';
 import {ShadowBevel} from '../ShadowBevel';
@@ -39,15 +37,14 @@ export const Card = ({
   padding = {xs: '400'},
   roundedAbove = 'sm',
 }: CardProps) => {
-  const breakpoints = useBreakpoints();
-  const defaultBorderRadius: BorderRadiusAliasOrScale = '300';
-  const hasBorderRadius = Boolean(breakpoints[`${roundedAbove}Up`]);
-
   return (
     <WithinContentContext.Provider value>
       <ShadowBevel
         boxShadow="100"
-        borderRadius={hasBorderRadius ? defaultBorderRadius : '0'}
+        borderRadius="300"
+        bevel={{
+          [roundedAbove]: true,
+        }}
         zIndex="32"
       >
         <Box

diff --git a/polaris-react/src/components/Card/tests/Card.test.tsx b/polaris-react/src/components/Card/tests/Card.test.tsx
@@ -42,17 +42,29 @@ describe('Card', () => {
     expect(card).toContainReactComponentTimes('p', 2);
   });
 
-  it('sets default border radius when roundedAbove breakpoint passed in', () => {
-    setMediaWidth('breakpoints-sm');
+  it('cards are rounded sm and above by default', () => {
     const card = mountWithApp(
-      <Card roundedAbove="sm">
+      <Card>
+        {heading}
+        {subheading}
+      </Card>,
+    );
+
+    expect(card).toContainReactComponent(ShadowBevel, {
+      bevel: {sm: true},
+    });
+  });
+
+  it('cards respect incoming roundedAbove prop', () => {
+    const card = mountWithApp(
+      <Card roundedAbove="md">
         {heading}
         {subheading}
       </Card>,
     );
 
     expect(card).toContainReactComponent(ShadowBevel, {
-      borderRadius: '300',
+      bevel: {md: true},
     });
   });
 });
diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.module.css b/polaris-react/src/components/LegacyCard/LegacyCard.module.css
@@ -1,12 +1,8 @@
 .LegacyCard {
   background-color: var(--p-color-bg-surface);
-  box-shadow: var(--p-shadow-300);
   outline: var(--p-border-width-025) solid transparent;
   overflow: clip;
 
-  @mixin shadow-bevel var(--p-shadow-100), var(--p-border-radius-0), null, '',
-    101;
-
   + .LegacyCard {
     margin-top: var(--p-space-400);
 
@@ -16,6 +12,7 @@
   }
 
   @media (--p-breakpoints-sm-up) {
+    box-shadow: var(--p-shadow-300);
     border-radius: var(--p-border-radius-200);
 
     @mixin shadow-bevel var(--p-shadow-100), var(--p-border-radius-300), null,