react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

fix: chip selected colors

Open theBGuy opened this issue 2 months ago • 1 comments

Motivation

This PR addresses a bug and adds a new feature to the Chip component:

  1. Bug fix: The selectedColor prop was incorrectly applying to chips regardless of their selected state. This has been fixed by properly passing the selected state to the getTextColor helper function, so selectedColor now only applies when the chip is actually selected.

  2. New feature: Added support for the selectedBackgroundColor prop. Previously, developers had to manually manage selected background colors by passing conditional styles like style={{ backgroundColor: selected ? "black" : "white" }}. Now the selectedBackgroundColor prop provides a declarative way to specify the background color for selected chips, making the API more consistent and easier to use.

Additionally, this PR improves documentation and examples:

  • Added comprehensive JSDoc documentation for the theme prop, detailing which theme properties are used and for what purpose (separated by V3/V2 themes)
  • Reorganized the ChipExample into logical subsections for better clarity and easier navigation
  • Added examples demonstrating the new selectedBackgroundColor prop

Related issue

Fixes selectedColor applying to unselected chips and adds the new selectedBackgroundColor prop for easier selected state styling.

Test plan

Functional changes:

  1. Run yarn test to verify all 67 tests pass, including 3 new tests for selectedBackgroundColor
  2. Run yarn typescript to verify type safety
  3. Run yarn lint to verify code style compliance

Visual verification:

  1. Run the example app: yarn example start
  2. Navigate to the Chip example screen
  3. Verify the following behavior:
    • In "Custom selected color" section: Chips with selectedColor only show the custom color when selected={true}, not when selected={false}
    • In "Custom styling" section: Selected chip with selectedBackgroundColor="rgba(0, 0, 0, 1)" displays black background with white text (previously would have required conditional style prop)
    • Toggle chips between selected/unselected states to verify colors apply correctly

Documentation:

  • Review JSDoc for theme prop in Chip.tsx - should document all theme properties used
  • Review reorganized ChipExample sections for improved clarity

Screenshot(s)

image

theBGuy avatar Oct 26 '25 22:10 theBGuy

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

callstack-bot avatar Oct 26 '25 22:10 callstack-bot