Skip to content

@kondee/chip md3 - #5081

Draft
k0ndee wants to merge 3 commits into
callstack:mainfrom
k0ndee:@kondee/chip-md3
Draft

@kondee/chip md3#5081
k0ndee wants to merge 3 commits into
callstack:mainfrom
k0ndee:@kondee/chip-md3

Conversation

@k0ndee

@k0ndee k0ndee commented Aug 27, 2026

Copy link
Copy Markdown

Motivation

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

  • Extracts Chip-specific sizing, color, and typescale values into a dedicated tokens.ts file, following the pattern used by other recently modernized components (e.g. Badge).
  • Simplifies the internal layout: the ripple/state-layer is now rendered in its own layer behind the content instead of being nested inside it, and content spacing is derived from tokens instead of inline math.
  • Removes the press-time elevation animation (Animated.timing driven scale/elevation on press) in favor of a static elevation derived from the elevated and disabled props.
  • Reworks selected, outlined, disabled, icon/avatar, and close-icon color resolution (getChipColors in utils.ts, renamed from helpers.tsx) to better align with MD3 state and color roles, including a dedicated ripple color and an avatar selected-overlay color.
  • Adds a proper minimum touch target (48dp) via hitSlop, and moves the close icon into TouchableRipple for consistent ripple/state-layer feedback.
  • Removes the compact and showSelectedOverlay props, which are no longer part of the MD3-aligned API (the selected overlay is now handled automatically for avatars).
  • Changes the default mode from flat to outlined.

The example app has been updated to match the new API (e.g. dropping now-removed showSelectedOverlay usage) and to showcase MD3-oriented Chip states.

Related issue

Closes #4931

Test plan

  • Verified Chip examples in the example app.
  • Ran typecheck:
    yarn typecheck
    
  • Ran lint:
    yarn lint
    
  • Ran tests:
    yarn test --runInBand --watchman=false
    
  • Ran docs build:
    yarn docs build
    
Screenshot_1787836208

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.

refactor(chip): improve selection model and MD3 compliance

2 participants