IgniteUI / igniteui-webcomponents / 38237273565

100%

push

github

fix(color-picker): align the hue slider track with the selected hue (#2466)

* fix(color-picker): align the hue slider track with the selected hue

The hue track gradient used colors that were not pure hues, at uneven
positions. Yellow sat at 28.37% of the track, not at 16.67% (60deg), so
the thumb for a yellow hue sat on orange. The track under the thumb was
up to 36deg away from the hue that the thumb and the canvas show.

The track now has the six pure hues at equal 60deg steps. In sRGB, the
color between two of these stops changes hue evenly. The stops now span
only the distance that the thumb center can move, which ends half a
thumb width from each end of the track. A new --_slider-thumb-size
property gives the thumb width to the thumb and to the gradient.
Now the track under the thumb is less than 2deg from the selected hue.

* fix(color-picker): reverse the slider tracks in RTL

The native hue and alpha ranges run from right to left in RTL, but
their track gradients always ran from left to right. So each thumb
was on the wrong color. A shared --_slider-track-direction now
changes to `to left` under :dir(rtl). Add RTL specs for both tracks
and update the changelog and the spec doc.

8408 of 8501 branches covered (98.91%)

Branch coverage included in aggregate %.

51737 of 51867 relevant lines covered (99.75%)

3592.06 hits per line