diff --git a/.changeset/fast-candles-approve.md b/.changeset/fast-candles-approve.md new file mode 100644 index 00000000000..e79f2d049a7 --- /dev/null +++ b/.changeset/fast-candles-approve.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris': patch +'polaris.shopify.com': patch +--- + +Updated `AlphaCard` border radius to a boolean diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx index e9c0533022a..0c85ff5d39d 100644 --- a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx +++ b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx @@ -32,9 +32,9 @@ export function BackgroundSubdued() { ); } -export function BorderRadius() { +export function WithoutBorderRadius() { return ( - + Online store dashboard diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.tsx index 814feefbb09..9459390efe4 100644 --- a/polaris-react/src/components/AlphaCard/AlphaCard.tsx +++ b/polaris-react/src/components/AlphaCard/AlphaCard.tsx @@ -17,7 +17,7 @@ type CardElevationTokensScale = Extract< type CardBackgroundColorTokenScale = Extract< BackgroundColorTokenScale, - 'surface' | `surface-${string}` + 'surface' | 'surface-subdued' >; type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; @@ -26,28 +26,27 @@ export interface AlphaCardProps { /** Elements to display inside card */ children?: React.ReactNode; backgroundColor?: CardBackgroundColorTokenScale; - borderRadius?: BorderRadiusTokenScale; + hasBorderRadius?: boolean; elevation?: CardElevationTokensScale; padding?: SpacingTokenScale; roundedAbove?: Breakpoint; } -const defaultBorderRadius = '2'; - export const AlphaCard = ({ children, backgroundColor = 'surface', - borderRadius: borderRadiusProp = defaultBorderRadius, + hasBorderRadius: hasBorderRadiusProp = true, elevation = 'card', padding = '5', roundedAbove, }: AlphaCardProps) => { const breakpoints = useBreakpoints(); + const defaultBorderRadius = '2' as BorderRadiusTokenScale; - let borderRadius = !roundedAbove ? borderRadiusProp : null; + let hasBorderRadius = !roundedAbove && hasBorderRadiusProp; if (roundedAbove && breakpoints[`${roundedAbove}Up`]) { - borderRadius = borderRadiusProp; + hasBorderRadius = true; } return ( @@ -55,7 +54,7 @@ export const AlphaCard = ({ background={backgroundColor} padding={padding} shadow={elevation} - {...(borderRadius && {borderRadius})} + {...(hasBorderRadius && {borderRadius: defaultBorderRadius})} > {children} diff --git a/polaris.shopify.com/content/components/alpha-card/index.md b/polaris.shopify.com/content/components/alpha-card/index.md index 1f1d642accf..464020eaa2d 100644 --- a/polaris.shopify.com/content/components/alpha-card/index.md +++ b/polaris.shopify.com/content/components/alpha-card/index.md @@ -29,10 +29,10 @@ examples: - fileName: alpha-card-subdued.tsx title: With subdued for secondary content 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-border-radius.tsx - title: Border radius - description: Border radius can be adjusted when cards are nested, or added after a certain breakpoint. + - 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: Border radius can be adjusted when cards are nested, or added after a certain breakpoint. + description: Elevation can be set to flat --- diff --git a/polaris.shopify.com/pages/examples/alpha-card-border-radius.tsx b/polaris.shopify.com/pages/examples/alpha-card-without-border-radius.tsx similarity index 95% rename from polaris.shopify.com/pages/examples/alpha-card-border-radius.tsx rename to polaris.shopify.com/pages/examples/alpha-card-without-border-radius.tsx index f8177ad5349..cd731241ad2 100644 --- a/polaris.shopify.com/pages/examples/alpha-card-border-radius.tsx +++ b/polaris.shopify.com/pages/examples/alpha-card-without-border-radius.tsx @@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function AlphaCardExample() { return ( - + Online store dashboard