Skip to content

feat(chip): modernize MD3 API#5002

Open
draggie wants to merge 1 commit into
callstack:mainfrom
draggie:feat/chip-md3
Open

feat(chip): modernize MD3 API#5002
draggie wants to merge 1 commit into
callstack:mainfrom
draggie:feat/chip-md3

Conversation

@draggie

@draggie draggie commented Jun 16, 2026

Copy link
Copy Markdown

Motivation

Refactors Chip toward the v6/MD3 API and implementation direction.

This change introduces an explicit label prop, extracts Chip-specific tokens, simplifies the internal layout, and removes press-time elevation
animation 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

  • Verified Chip examples in the example app.
  • Verified Android example build:
    • cd example/android
    • ./gradlew app:assembleDebug -x lint -x test --configure-on-demand --build-cache -PreactNativeDevServerPort=8081 -PreactNativeArchitectures=arm64- v8a
  • Ran TypeScript:
    • yarn typescript
  • Ran lint:
    • yarn lint-no-fix
  • Ran tests:
    • yarn test --runInBand --watchman=false
  • Ran docs build:
    • yarn docs build
simulator_screenshot_B01F025C-C346-425D-A08F-CB46EEE951BA Screenshot_1781595724

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 label prop (with deprecated children fallback) and updated examples/tests to use the new API.
  • Introduced ChipTokens and 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 thread src/components/Chip/Chip.tsx
Comment thread src/components/Chip/Chip.tsx
Comment thread src/components/Chip/helpers.tsx Outdated
Comment thread src/components/Chip/helpers.tsx
Comment thread src/components/Chip/helpers.tsx Outdated
Comment thread src/components/Chip/Chip.tsx Outdated
Comment thread src/components/Chip/Chip.tsx

@satya164 satya164 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove old props and code entirely instead of deprecating them.

Comment thread src/components/Chip/Chip.tsx Outdated
Comment thread src/components/Chip/Chip.tsx Outdated
Comment thread src/components/Chip/Chip.tsx Outdated
Comment thread src/components/Chip/tokens.ts Outdated
Comment thread src/components/Chip/helpers.tsx
@draggie

draggie commented Jun 26, 2026

Copy link
Copy Markdown
Author

@satya164 fixed

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

refactor(chip): improve selection model and MD3 compliance

3 participants