- 
          
 - 
                Notifications
    
You must be signed in to change notification settings  - 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)