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 (946 forks)batch import
enhancementhelp wantedquestion

Repository metrics

Stars
 (11,679 stars)
PR merge metrics
 (No merged PRs in 30d)

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

Research direction
Inspect the CirclePicker component and its CircleSwatch subcomponent. Find where the box shadow and selected circle styles are applied, and add a condition so that if the color is #fff, the box shadow becomes #000 and the selected circle gets a #000 border.
Tech stack
javascriptreact
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.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
HTMLCSSReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75