diff --git a/.changeset/swift-grapes-warn.md b/.changeset/swift-grapes-warn.md new file mode 100644 index 00000000000..91f64d56658 --- /dev/null +++ b/.changeset/swift-grapes-warn.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Add borderRadius prop to Card component. diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-high-contrast-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-high-contrast-linux.png index 1b6cf408dd8..bf46c136da9 100644 Binary files a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-high-contrast-linux.png and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-high-contrast-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-high-contrast-linux.png index 0584ab9bb6c..04fc6425d37 100644 Binary files a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-high-contrast-linux.png and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-high-contrast-linux.png differ diff --git a/packages/react/.storybook/primitives-v8.css b/packages/react/.storybook/primitives-v8.css index 31d9350eb39..af2ad577d74 100644 --- a/packages/react/.storybook/primitives-v8.css +++ b/packages/react/.storybook/primitives-v8.css @@ -4,6 +4,7 @@ @import '@primer/primitives/dist/css/base/typography/typography.css'; @import '@primer/primitives/dist/css/functional/size/border.css'; @import '@primer/primitives/dist/css/functional/size/breakpoints.css'; +@import '@primer/primitives/dist/css/functional/size/radius.css'; @import '@primer/primitives/dist/css/functional/size/size-coarse.css'; @import '@primer/primitives/dist/css/functional/size/size-fine.css'; @import '@primer/primitives/dist/css/functional/size/size.css'; diff --git a/packages/react/src/Card/Card.docs.json b/packages/react/src/Card/Card.docs.json index eb9394b272b..60805a2a823 100644 --- a/packages/react/src/Card/Card.docs.json +++ b/packages/react/src/Card/Card.docs.json @@ -26,6 +26,12 @@ "type": "'none' | 'condensed' | 'normal'", "defaultValue": "'normal'", "description": "Controls the internal padding of the Card." + }, + { + "name": "borderRadius", + "type": "'medium' | 'large'", + "defaultValue": "'large'", + "description": "Controls the border radius of the Card." } ], "subcomponents": [ diff --git a/packages/react/src/Card/Card.module.css b/packages/react/src/Card/Card.module.css index 7adf2cdffcd..0621009bef5 100644 --- a/packages/react/src/Card/Card.module.css +++ b/packages/react/src/Card/Card.module.css @@ -1,7 +1,6 @@ .Card { display: grid; position: relative; - border-radius: var(--borderRadius-large); overflow: hidden; grid-auto-rows: max-content auto; border: var(--borderWidth-thin) solid var(--borderColor-default); @@ -9,6 +8,14 @@ background-color: var(--bgColor-default); gap: var(--stack-gap-normal); + &[data-border-radius='large'] { + border-radius: var(--borderRadius-large); + } + + &[data-border-radius='medium'] { + border-radius: var(--borderRadius-medium); + } + &[data-padding='normal'] { /* stylelint-disable-next-line primer/spacing */ padding: var(--stack-padding-spacious); diff --git a/packages/react/src/Card/Card.stories.tsx b/packages/react/src/Card/Card.stories.tsx index eabaefc2b68..692ddde46a0 100644 --- a/packages/react/src/Card/Card.stories.tsx +++ b/packages/react/src/Card/Card.stories.tsx @@ -25,12 +25,13 @@ export const Default = () => { type PlaygroundArgs = { showIcon: boolean showMetadata: boolean - padding: 'normal' | 'none' + padding: 'none' | 'condensed' | 'normal' + borderRadius: 'medium' | 'large' } -export const Playground: StoryFn = ({showIcon, showMetadata, padding}) => ( +export const Playground: StoryFn = ({showIcon, showMetadata, padding, borderRadius}) => (
- + {showIcon && } Playground Card Experiment with the Card component and its subcomponents. @@ -43,6 +44,7 @@ Playground.args = { showIcon: true, showMetadata: true, padding: 'normal', + borderRadius: 'large', } Playground.argTypes = { @@ -59,4 +61,9 @@ Playground.argTypes = { options: ['none', 'condensed', 'normal'], description: 'Controls the internal padding of the Card', }, + borderRadius: { + control: {type: 'radio'}, + options: ['medium', 'large'], + description: 'Controls the border radius of the Card', + }, } diff --git a/packages/react/src/Card/Card.test.tsx b/packages/react/src/Card/Card.test.tsx index 902fb5f67af..817459d4766 100644 --- a/packages/react/src/Card/Card.test.tsx +++ b/packages/react/src/Card/Card.test.tsx @@ -153,4 +153,22 @@ describe('Card', () => { ) expect(container.firstChild).toHaveAttribute('data-padding', 'none') }) + + it('should set data-border-radius to large by default', () => { + const {container} = render( + + Default Radius + , + ) + expect(container.firstChild).toHaveAttribute('data-border-radius', 'large') + }) + + it('should set data-border-radius to medium when borderRadius="medium"', () => { + const {container} = render( + + Medium Radius + , + ) + expect(container.firstChild).toHaveAttribute('data-border-radius', 'medium') + }) }) diff --git a/packages/react/src/Card/Card.tsx b/packages/react/src/Card/Card.tsx index 82567d5b112..c6f81ffb311 100644 --- a/packages/react/src/Card/Card.tsx +++ b/packages/react/src/Card/Card.tsx @@ -14,6 +14,12 @@ export type CardProps = React.ComponentPropsWithoutRef<'div'> & { * @default 'normal' */ padding?: 'none' | 'condensed' | 'normal' + + /** + * Controls the border radius of the Card. + * @default 'large' + */ + borderRadius?: 'medium' | 'large' } type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' @@ -62,7 +68,7 @@ type MetadataProps = React.ComponentPropsWithoutRef<'div'> & { } const CardImpl = forwardRef(function Card( - {children, className, padding = 'normal', ...rest}, + {children, className, padding = 'normal', borderRadius = 'large', ...rest}, ref, ) { let icon: React.ReactNode = null @@ -96,14 +102,26 @@ const CardImpl = forwardRef(function Card( if (!hasSlotChildren) { return ( -
+
{children}
) } return ( -
+
{(image || icon) && (
{image || icon}
)}