feat: Card MD3 Expressive improvements - #5116
Open
pawelkata wants to merge 11 commits into
Open
Conversation
BREAKING CHANGE: Card.Content now always applies fixed padding, and Card.Actions no longer assigns button modes or child margins.
BREAKING CHANGE: Card now accepts media, header, content, and actions slots; arbitrary children composition and the mode prop are removed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
Cardwas still on the Paper 5 model: amodeprop, 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 ofView/Surface.This PR rewrites
Cardaround the Material 3 contract:mode+ arbitrary children with an explicitvariant(filled|elevated|outlined) and deterministic slots (media,header/title+subtitle+leading+trailing,content,actions).actionsslot.resolveCardVisualstoken contract, including MD3-correct color tokens (surfaceContainerHighestfor filled,outlineVariantfor outlined borders) and real ripple/state-layer feedback viaTouchableRippleinstead of a barePressable.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, andCardRenderCountExample.tsxfor the render-count regression check.Test plan
yarn jest— full suite passes (58 suites / 737 tests), including the rewrittenCard,Card.tokens, andSurfaceunit tests covering variants, states (hover/press/focus/drag/disabled), shapes, accessibility, and motion.yarn typecheck— passes, including the new@ts-expect-errorcases asserting the removedmode/children API is rejected at compile time.yarn lint— passes.CardExamplegallery in the example app (variants, custom headers, responsive cover media, disabled/dragged states, light/dark theme, platform-specific pressed/long-press messaging).