Skip to content

Card: incorporate adoption feedback - #8592

Draft
liuliu-dev wants to merge 3 commits into
mainfrom
improve/card-adoption-feedback
Draft

liuliu-dev wants to merge 3 commits into
mainfrom
improve/card-adoption-feedback

Conversation

@liuliu-dev

Copy link
Copy Markdown
Contributor

Related to github/primer#6672.

Address Card adoption feedback. Card remains draft; alpha promotion is out of scope.

Changelog

New

  • shadow={false} for shadowless cards.
  • Card.Link and Card.Button for whole-card interaction, with hover/focus indicators and independent secondary controls.
  • padding="spacious" for 24px padding.

Changed

  • Breaking: default/normal padding is now 16px in both layouts. Scale: none 0px, condensed 8px, normal 16px, spacious 24px.
  • Improve shrinking, equal-height layouts, bottom-aligned footers, and edge-to-edge images.
  • Update docs, stories, and tests.

Removed

None.

Rollout strategy

  • No changes needed in github/github-ui
  • Needs changes in github/github-ui
  • Ships with feature flag(s)
  • Not sure
  • None

Migration plan deferred. Consumers needing the previous 24px default must use padding="spacious". A major changeset records this change.

Testing & Reviewing

  • npm run build — passed.
  • npm test -- --run packages/react/src/Card/Card.test.tsx — 60 passed.
  • npx playwright test e2e/components/Card.test.ts --grep 'Whole-card interactions' --workers=2 — 11 passed, including accessibility checks.
  • npm run format:diff — passed. Targeted ESLint/Stylelint passed.
  • npm run lint:css -- --ignore-pattern 'coverage/**' — passed; unfiltered CSS lint fails on generated coverage files.
  • npm run type-check — blocked by 3 pre-existing SelectPanel/TreeView errors.
  • Linux visual regression/baseline updates remain pending. Full unit suite and full JavaScript lint were not run.

Review padding/shadow in Playground and keyboard/pointer behavior in With Link, With Button, and Custom Content.

Add optional shadows and whole-card heading actions, standardize padding, and improve custom card layouts. Record the default padding change as breaking; migration planning remains follow-up work.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@changeset-bot

changeset-bot Bot commented Oct 20, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: acd6f39

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 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 Oct 20, 2026
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ 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.

Add opt-in regular padding for 16px in either layout and replace the breaking padding changeset with a minor release note.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@primer-integration

primer-integration Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

Integration test results from github/github-ui PR:

Passed  Changes   Passed
Passed  CI   Passed
Running  VRT   Running
Passed  Projects   Passed

@github-actions github-actions Bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Oct 21, 2026

This branch was successfully deployed

2 active deployments
storybook-preview-8592 — acd6f39d Deployed Oct 21, 2026 by github-actions[bot]
github-pages — acd6f39d Deployed Oct 21, 2026 by liuliu-dev via deploy-preview #33842
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: failing Changes in this PR cause breaking changes in gh/gh

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant