Simplify AlphaCard by removing hasBorderRadius and shadow props

.changeset/yellow-chairs-walk.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Simplify `AlphaCard` by removing `hasBorderRadius` prop and `shadow` prop

polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx

@@ -32,19 +32,6 @@ export function BackgroundSubdued() {
   );
 }
 
-export function WithoutBorderRadius() {
-  return (
-    <AlphaCard hasBorderRadius={false}>
-      <AlphaStack spacing="5">
-        <Text as="h3" variant="headingMd">
-          Online store dashboard
-        </Text>
-        <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
-    </AlphaCard>
-  );
-}
-
 export function BorderRadiusRoundedAbove() {
   return (
     <AlphaCard roundedAbove="sm">
@@ -57,16 +44,3 @@ export function BorderRadiusRoundedAbove() {
     </AlphaCard>
   );
 }
-
-export function Flat() {
-  return (
-    <AlphaCard shadow="transparent">
-      <AlphaStack spacing="5">
-        <Text as="h3" variant="headingMd">
-          Online store dashboard
-        </Text>
-        <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
-    </AlphaCard>
-  );
-}

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

@@ -1,7 +1,6 @@
 import type {
   BreakpointsAlias,
   ColorsTokenName,
-  DepthShadowAlias,
   ShapeBorderRadiusScale,
   SpacingSpaceScale,
 } from '@shopify/polaris-tokens';
@@ -10,8 +9,6 @@ import React from 'react';
 import {useBreakpoints} from '../../utilities/breakpoints';
 import {Box} from '../Box';
 
-type CardShadowTokensScale = Extract<DepthShadowAlias, 'card' | 'transparent'>;
-
 type CardBackgroundColorTokenScale = Extract<
   ColorsTokenName,
   'surface' | 'surface-subdued'
@@ -21,24 +18,20 @@ export interface AlphaCardProps {
   /** Elements to display inside card */
   children?: React.ReactNode;
   background?: CardBackgroundColorTokenScale;
-  hasBorderRadius?: boolean;
-  shadow?: CardShadowTokensScale;
   padding?: SpacingSpaceScale;
   roundedAbove?: BreakpointsAlias;
 }
 
 export const AlphaCard = ({
   children,
   background = 'surface',
-  hasBorderRadius: hasBorderRadiusProp = true,
-  shadow = 'card',
   padding = '5',
   roundedAbove,
 }: AlphaCardProps) => {
   const breakpoints = useBreakpoints();
   const defaultBorderRadius = '2' as ShapeBorderRadiusScale;
 
-  let hasBorderRadius = !roundedAbove && hasBorderRadiusProp;
+  let hasBorderRadius = !roundedAbove;
 
   if (roundedAbove && breakpoints[`${roundedAbove}Up`]) {
     hasBorderRadius = true;
@@ -48,7 +41,7 @@ export const AlphaCard = ({
     <Box
       background={background}
       padding={padding}
-      shadow={shadow}
+      shadow="card"
       {...(hasBorderRadius && {borderRadius: defaultBorderRadius})}
     >
       {children}

polaris.shopify.com/content/components/alpha-card.md

@@ -31,8 +31,5 @@ examples:
     description: Use for content that you want to deprioritize. Subdued cards don’t stand out as much as cards with white backgrounds so don’t use them for information or actions that are critical to merchants.
   - fileName: alpha-card-without-border-radius.tsx
     title: Without border radius
-    description: Border radius can be toggled off, or added after a certain breakpoint.
-  - fileName: alpha-card-flat.tsx
-    title: Elevation
-    description: Elevation can be set to flat
+    description: Border radius can be toggled to display only past a certain breakpoint.
 ---