parseColor converts hue from 360 to 0

[theMosaad]

Provide a general summary of the issue here

parseColor converts hue from 360 to 0

🤔 Expected Behavior?

expect parseColor('hsb(360, 100%, 100%)').toString('hsb') to output 'hsb(360, 100%, 100%)'

😯 Current Behavior

currently parseColor('hsb(360, 100%, 100%)').toString('hsb') outputs 'hsb(0, 100%, 100%)'

💁 Possible Solution

Solution 1

using h === 360 ? 360 : mod(h, 360) instead of mod(h, 360) below https://github.com/adobe/react-spectrum/blob/9cbe7d40fc8c14cb617f4280bbe776fa5939cad3/packages/%40react-stately/color/src/Color.ts#L415 https://github.com/adobe/react-spectrum/blob/9cbe7d40fc8c14cb617f4280bbe776fa5939cad3/packages/%40react-stately/color/src/Color.ts#L557

Solution 2

alternatively, we can modify the mod function as follows (changing the function name might make sense)

function mod(n, m) {
  return n === m ? n : ((n % m) + m) % m;
}

https://github.com/adobe/react-spectrum/blob/9cbe7d40fc8c14cb617f4280bbe776fa5939cad3/packages/%40react-stately/color/src/Color.ts#L544-L546

🔦 Context

I'm using the URLSearchParams as the source of truth for the colorSlider component representing the hue. this bug causes the slider's thumb to jump to the left whenever it's dragged to the farthest right

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/cranky-pascal-pfhplj?file=%2Fsrc%2FApp.js

Version

"@react-stately/color": "3.5.3"

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response