fix: chip selected colors
Motivation
This PR addresses a bug and adds a new feature to the Chip component:
-
Bug fix: The
selectedColorprop was incorrectly applying to chips regardless of their selected state. This has been fixed by properly passing theselectedstate to thegetTextColorhelper function, soselectedColornow only applies when the chip is actually selected. -
New feature: Added support for the
selectedBackgroundColorprop. Previously, developers had to manually manage selected background colors by passing conditional styles likestyle={{ backgroundColor: selected ? "black" : "white" }}. Now theselectedBackgroundColorprop 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
themeprop, 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
selectedBackgroundColorprop
Related issue
Fixes selectedColor applying to unselected chips and adds the new selectedBackgroundColor prop for easier selected state styling.
Test plan
Functional changes:
- Run
yarn testto verify all 67 tests pass, including 3 new tests forselectedBackgroundColor - Run
yarn typescriptto verify type safety - Run
yarn lintto verify code style compliance
Visual verification:
- Run the example app:
yarn example start - Navigate to the Chip example screen
- Verify the following behavior:
- In "Custom selected color" section: Chips with
selectedColoronly show the custom color whenselected={true}, not whenselected={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
- In "Custom selected color" section: Chips with
Documentation:
- Review JSDoc for
themeprop inChip.tsx- should document all theme properties used - Review reorganized ChipExample sections for improved clarity
Screenshot(s)
Hey @theBGuy, thank you for your pull request 🤗. The documentation from this branch can be viewed here.