Card: Add borderRadius prop by liuliu-dev · Pull Request #7763 · primer/react

liuliu-dev · 2026-04-16T16:29:55Z

Part of https://github.com/github/primer/issues/6561

Adds a borderRadius prop to the experimental Card component with 'medium' and 'large' options (defaults to 'large').

Changelog

New

Changed

Removed

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

changeset-bot · 2026-04-16T16:30:00Z

🦋 Changeset detected

Latest commit: 21f2ce5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-04-16T16:30:29Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

Copilot

Pull request overview

Adds a borderRadius prop to the experimental Card component to let consumers choose between 'medium' and 'large' corner rounding (defaulting to 'large'), aligning Card styling with selectable radius tokens.

Changes:

Introduces borderRadius?: 'medium' | 'large' on Card, defaulting to 'large', and exposes it via data-border-radius.
Updates Card CSS to apply radius based on data-border-radius rather than a fixed value.
Updates Storybook playground controls and generated docs metadata to include the new prop; adds a changeset.

Show a summary per file

File	Description
packages/react/src/Card/Card.tsx	Adds `borderRadius` prop with default and forwards it as `data-border-radius` on the root element.
packages/react/src/Card/Card.stories.tsx	Extends the Playground story args/controls to include `borderRadius`.
packages/react/src/Card/Card.module.css	Applies `border-radius` via `[data-border-radius]` selectors for `'medium'`/`'large'`.
packages/react/src/Card/Card.docs.json	Documents the new `borderRadius` prop for the docs pipeline.
.changeset/swift-grapes-warn.md	Announces the API addition in release notes (currently marked as a patch).

Copilot's findings

Files reviewed: 5/5 changed files
Comments generated: 2

Copilot · 2026-04-16T22:06:27Z

+    <div
+      ref={ref}
+      className={clsx(classes.Card, className)}
+      data-padding={padding}
+      data-border-radius={borderRadius}
+      {...rest}


New borderRadius behavior is not covered by unit tests. Since this component already asserts data-padding defaults/overrides in Card.test.tsx, please add similar assertions for data-border-radius (default 'large' and when borderRadius="medium").

Copilot · 2026-04-16T22:06:27Z

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch


This changeset marks the release as patch, but the versioning guide indicates that adding a prop is a minor bump ("Props → A prop is added → minor"). Please update the changeset to minor (or document why this is an exception).

Suggested change

'@primer/react': patch

'@primer/react': minor

lukasoppermann · 2026-04-17T06:24:02Z

@liuliu-dev somehow borderRadius is not loaded. Could it be that we are not loading primer.css and also not radius.css in storybook?

lukasoppermann · 2026-04-17T06:30:27Z

I also don't understand why the car has those outdated fallback values:

They don't seem to be in your css module. 😕

github-actions · 2026-04-17T06:30:39Z

Uh oh! @lukasoppermann, at least one image you shared is missing helpful alt text. Check #7763 (comment) to fix the following violations:

Images should have meaningful alternative text (alt text) at line 2

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

primer-integration · 2026-04-17T17:43:24Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/18841

primer-integration · 2026-04-17T17:59:53Z

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!

primer-integration · 2026-04-17T17:59:53Z

Integration test results from github/github-ui:

CI Running
VRT Passed
Projects Passed

liuliu-dev · 2026-04-17T18:24:46Z

@lukasoppermann good catch! I imported radius.css in storybook, the radius should be loading now.

I asked copilot about the fallbacks:

Those fallback values (var(--color-canvas-default), var(--color-shadow-small)) aren't in the Card CSS,
they're added automatically by the postcss-preset-primer PostCSS plugin during build.
It injects legacy token fallbacks for backwards compatibility. Not something specific to the Card component.

border radius

54af03d

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Apr 16, 2026

liuliu-dev deployed to github-pages April 16, 2026 16:40 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7763 April 16, 2026 16:40 Inactive

liuliu-dev added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Apr 16, 2026

liuliu-dev marked this pull request as ready for review April 16, 2026 22:04

liuliu-dev requested a review from a team as a code owner April 16, 2026 22:04

liuliu-dev requested review from Copilot, hectahertz and lukasoppermann April 16, 2026 22:04

Copilot started reviewing on behalf of liuliu-dev April 16, 2026 22:04 View session

Copilot AI reviewed Apr 16, 2026

View reviewed changes

minor, tests

b855e89

liuliu-dev deployed to github-pages April 16, 2026 23:51 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7763 April 16, 2026 23:51 Inactive

add radius primitives to storybook

9e37b27

liuliu-dev deployed to github-pages April 17, 2026 16:34 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7763 April 17, 2026 16:34 Inactive

liuliu-dev deployed to github-pages April 17, 2026 16:49 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7763 April 17, 2026 16:49 Inactive

liuliu-dev deployed to github-pages April 17, 2026 16:59 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7763 April 17, 2026 16:59 Inactive

liuliu-dev added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 17, 2026

test(vrt): update snapshots

fd11a49

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 17, 2026

primer bot deployed to github-pages April 17, 2026 17:26 View deployment

github-actions bot temporarily deployed to storybook-preview-7763 April 17, 2026 17:26 Inactive

snapshot revert

21f2ce5

liuliu-dev deployed to github-pages April 17, 2026 17:37 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7763 April 17, 2026 17:37 View deployment

liuliu-dev removed the request for review from hectahertz April 20, 2026 18:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Card: Add borderRadius prop#7763

Card: Add borderRadius prop#7763
liuliu-dev wants to merge 5 commits intomainfrom
liuliu/card-border-radius

liuliu-dev commented Apr 16, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 16, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

lukasoppermann commented Apr 17, 2026 •

edited

Loading

Uh oh!

lukasoppermann commented Apr 17, 2026

Uh oh!

github-actions bot commented Apr 17, 2026

Uh oh!

primer-integration bot commented Apr 17, 2026

Uh oh!

primer-integration bot commented Apr 17, 2026

Uh oh!

primer-integration bot commented Apr 17, 2026

Uh oh!

liuliu-dev commented Apr 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

liuliu-dev commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Apr 16, 2026

⚠️ Action required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

lukasoppermann commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lukasoppermann commented Apr 17, 2026

Uh oh!

github-actions bot commented Apr 17, 2026

Uh oh!

primer-integration bot commented Apr 17, 2026

Uh oh!

primer-integration bot commented Apr 17, 2026

Uh oh!

primer-integration bot commented Apr 17, 2026

Uh oh!

liuliu-dev commented Apr 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

liuliu-dev commented Apr 16, 2026 •

edited

Loading

changeset-bot bot commented Apr 16, 2026 •

edited

Loading

lukasoppermann commented Apr 17, 2026 •

edited

Loading