casesandberg/react-color

SliderPicker display issue when managing color state as hex or rgb

Open

#502 opened on Apr 19, 2018

View on GitHub
 (3 comments) (1 reaction) (0 assignees)JavaScript (11,679 stars) (946 forks)batch import
bughelp wanted

Description

Hi,

Thanks for your hard work on this library. It is incredibly useful. I am using the SliderPicker component and have a minor issue with the 'shade buttons' that appears below the slider. The darkest shade button will never show as selected when clicked, but the 4 lighter shades displayed as selected just fine. I was a little stumped because your example page shows it working fine, until I looked at your source and realized the state for your SliderPicker was managed as hsl and not hex or rgb. After switching to my color state to be hsl the darkest shade shows selected as expected.

To clarify, by 'selected' I mean when the shade button is clicked it has the scale(1.8) applied to it so that it increases in size compared to the rest of the shades.

Contributor guide

Tech stack
reactjavascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
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.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React basicsColor format fundamentals (hex, rgb, hsl)
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate the SliderPicker component's shade selection logic. The issue indicates that selection works correctly when color state is in HSL but not hex or RGB. Examine how the component compares the current color to the shade colors. Likely the comparison is done in a specific color space. Look for any color conversion functions used. The fix might involve normalizing color formats before comparison. Check the component's source in src/components/slider/SliderPicker.js or similar. Also review related test files.