casesandberg/react-color

#FFF circle color picker selected state on white background

Open

#530 opened on Aug 24, 2018

View on GitHub
 (12 comments) (1 reaction) (0 assignees)JavaScript (11,679 stars) (946 forks)batch import
enhancementhelp wantedquestion

Description

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...?

Contributor guide

Tech stack
reactcssjavascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic ReactCSS styling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
Examine the CirclePicker component files, particularly CircleSwatch.js, to understand how the selected state is rendered. Add a conditional check for the color #fff to apply a black box shadow and a black border on the selected circle. Review issue comments for suggested implementations.