-
-
Couldn't load subscription status.
- Fork 2.2k
fix: chip selected colors #4825
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
theBGuy
wants to merge
10
commits into
callstack:main
Choose a base branch
from
theBGuy:fix/chip-selected-colors
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 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
- add cases for passing a `selectedColor` and confirming it is there for `selected: true` and not for `selected: false`
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
themeprop, detailing which theme properties are used and for what purpose (separated by V3/V2 themes)selectedBackgroundColorpropRelated issue
Fixes
selectedColorapplying to unselected chips and adds the newselectedBackgroundColorprop for easier selected state styling.Test plan
Functional changes:
yarn testto verify all 67 tests pass, including 3 new tests forselectedBackgroundColoryarn typescriptto verify type safetyyarn lintto verify code style complianceVisual verification:
yarn example startselectedColoronly show the custom color whenselected={true}, not whenselected={false}selectedBackgroundColor="rgba(0, 0, 0, 1)"displays black background with white text (previously would have required conditional style prop)Documentation:
themeprop inChip.tsx- should document all theme properties usedScreenshot(s)