Skip to content

feat: Card MD3 Expressive improvements - #5116

Open
pawelkata wants to merge 11 commits into
callstack:mainfrom
pawelkata:expressive-card
Open

feat: Card MD3 Expressive improvements#5116
pawelkata wants to merge 11 commits into
callstack:mainfrom
pawelkata:expressive-card

Conversation

@pawelkata

Copy link
Copy Markdown

Motivation

Card was still on the Paper 5 model: a mode prop, arbitrary children composition, and no first-class support for Material 3 expressive states (hover, focus, press, drag) or emphasis tokens. This made it hard to build Cards that match the Material 3 spec — variant-driven container/outline/elevation colors, state layers, focus indicators, and motion — without consumers hand-rolling that behavior on top of View/Surface.

This PR rewrites Card around the Material 3 contract:

  • Replaces mode + arbitrary children with an explicit variant (filled | elevated | outlined) and deterministic slots (media, header/title+subtitle+leading+trailing, content, actions).
  • Adds a single actionable target model: a Card with an interaction handler becomes one accessible control with button semantics; a Card without one stays a neutral grouping container, leaving independent actions to its actions slot.
  • Introduces Material state layers, keyboard focus indicators, hover/press/drag visuals, and animated elevation/outline transitions driven by a resolveCardVisuals token contract, including MD3-correct color tokens (surfaceContainerHighest for filled, outlineVariant for outlined borders) and real ripple/state-layer feedback via TouchableRipple instead of a bare Pressable.
  • Publishes the v6 Card contract and a Paper 5 → 6 migration guide.

Related issue

Addresses #4929.

Screenshots / Videos

See the new "Expressive Card gallery" example (example/src/Examples/CardExample.tsx) for variants, states, shapes, and light/dark/platform verification, and CardRenderCountExample.tsx for the render-count regression check.

Test plan

  • yarn jest — full suite passes (58 suites / 737 tests), including the rewritten Card, Card.tokens, and Surface unit tests covering variants, states (hover/press/focus/drag/disabled), shapes, accessibility, and motion.
  • yarn typecheck — passes, including the new @ts-expect-error cases asserting the removed mode/children API is rejected at compile time.
  • yarn lint — passes.
  • Manually exercised the CardExample gallery in the example app (variants, custom headers, responsive cover media, disabled/dragged states, light/dark theme, platform-specific pressed/long-press messaging).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant