Handle in color area should stay at dragged position

[bjarnef]

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.2.0

Bug summary

I noticed the handle in color area doesn't work as expected here https://uui.umbraco.com/?path=/docs/uui-color-area--overview

There has been made changes since I was working on it, so not sure if any of these affect this.

When dragging handle to bottom (black) the handle jump to bottom left corner, but it should stay at the dragged position.

Specifics

No response

Steps to reproduce

Drag handle to bottom of color area and notice the handle jump to bottom left corner.

Expected result / actual result

No response

[bjarnef]

@iOvergaard it seems this may be a calculation issue somewhere.
E.g. compare with color area here: https://shoelace.style/components/color-picker?id=inline

[julczka]

Hello everyone! The jumping handle happens when you drag it to the bottom of the area. The very bottom part (that would be 0 on Y axix) means that the color is equal to black. On the X axis the colors saturation is reflected. Now: the value for of saturation for black is 0, and the handle position is binded to the saturation and therefore the handle jumps to the left bottom corner when the value is black. I think the solution here could be caching the previous x position if the handle with each move and if lightness (Y axis) quals to 0 the X axix position should be equal to the previous one od incremented/decremented accordigly to the movement.

[bjarnef]

@julczka it doesn't happen in the color picker here: https://shoelace.style/components/color-picker
https://github.com/shoelace-style/shoelace/blob/be1c38f0e52bc784241f4b6358a8c76cc912d55a/src/components/color-picker/color-picker.ts#L797

Furthermore the color area doesn't work as expected when format is set to hsl (either initially or changed to this format):
https://uui.umbraco.com/?path=/story/uui-color-picker--formats

[bjarnef]

@julczka @iOvergaard besides the object value of alpha property, it seems it was an issue with set of value property in syncValues() function.

with Colord it didn't seem to like parsing the HSV color string as with TinyColor:
https://github.com/shoelace-style/shoelace/blob/current/src/components/color-picker/color-picker.ts#L654

`hsva(${hue}, ${saturation}, ${brightness}, ${alpha / 100})` 

so I used HSL instead:

`hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`

I got some other errors locally regarding the reverseNumberInRange utils function though, but shouldn't be related to this.

I think this also fix this issue with dragging handle in color area when format is "HSL":
https://uui.umbraco.com/?path=/story/uui-color-picker--formats

[iOvergaard]

Should be fixed with #486 and will be released in 1.3.0. We'll aim to have another RC out next week.

[bjarnef]

@iOvergaard I wonder why color area has the alpha property?

and only adjusting value property has impact on rendering in storybook:

Furthermore I get this when browsing e.g. color picker component:

[iOvergaard]

Looks like they are not mapped as props in the story. I will create an issue based on that, @bjarnef.