Skip to content

Commit ae5401c

Browse files
authored
Rename AlphaCard shadow prop (#7325)
### WHY are these changes introduced? Rename shadow prop for consistency with `Box` component
1 parent 6b89052 commit ae5401c

File tree

4 files changed

+12
-9
lines changed

4 files changed

+12
-9
lines changed

.changeset/selfish-poets-lick.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/polaris': patch
3+
'polaris.shopify.com': patch
4+
---
5+
6+
Renamed `AlphaCard` `shadow` prop

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export function BorderRadiusRoundedAbove() {
6060

6161
export function Flat() {
6262
return (
63-
<AlphaCard elevation="transparent">
63+
<AlphaCard shadow="transparent">
6464
<AlphaStack spacing="5">
6565
<Text as="h3" variant="headingMd">
6666
Online store dashboard

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,7 @@ import React from 'react';
1010
import {useBreakpoints} from '../../utilities/breakpoints';
1111
import {Box} from '../Box';
1212

13-
type CardElevationTokensScale = Extract<
14-
DepthShadowAlias,
15-
'card' | 'transparent'
16-
>;
13+
type CardShadowTokensScale = Extract<DepthShadowAlias, 'card' | 'transparent'>;
1714

1815
type CardBackgroundColorTokenScale = Extract<
1916
ColorsTokenName,
@@ -25,7 +22,7 @@ export interface AlphaCardProps {
2522
children?: React.ReactNode;
2623
background?: CardBackgroundColorTokenScale;
2724
hasBorderRadius?: boolean;
28-
elevation?: CardElevationTokensScale;
25+
shadow?: CardShadowTokensScale;
2926
padding?: SpacingSpaceScale;
3027
roundedAbove?: BreakpointsAlias;
3128
}
@@ -34,7 +31,7 @@ export const AlphaCard = ({
3431
children,
3532
background = 'surface',
3633
hasBorderRadius: hasBorderRadiusProp = true,
37-
elevation = 'card',
34+
shadow = 'card',
3835
padding = '5',
3936
roundedAbove,
4037
}: AlphaCardProps) => {
@@ -51,7 +48,7 @@ export const AlphaCard = ({
5148
<Box
5249
background={background}
5350
padding={padding}
54-
shadow={elevation}
51+
shadow={shadow}
5552
{...(hasBorderRadius && {borderRadius: defaultBorderRadius})}
5653
>
5754
{children}

polaris.shopify.com/pages/examples/alpha-card-flat.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
44

55
function AlphaCardExample() {
66
return (
7-
<AlphaCard elevation="transparent">
7+
<AlphaCard shadow="transparent">
88
<AlphaStack spacing="5">
99
<Text as="h3" variant="headingMd">
1010
Online store dashboard

0 commit comments

Comments
 (0)