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. |
Comment on lines
176
to
+178
| const Chip = ({ | ||
| mode = 'flat', | ||
| mode = 'outlined', | ||
| label, |
Comment on lines
+420
to
423
| touchable: { | ||
| height: '100%', | ||
| flexShrink: 1, | ||
| }, |
Comment on lines
47
to
+53
| if (disabled) { | ||
| return colors.onSurface; | ||
| return isOutlined | ||
| ? 'transparent' | ||
| : withAlpha( | ||
| theme.colors[ChipTokens.disabledColor], | ||
| ChipTokens.disabledContainer | ||
| ); |
Comment on lines
+86
to
91
| if (disabled) { | ||
| return withAlpha( | ||
| theme.colors[ChipTokens.disabledColor], | ||
| ChipTokens.disabledOutline | ||
| ); | ||
| } |
Comment on lines
+236
to
+239
| avatarOverlayColor: withAlpha( | ||
| theme.colors.scrim, | ||
| ChipTokens.selectedAvatarOverlay | ||
| ), |
Comment on lines
411
to
+418
| container: { | ||
| borderWidth: StyleSheet.hairlineWidth, | ||
| height: ChipTokens.containerHeight, | ||
| borderWidth: ChipTokens.outlineWidth, | ||
| borderStyle: 'solid', | ||
| flexDirection: Platform.select({ default: 'column', web: 'row' }), | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| alignSelf: 'flex-start', | ||
| overflow: 'hidden', |
Comment on lines
+391
to
+396
| style={({ pressed }) => [ | ||
| styles.closeButton, | ||
| Platform.OS === 'web' && pressed | ||
| ? { backgroundColor: rippleColor } | ||
| : null, | ||
| ]} |
satya164
requested changes
Jun 18, 2026
satya164
left a comment
satya164
left a comment
Member
There was a problem hiding this comment.
Please remove old props and code entirely instead of deprecating them.
Comment on lines
36
to
+44
| /** | ||
| * Text content of the `Chip`. | ||
| * Text label of the `Chip`. | ||
| */ | ||
| label?: string; | ||
| /** | ||
| * @deprecated Use `label` instead. Children are kept as a compatibility | ||
| * fallback and should be plain text. | ||
| */ | ||
| children: React.ReactNode; | ||
| children?: React.ReactNode; |
Member
There was a problem hiding this comment.
Revert this. There shouldn't be unnecessary breaking changes.
Comment on lines
66
to
70
| /** | ||
| * @supported Available in v5.x with theme version 3 | ||
| * Whether to display overlay on selected chip | ||
| * @deprecated Selected chips use the MD3 selected container and state layer. | ||
| * This prop is kept as a compatibility overlay. | ||
| */ | ||
| showSelectedOverlay?: boolean; |
Comment on lines
117
to
121
| /** | ||
| * @supported Available in v5.x with theme version 3 | ||
| * Sets smaller horizontal paddings `12dp` around label, when there is only label. | ||
| * @deprecated MD3 chips have a fixed density. This only reduces label-only | ||
| * horizontal padding for compatibility. | ||
| */ | ||
| compact?: boolean; |
Comment on lines
+55
to
+60
| export const ChipTokens = { | ||
| ...dimensions, | ||
| ...colors, | ||
| ...opacity, | ||
| ...elevation, | ||
| }; |
Member
There was a problem hiding this comment.
Export the constants directly instead of creating an additional object just to export.
Comment on lines
+86
to
+95
| if (disabled) { | ||
| return withAlpha( | ||
| theme.colors[ChipTokens.disabledColor], | ||
| ChipTokens.disabledOutline | ||
| ); | ||
| } | ||
|
|
||
| return colors.secondaryContainer; | ||
| if (selectedColor !== undefined) { | ||
| return withAlpha(selectedColor, 0.29); | ||
| } |
Member
There was a problem hiding this comment.
Lets avoid color manipulation and use tokens directly. If opacity etc. is needed, consider applying it to the view if possible.
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