#FFF circle color picker selected state on white background

[proevilz]

If you use a CirclePicker color of #fff (white) and put it on a white background, the box shadow color is white and the 'selected' circle that appears is also... white. This leaves you with basically an invisible color picker.

I would propose that if one of the CirclePicker colors is #fff then make the box shadow color #000 by default and change the 'selected' circle that appears to additionally include a #000 colored border on it.

I know I can override this with CSS but I feel this shouldn't need to be overridden.

I would make a 'pull request' to offer these changes for you but I don't quite understand how pull requests work. I don't get why it's asking me to compare branches when all I wish to do is submit a single file.

Edit With that said, how exactly do I override the default CSS? I attempted to copy react-color/lib/components/circle/circle.js and react-color/lib/components/circle/CircleSwatch but I just get an error any time I click the color...?

[proevilz]

I also tried copying the ones from this repo out the src folder and get the same error...

[proevilz]

Update: If I remove line 32 & 34 it works as expected.... However, it seems I cannot change the box-shadow since you're using it to set the actual color of the circle.

[casesandberg]

Hmm, maybe we need to do something custom for the white swatch. Maybe we should add a slight border to it or something?

[andrew-pyle]

@casesandberg Thinking about this issue for Hacktoberfest 2019.

I don't know if there is a solution for this problem—any of the color swatches would disappear on a background which is identical to their own color, just like the white one.

Whatever is done for white would have to be done on all circle swatches to be effective

[andrew-pyle]

I'll submit a pull request which implements the following OPTION for solving the problem of color swatches disappearing on identical background:

• Swatches always have grey border. Makes color swatch visible on same color background.
• Add grey ring inside selected color ring. Makes selection visible on same color background.
• Always use grey shadow shadow on selected, rather than the color of the swatch. Matches grey border.
• Adds a borderColor prop & default color

[Cvrane]

I'll submit a pull request which implements the following OPTION for solving the problem of color swatches disappearing on identical background:

• Swatches always have grey border. Makes color swatch visible on same color background.
• Add grey ring inside selected color ring. Makes selection visible on same color background.
• Always use grey shadow shadow on selected, rather than the color of the swatch. Matches grey border.
• Adds a borderColor prop & default color

Hey, @andrew-pyle was this issue solved? I'm running into the same problem where I'm using a white swatch and it disappears into the background!

[andrew-pyle]

@Cvrane I am not aware of any more progress than stalled PR #649 above.

@casesandberg Any ideas besides adding the grey border?

Maybe we can detect the background color and add a grey border only in the case that they match?

[Cvrane]

@Cvrane I am not aware of any more progress than stalled PR #649 above.

@casesandberg Any ideas besides adding the grey border?

Maybe we can detect the background color and add a grey border only in the case that they match?

Thank you so much for replying and offering to help! I looked into adding a black border just to the white swatch but it just seems to not work. Any suggestions are appreciated!

[andrew-pyle]

@Cvrane have you looked at the approach used in PR #649?

[jeffsheets]

A combination of CSS and a dynamic white-selected className is working for us for now:

  .circle-picker {
    div[title="#ffffff"] {
      border: 1px solid #999;
    }
    &.white-selected {
      div[title="#ffffff"] {
        box-shadow: #999 0 0 0 3px inset !important;
        border: none;

        &:focus {
          box-shadow: #999 0 0 0 3px inset, 0 0 5px #999 !important;
        }
      }
    }
  }

<CirclePicker
   className={chosenColor === '#ffffff' ? 'white-selected' : ''}
   color={chosenColor}
/>

[bruno-silva5]

@jeffsheets Thanks! That solved my problem

I just made small changes, since I'm using pure CSS, in case anyone needs:

.circle-picker span div span div[title~="#fff"] {
    border: 1px solid #999;
}

.white-selected span div span div[title~="#fff"] {
    box-shadow: #999 0 0 0 3px inset, 0 0 5px #999 !important;
}

[jeffsheets]

@bruno-silva5 that's nice with the CSS title selector! Thanks, I'm going to modify ours to be pure CSS too!