search

adobe / spectrum-web-components

Spectrum Web Components
https://opensource.adobe.com/spectrum-web-components/
Apache License 2.0
1.24k stars 199 forks source link

[Bug]: Saturation (HSV) values not reflected properly on colour-area #3950

Open saumyagaikwad99 opened 7 months ago

saumyagaikwad99 commented 7 months ago

Code of conduct

Impacted component(s)

Venus

Expected behavior

No response

Actual behavior

We are facing some issue on color area with HSV format. It seems like there is some issue when we apply saturation to the color area. Please refer following test case to reproduce the issue: when we try to apply hsv(360,1,88), saturation value is wrong in the color area it is on the right edge.

Screenshots

Screenshot 2024-01-18 at 1 00 18 PM Screenshot 2024-01-18 at 1 00 08 PM Screenshot 2024-01-18 at 12 59 58 PM Screenshot 2024-01-18 at 12 59 44 PM

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

  1. Go to '...'
  2. Click on '....'
  3. Scroll to '....'
  4. Check console
  5. See error

Sample code that illustrates the problem

https://studio.webcomponents.dev/edit/6whdj26SRWmMX7B2uO9E/src/index.stories.js?p=stories

Logs taken while reproducing problem

No response

Westbrook commented 5 months ago

See #2782

blunteshwar commented 4 months ago

This is happening because in hsv format the values are in degree , %, % respectively and when you provide color value as hsv(360,1,88), the color library assumes 1 as 100%. Apparently for any value x∈[0,1] it converts it in percentage and assumes accordingly. We are looking into various options already available with other teams and will get back to you shortly.

blunteshwar commented 4 months ago

Apparently the color library which we are using(tinycolor) does not consider it as a bug rather a feature. So till the time we figure out some alternative for this, users can leverage this approach :- for hsv(360,1,88) use hsv(360,1.00001,88) Since for any value x∈[0,1] it converts it in percentage whenever the value is 1 users can write is like 1.00001 and values will be correctly reflected.