casesandberg / casesandberg/react-color
How to style children components?
- 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
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