casesandberg / casesandberg/react-color

How to style children components?

Open
#951 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.3k
Forks
920
PR merge metrics
No merged PRs in 30d

Description

I'm attempting to use ChromePicker in an app that will be utilized on an iPad. The saturation circle and the circle thumbs for the hue and opacity sliders are too small; I've figured out how to make the hue and opacity sliders height larger, but not the circles.

Could someone point out how I can style the circle pickers please?

`
const styles = {
'default': {

saturation: {
borderRadius: '10px 10px 0 0',
},
Saturation: {
radius: '10px 10px 0 0',
},
color: {
width: '24px',
},
hue: {
height: '20px',
},
Hue: {
radius: '20px',
},
alpha: {
height: '20px',
},
Alpha: {
radius: '20px',
},
},
}

`


Contributor guide

Open the contributing guide

Research direction

Start by tracing how ChromePicker consumes its styles prop and how the saturation, hue, and alpha child components expose their circle sizing. Reproduce the picker on an iPad-sized layout and verify that the saturation circle and hue and opacity slider thumbs can be made larger; done means the requested circles are visibly larger without breaking the picker layout.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.