ColorPicker: sliders stuck on 0 value when editing HSL color value

[ciampo]

In the ColorPicker, when any of the sliders are stuck on the 0 value, clicking or dragging the slider won't result in the slider value updating:

color-picker-sliders.mp4

[ciampo]

After looking more into this, code-wise everything works as expected.

The behavior is caused by the fact that the component uses a colord object as the internal state (example). And colord always sets certain values (like Hue and Saturation) to 0 when they don't have an influence on the chosen color.

For example, in HSL:

• When the L is 0 or 100, changing Hue or Saturation wouldn't make any difference — the resulting color would still be pure black or pure white, and therefore colord always represents the white color with 'Hue` and 'Saturation' set to 0
• When 0 < L < 100, it's possible to change Saturation, but changing Hue wouldn't still make any difference, since the resulting color would still be a shade of gray
• Only when both 0 < L < 100 and S > 0, changing Hue would affect the resulting color

Kapture.2023-12-22.at.11.31.40.mp4

@mirka , do you think it's worth to refine the behavior of the HSL slider to allow the user to interact with the HSL sliders even whey they don't affect the actual color?

[mirka]

do you think it's worth to refine the behavior of the HSL slider to allow the user to interact with the HSL sliders even whey they don't affect the actual color?

I think so, yes. Otherwise the user is forced to manipulate the sliders in the correct "order", even though they already have a valid HSL value in mind.

Also in the current implementation you can run into situations where you can manually enter any number into the number input but the slider doesn't comply:

Not sure when the final HSL validation should occur though. Maybe set an onBlur handler on all of the inputs/sliders, and only validate if none of them still don't have focus after a short delay? 😬

[ciampo]

Testing an approach in #57555.