Update Card mobile styles

Shopify · Apr 22, 2024 · 5410382 · 5410382
1 parent a83084b
commit 5410382
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/.changeset/angry-avocados-scream.md b/.changeset/angry-avocados-scream.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `Card` bevel styles based on `roundedAbove` prop
diff --git a/polaris-react/src/components/Card/Card.tsx b/polaris-react/src/components/Card/Card.tsx
@@ -1,7 +1,6 @@
 import type {
   BreakpointsAlias,
   ColorBackgroundAlias,
-  BorderRadiusAliasOrScale,
   SpaceScale,
 } from '@shopify/polaris-tokens';
 import React from 'react';
@@ -40,15 +39,15 @@ export const Card = ({
   roundedAbove = 'sm',
 }: CardProps) => {
   const breakpoints = useBreakpoints();
-  const defaultBorderRadius: BorderRadiusAliasOrScale = '300';
-  const hasBorderRadius = Boolean(breakpoints[`${roundedAbove}Up`]);
+  const hasBevel = Boolean(breakpoints[`${roundedAbove}Up`]);
 
   return (
     <WithinContentContext.Provider value>
       <ShadowBevel
         boxShadow="100"
-        borderRadius={hasBorderRadius ? defaultBorderRadius : '0'}
+        borderRadius="300"
         zIndex="32"
+        bevel={hasBevel}
       >
         <Box
           background={background}