Card: Add borderRadius prop (#7763)

Co-authored-by: liuliu-dev <6688812+liuliu-dev@users.noreply.github.com>

Author: liuliu-dev

.changeset/swift-grapes-warn.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add borderRadius prop to Card component.

.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-high-contrast-linux.png

@@ -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';

.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-high-contrast-linux.png

@@ -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": [

packages/react/.storybook/primitives-v8.css

@@ -1,14 +1,21 @@
 .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);
   box-shadow: var(--shadow-resting-small);
   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);

packages/react/src/Card/Card.docs.json

@@ -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<PlaygroundArgs> = ({showIcon, showMetadata, padding}) => (
+export const Playground: StoryFn<PlaygroundArgs> = ({showIcon, showMetadata, padding, borderRadius}) => (
   <div style={{maxWidth: '400px'}}>
-    <Card padding={padding}>
+    <Card padding={padding} borderRadius={borderRadius}>
       {showIcon && <Card.Icon icon={RocketIcon} />}
       <Card.Heading>Playground Card</Card.Heading>
       <Card.Description>Experiment with the Card component and its subcomponents.</Card.Description>
@@ -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',
+  },
 }

packages/react/src/Card/Card.module.css

@@ -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(
+      <Card>
+        <Card.Heading>Default Radius</Card.Heading>
+      </Card>,
+    )
+    expect(container.firstChild).toHaveAttribute('data-border-radius', 'large')
+  })
+
+  it('should set data-border-radius to medium when borderRadius="medium"', () => {
+    const {container} = render(
+      <Card borderRadius="medium">
+        <Card.Heading>Medium Radius</Card.Heading>
+      </Card>,
+    )
+    expect(container.firstChild).toHaveAttribute('data-border-radius', 'medium')
+  })
 })

packages/react/src/Card/Card.stories.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<HTMLDivElement, CardProps>(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<HTMLDivElement, CardProps>(function Card(
 
   if (!hasSlotChildren) {
     return (
-      <div ref={ref} className={clsx(classes.Card, className)} data-padding={padding} {...rest}>
+      <div
+        ref={ref}
+        className={clsx(classes.Card, className)}
+        data-padding={padding}
+        data-border-radius={borderRadius}
+        {...rest}
+      >
         {children}
       </div>
     )
   }
 
   return (
-    <div ref={ref} className={clsx(classes.Card, className)} data-padding={padding} {...rest}>
+    <div
+      ref={ref}
+      className={clsx(classes.Card, className)}
+      data-padding={padding}
+      data-border-radius={borderRadius}
+      {...rest}
+    >
       {(image || icon) && (
         <div className={clsx(classes.CardHeader, image && classes.CardHeaderEdgeToEdge)}>{image || icon}</div>
       )}