Skip to content

Alpha card props #7314

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 5 commits into from
Sep 30, 2022
Merged

Alpha card props #7314

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f13bf9b
Rename `background` prop for consistency
aveline Sep 30, 2022
f4131e2
changeset
aveline Sep 30, 2022
993bc90
Update `AlphaCard` docs
aveline Sep 30, 2022
816bde2
Update fuzzy-trainers-allow.md
aveline Sep 30, 2022
8704063
Update props.json
aveline Sep 30, 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/fuzzy-trainers-allow.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
---

Renamed `background` prop on `AlphaCard` for consistency
2 changes: 1 addition & 1 deletion 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 @@ -21,7 +21,7 @@ export function Default() {

export function BackgroundSubdued() {
return (
<AlphaCard backgroundColor="surface-subdued">
<AlphaCard background="surface-subdued">
<AlphaStack spacing="5">
<Text as="h3" variant="headingMd">
Online store dashboard
Expand Down
6 changes: 3 additions & 3 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 @@ -23,7 +23,7 @@ type CardBackgroundColorTokenScale = Extract<
export interface AlphaCardProps {
/** Elements to display inside card */
children?: React.ReactNode;
backgroundColor?: CardBackgroundColorTokenScale;
background?: CardBackgroundColorTokenScale;
hasBorderRadius?: boolean;
elevation?: CardElevationTokensScale;
padding?: SpacingSpaceScale;
Expand All @@ -32,7 +32,7 @@ export interface AlphaCardProps {

export const AlphaCard = ({
children,
backgroundColor = 'surface',
background = 'surface',
hasBorderRadius: hasBorderRadiusProp = true,
elevation = 'card',
padding = '5',
Expand All @@ -49,7 +49,7 @@ export const AlphaCard = ({

return (
<Box
background={backgroundColor}
background={background}
padding={padding}
shadow={elevation}
{...(hasBorderRadius && {borderRadius: defaultBorderRadius})}
Expand Down
2 changes: 1 addition & 1 deletion polaris.shopify.com/pages/examples/alpha-card-subdued.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';

function AlphaCardExample() {
return (
<AlphaCard backgroundColor="surface-subdued">
<AlphaCard background="surface-subdued">
<AlphaStack spacing="5">
<Text as="h3" variant="headingMd">
Online store dashboard
Expand Down