feat(chip): distinguish flat-mode selected by background color

[fabriziocucci]

Summary

Adds visual distinction between selected and unselected flat mode chips. Today Chip mode="flat" renders with theme.colors.secondaryContainer for BOTH the unselected and selected states. Selection is only visible via the check glyph (when showSelectedCheck is set). MD3 spec calls for flat chips to use a transparent fill when unselected and the secondaryContainer token only when selected.

This addresses one bullet from #4931 / discussion #4949 (Chip section):

flat mode background is always secondaryContainer regardless of selected state. Unselected assist/suggestion chips should have no fill (transparent); only selected filter chips use secondaryContainer.

MD3 spec reference: https://m3.material.io/components/chips/specs

Behavior

After the patch, with default props:

Mode	Unselected	Selected
flat	'transparent' fill	theme.colors.secondaryContainer fill
outlined	theme.colors.surface fill (unchanged)	theme.colors.surface fill (unchanged; outlined chips show selection via the check glyph, not via background change)

Composition with existing props (precedence rules)

1. customBackgroundColor wins (passed via style={{ backgroundColor: ... }}): an explicit override takes precedence over both the unselected and selected token paths.
2. disabled wins: disabled tokens take precedence over the selected fill. Flat-disabled-selected returns surfaceContainerLow; outlined-disabled-selected returns 'transparent'. Matches MD3.
3. No fix-induced behavior change for outlined chips. Outlined-unselected stays surface and outlined-selected stays surface. Outlined chips show selection via the check glyph only, as before.

Implementation

src/components/Chip/helpers.tsx:

• getDefaultBackgroundColor: flat branch returns 'transparent' (was colors.secondaryContainer).
• getSelectedBackgroundColor: no longer delegates to getBackgroundColor. New body that branches on disabled, isOutlined and customBackgroundColor to return the correct selected color for each composition.

Net: +18 / -7 lines in helpers.tsx. Outlined mode unchanged. No new public props.

Testing

Visually verified on iOS Simulator (iPhone 17 Pro, iOS 18) and Android Emulator (Pixel 9, API 35) across light and dark themes using a standalone Expo app with the patch applied via patch-package.

Unit tests for the new behavior added in src/components/__tests__/Chip.test.tsx (4 new cases on top of the existing 33):

• should differ from selectedBackgroundColor for theme version 3, flat mode (the key behavioral contract this PR establishes)
• should return surface color, for theme version 3, outlined mode (selected, locks down outlined behavior is unchanged)
• should return disabled fill, for theme version 3, flat mode + disabled (selected, disabled composition)
• should return transparent for theme version 3, outlined mode + disabled (selected, disabled + outlined composition)

The existing should return theme color, for theme version 3, flat mode (background-color block) was updated to assert 'transparent' instead of secondaryContainer (the test that previously codified the bug).

4 chip snapshots updated (onPress, icon, close button, custom close button) plus 1 ListItem snapshot (it renders a Chip and captured the old background). All 742 unit tests pass.

Screenshots:

iOS

Theme	Before	After
Light
Dark

Android

Theme	Before	After
Light
Dark

Observations:

• The dark-mode "after" screenshots show the same secondaryContainer token but resolved through the dark theme palette. Patch is token-based so any custom theme passed via PaperProvider Just Works.
• The "flat, no check icon" sandbox row makes the bug most visible: without the check glyph, the BEFORE selected and unselected chips are visually identical.
• Composition cases (flat + disabled, flat + custom backgroundColor) were each verified visually.

What's NOT in this PR

These were considered and intentionally deferred (each could be its own PR):

• Separating the four MD3 chip types (assist / filter / input / suggestion) into distinct color logic (separate React Native Paper: MD3 Component Review #4949 bullet about adding a type prop)
• elevated=true not changing background color (separate React Native Paper: MD3 Component Review #4949 bullet)
• Per-type/per-state icon color (currently hardcoded primary, separate React Native Paper: MD3 Component Review #4949 bullet)
• Wiring up or removing the unused showSelectedOverlay prop (separate React Native Paper: MD3 Component Review #4949 bullet)
• Switching the close button from bare Pressable to TouchableRipple for the MD3 state layer (separate React Native Paper: MD3 Component Review #4949 bullet)

Conventional commit

feat(chip): distinguish flat-mode selected by background color

Related

• Issue: refactor(chip): improve selection model and MD3 compliance #4931
• Discussion: React Native Paper: MD3 Component Review #4949 (Chip section)
• MD3 spec: https://m3.material.io/components/chips/specs
• Previous PR in this series: feat(checkbox): add error state via MD3 error tokens #4955 (Checkbox error state, merged)

cc @adrcotfas

[Copilot]

Pull request overview

Updates Chip MD3 color logic so mode="flat" chips use a transparent fill when unselected and theme.colors.secondaryContainer only when selected, aligning selection visibility with MD3 guidance while keeping outlined-chip behavior unchanged.

Changes:

• Changed default (unselected) flat-chip background from secondaryContainer to 'transparent'.
• Refactored selected-chip background color selection to explicitly handle disabled/outlined cases and preserve existing outlined behavior.
• Updated unit tests and snapshots to lock in the new flat/selected background behavior and related compositions.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
src/components/Chip/helpers.tsx	Adjusts default and selected background token selection for flat chips.
src/components/__tests__/Chip.test.tsx	Adds/updates unit tests covering new background behavior and compositions.
src/components/__tests__/__snapshots__/Chip.test.tsx.snap	Updates chip snapshots reflecting transparent unselected flat background.
src/components/__tests__/__snapshots__/ListItem.test.tsx.snap	Updates ListItem snapshot impacted by Chip background change.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[callstack-bot]

Hey @fabriziocucci, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[adrcotfas]

I think that before changing the background color we should lay the foundation for the updated chips which should be splitting into types - there is no "flat" in the specs.
Also, please double check the specs and visual examples: https://m3.material.io/components/chips/specs.
This PR removes the background from flat chips but there's no equivalent for that in the specs where all chips have at least an outline.