Skip to content

Conversation

@theBGuy
Copy link

@theBGuy theBGuy commented Oct 26, 2025

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

- Fix selectedColor applying even when chip not selected by passing selected state to getTextColor helper
- Add selectedBackgroundColor prop to specify custom background for selected chips
- Update helper functions to handle new prop and improve selected state color logic
- Document theme variables usage in theme prop JSDoc
- add selected state where necessary in existing tests
- remove usage of selectedBackgroundColor prop from outdated tests
- add test cases demonstrating selectedBackgroundColor prop behavior
- group custom chip examples into logical subsections
- add custom border radius examples (V3 only)
- separate custom background color demonstrations
- organize custom selected color examples with variations
- consolidate custom styling examples (text, close icon, onLongPress)
- improve full width and long text examples section
cursor[bot]

This comment was marked as outdated.

@callstack-bot
Copy link

callstack-bot commented Oct 26, 2025

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

- add cases for passing a `selectedColor` and confirming it is there for `selected: true` and not for `selected: false`
cursor[bot]

This comment was marked as outdated.

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.

2 participants