feat(chip): modernize MD3 API#5002
Open
draggie wants to merge 1 commit into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
This PR refactors the Chip component toward the v6/MD3 API direction by introducing an explicit label prop, extracting Chip-specific MD3 tokens, and simplifying layout/color/state-layer handling to better match Material Design 3 behavior.
Changes:
- Added
labelprop (with deprecatedchildrenfallback) and updated examples/tests to use the new API. - Introduced
ChipTokensand refactored chip color/state-layer logic (getChipColors) to be token-driven. - Simplified Chip layout (leading/avatar/close handling) and removed press-time elevation animation overhead.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/Chip/tokens.ts | Adds Chip-specific MD3 dimension/color/opacity/elevation tokens used by the new implementation. |
| src/components/Chip/helpers.tsx | Refactors color calculations (container/border/label/icons/ripple) to use ChipTokens and MD3 state layer behavior. |
| src/components/Chip/Chip.tsx | Updates public API (label), simplifies layout/press handling, and adopts tokenized sizing/padding and ripple/state layer behavior. |
| src/components/tests/ListItem.test.tsx | Updates Chip usage to the new label prop. |
| src/components/tests/Chip.test.tsx | Updates Chip tests for label, adds coverage for label-vs-children precedence, and adds ripple/platform-color fallback test. |
| src/components/tests/snapshots/ListItem.test.tsx.snap | Snapshot updates reflecting new Chip layout/styling. |
| src/components/tests/snapshots/Chip.test.tsx.snap | Snapshot updates reflecting new Chip layout/styling and close button structure. |
| example/src/Examples/TooltipExample.tsx | Updates Chip usage to label. |
| example/src/Examples/TeamDetails.tsx | Updates Chip usage to label and refreshes chip row examples. |
| example/src/Examples/ListSectionExample.tsx | Updates Chip usage to label. |
| example/src/Examples/FABExample.tsx | Updates Chip usage to label. |
| example/src/Examples/ChipExample.tsx | Reworks Chip example screen to showcase MD3-oriented chip types/states using the new API. |
| example/src/Examples/CardExample.tsx | Updates Chip usage to label. |
satya164
requested changes
Jun 18, 2026
satya164
left a comment
Member
There was a problem hiding this comment.
Please remove old props and code entirely instead of deprecating them.
Author
|
@satya164 fixed |
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
Refactors
Chiptoward the v6/MD3 API and implementation direction.This change introduces an explicit
labelprop, extracts Chip-specific tokens, simplifies the internal layout, and removes press-time elevationanimation overhead. It also updates selected, outlined, disabled, icon/avatar, close icon, touch target, and state layer/ripple handling to better align
with Material Design 3.
The example app has been updated to showcase the new API and MD3-oriented Chip states.
Related issue
Closes #4931
Test plan
cd example/android./gradlew app:assembleDebug -x lint -x test --configure-on-demand --build-cache -PreactNativeDevServerPort=8081 -PreactNativeArchitectures=arm64- v8ayarn typescriptyarn lint-no-fixyarn test --runInBand --watchman=falseyarn docs build