feat: implement Chip component by k0ndee · Pull Request #5081 · callstack/react-native-paper

k0ndee · 2026-08-27T13:16:32Z

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

Related PRs

Based on the #5002
Wait for #5084 to be merged to take advantage of the focus indicators in TouchableRipple

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
```

JKobrynski · 2026-09-01T11:16:43Z

-              ]}
-            >
-              {icon ? (
+        <View style={styles.rippleContent} />


Try keeping the label inside TouchableRipple, or deriving aria-label from it - as a pointerEvents="none" sibling it never reaches the button, so getByRole('button', { name: 'Example Chip' }) resolves on main and returns null here. Worth a test to pin it.

JKobrynski · 2026-09-01T11:17:17Z

+  selectedIconColor: 'onSecondaryContainer',
+  trailingIconColor: 'onSurfaceVariant',
+  selectedTrailingIconColor: 'onSecondaryContainer',
+  outlineColor: 'outline',


Was outline intentional here? main uses outlineVariant (helpers.tsx:48), and all four live chip namespaces resolve to outline-variant — the only token giving outline is md.comp.input-chip.outline.color, which is deprecated.

JKobrynski · 2026-09-01T11:17:50Z

+          theme={theme}
+        >
+          <Icon
+            source={hasTrailingIcon ? trailingIcon! : (closeIcon ?? 'close')}


Try dropping the ! - it typechecks without one, and @typescript-eslint/no-non-null-assertion is error-level on main (eslint.config.mjs:150).

JKobrynski · 2026-09-01T11:18:27Z

+          aria-label={
+            hasTrailingIcon
+              ? trailingIconAccessibilityLabel
+              : closeIconAccessibilityLabel
+          }


Worth giving trailingIconAccessibilityLabel a default, or requiring it alongside onTrailingIconPress - <Chip trailingIcon="menu-down" onTrailingIconPress={…}> currently renders a role="button" with no accessible name, where the close button defaults to 'Close'.

JKobrynski · 2026-09-01T11:19:08Z

 const styles = StyleSheet.create({
  container: {
-    borderWidth: StyleSheet.hairlineWidth,
+    height: ChipTokens.containerHeight,


Try minHeight here - with overflow: 'hidden' on the content (line 438) a fixed height clips the label at larger system font sizes. main reached the same 32dp via lineHeight: 20 plus marginVertical: 6, so it scaled.

- height: ChipTokens.containerHeight, + minHeight: ChipTokens.containerHeight,

JKobrynski · 2026-09-01T11:20:03Z

 */
 const Chip = ({
-  mode = 'flat',
+  mode = 'outlined',


Worth adding a Chip section to migration.md - compact and showSelectedOverlay are gone and this default flip changes every existing <Chip>. The TextInput entry is a template, and the generated docs are already done.

JKobrynski · 2026-09-01T11:35:16Z

+  disabledColor: 'onSurface',
+} as const satisfies Record<string, ColorRole>;
+
+export const ChipTokens = { ...sizes, ...colors };


Worth settling this one before it lands: @satya164 asked for the constants to be exported directly on #5002, but Checkbox, Switch and FAB all use the wrapper. Which shape should Chip follow?

JKobrynski · 2026-09-02T13:13:30Z

#5078 landed and reworked Surface - the container prop is gone, and backgroundColor and borderRadius are props now rather than style keys. Chip on main is already ported, so it might be easier to rebase and start from that version than to resolve the conflicts by hand. The custom-colour example will need updating too. @k0ndee

JKobrynski · 2026-09-02T13:31:19Z

-    color: textColor,
-    ...theme.fonts.labelLarge,
+  const leftPadding = hasAvatar
+    ? ChipTokens.avatarLeadingPadding


This reserves the whole 32dp touch target as padding, so the label ends up ~15dp from the trailing icon where the specs page says 8dp between elements. Should this count the icon rather than the touch target?

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

github-actions · 2026-09-23T08:44:54Z

Found potential problems with the pull request:

The description is too long. Please keep it under 1000 characters.

- rework Chip around a dedicated tokens.ts (colors/sizes) and utils.ts (was helpers.tsx), replacing legacy RN-core Animated with Surface's Reanimated-driven elevation - add trailingIcon prop independent of onClose, plus M3 assist/filter/ input/suggestion example variants - wire up hover-driven elevation, focus rings (chip body + trailing icon), and focus-outline darkening - fix disabled+selected chips losing their filled background, and trailing-icon-to-label spacing using the touch target instead of the icon's own size

k0ndee marked this pull request as ready for review August 31, 2026 12:22

JKobrynski mentioned this pull request Sep 1, 2026

feat(chip): modernize MD3 API #5002

Closed

JKobrynski reviewed Sep 1, 2026

View reviewed changes

JKobrynski reviewed Sep 2, 2026

View reviewed changes

k0ndee force-pushed the @kondee/chip-md3 branch from ed1803a to b13784e Compare September 2, 2026 15:54

satya164 added the Contributor: Internal label Sep 3, 2026

k0ndee marked this pull request as draft September 3, 2026 10:45

k0ndee force-pushed the @kondee/chip-md3 branch from b13784e to b93dc8f Compare September 14, 2026 10:56

satya164 requested a balanced review from Copilot September 15, 2026 20:32

Copilot AI reviewed Sep 15, 2026

k0ndee changed the title ~~@kondee/chip md3~~ feat: implement Chip component Sep 23, 2026

k0ndee added 2 commits September 23, 2026 10:51

fix: add dedicated background and radius props

e74866d

k0ndee force-pushed the @kondee/chip-md3 branch from 290eb3a to e74866d Compare September 23, 2026 08:52

Navigation Menu

Uh oh!

feat: implement Chip component - #5081

feat: implement Chip component#5081
k0ndee wants to merge 2 commits into
callstack:mainfrom
k0ndee:@kondee/chip-md3

k0ndee commented Aug 27, 2026 •

edited

Loading

Uh oh!

JKobrynski Sep 1, 2026

Uh oh!

JKobrynski Sep 1, 2026

Uh oh!

JKobrynski Sep 1, 2026

Uh oh!

JKobrynski Sep 1, 2026

Uh oh!

JKobrynski Sep 1, 2026

Uh oh!

JKobrynski Sep 1, 2026

Uh oh!

JKobrynski Sep 1, 2026

Uh oh!

JKobrynski commented Sep 2, 2026 •

edited

Loading

Uh oh!

JKobrynski Sep 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

github-actions Bot commented Sep 23, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

k0ndee commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Related issue

Related PRs

Test plan

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JKobrynski commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Sep 23, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

k0ndee commented Aug 27, 2026 •

edited

Loading

JKobrynski commented Sep 2, 2026 •

edited

Loading