Skip to content

Update AlphaCard border radius to a boolean #7287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 28, 2022
Merged

Update AlphaCard border radius to a boolean #7287

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
73f932f
Update `AlphaCard` border radius to boolean
aveline Sep 27, 2022
bf91e82
changeset
aveline Sep 27, 2022
f2e5e91
Update index.md
aveline Sep 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/fast-candles-approve.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@shopify/polaris': patch
'polaris.shopify.com': patch
---

Updated `AlphaCard` border radius to a boolean
4 changes: 2 additions & 2 deletions polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ export function BackgroundSubdued() {
);
}

export function BorderRadius() {
export function WithoutBorderRadius() {
return (
<AlphaCard borderRadius="4">
<AlphaCard hasBorderRadius={false}>
<AlphaStack spacing="5">
<Text as="h3" variant="headingMd">
Online store dashboard
Expand Down
15 changes: 7 additions & 8 deletions polaris-react/src/components/AlphaCard/AlphaCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ type CardElevationTokensScale = Extract<

type CardBackgroundColorTokenScale = Extract<
BackgroundColorTokenScale,
'surface' | `surface-${string}`
'surface' | 'surface-subdued'
>;

type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
Expand All @@ -26,36 +26,35 @@ 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 (
<Box
background={backgroundColor}
padding={padding}
shadow={elevation}
{...(borderRadius && {borderRadius})}
{...(hasBorderRadius && {borderRadius: defaultBorderRadius})}
>
{children}
</Box>
Expand Down
6 changes: 3 additions & 3 deletions polaris.shopify.com/content/components/alpha-card/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ 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.
Expand Down
2 changes: 1 addition & 1 deletion ...ges/examples/alpha-card-border-radius.tsx → ...ples/alpha-card-without-border-radius.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
function AlphaCardExample() {
return (
<AlphaStack>
<AlphaCard borderRadius="4">
<AlphaCard hasBorderRadius={false}>
<AlphaStack spacing="5">
<Text as="h3" variant="headingMd">
Online store dashboard
Expand Down