Skip to content

Commit b13784e

Browse files
committed
feat(chip): migrate Chip to MD3 tokens and Reanimated
- 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
1 parent 52b9bba commit b13784e

16 files changed

Lines changed: 3329 additions & 1133 deletions

File tree

‎docs/6.x/docs/guides/migration.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,28 @@ You can specify a `testID` explicitly and use that value to query the component.
8080

8181
## Components
8282

83+
### Chip
84+
85+
#### Default mode
86+
87+
- The default **`mode`** changed from **`"flat"`** to **`"outlined"`**.
88+
89+
```tsx
90+
// Before (v5) - no mode passed, rendered flat
91+
<Chip onPress={() => {}}>Example Chip</Chip>
92+
93+
// After (v6) - no mode passed, renders outlined; pass mode="flat" to keep the old look
94+
<Chip mode="flat" onPress={() => {}}>Example Chip</Chip>
95+
```
96+
97+
#### Removed props
98+
99+
- **`compact`**, **`showSelectedOverlay`** were removed and have no direct equivalent.
100+
101+
#### New props
102+
103+
- **`trailingIcon`** / **`onTrailingIconPress`** / **`trailingIconAccessibilityLabel`** add a trailing action (e.g. a dropdown) independent of the close button. `trailingIcon` takes precedence over `onClose`'s close icon when both are specified.
104+
83105
### Appbar
84106

85107
The `style` props for `Appbar` and `Appbar.Header` no longer accept `Animated.Value` or `Animated.AnimatedInterpolation`. They only accept static styles.

‎docs/public/gallery/chip-dark.png‎

25.5 KB
Loading

‎docs/public/gallery/chip.png‎

26.6 KB
Loading

‎docs/public/screenshots/chip.png‎

248 KB
Loading

‎docs/src/data/screenshots.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,7 @@ export const screenshots = {
5151
enabled: 'screenshots/checkbox-enabled.ios.png',
5252
disabled: 'screenshots/checkbox-disabled.ios.png',
5353
},
54-
Chip: {
55-
flat: 'screenshots/chip-1.png',
56-
outlined: 'screenshots/chip-2.png',
57-
},
54+
Chip: 'screenshots/chip.png',
5855
DataTable: 'screenshots/data-table-full-width.png',
5956
'DataTable.Cell': 'screenshots/data-table-row-cell.png',
6057
'DataTable.Header': 'screenshots/data-table-header.png',

0 commit comments

Comments
 (0)