Color Picker's alpha-channel slider scope doesn't update

[ashetland]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

When using the alpha-channel slider, the scope doesn't update to reflect the current opacity.

Expected Behavior

I would expect the color in the scope to change.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/color-picker/

Reproduction Steps

1. Enable alpha-channel
2. Use alpha-channel slider

Reproduction Version

v1.8.0

Relevant Info

No response

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

No response

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-react

Esri team

Calcite (design)

[github-actions[bot]]

Installed and assigned for verification.

[ashetland]

Hey team, I think I expected the color in the alpha channel scope to fade out to white like pictured above instead of being completely transparent.

[geospatialem]

Hey team, I think I expected the color in the alpha channel scope to fade out to white like pictured above instead of being completely transparent.

@Elijbet - can you confirm on @ashetland's comment above? It looks like the scope (where the pointer is the below screenshot) differs from the expected behavior.

Expected

With 2.5.0-next.2

[jcfranco]

@ashetland @geospatialem IMO, the current behavior is expected since the checkerboard pattern is being used to represent full transparency.

This is common in other color picker components:

https://uiwjs.github.io/react-color/ https://jscolor.com/ https://opensource.adobe.com/spectrum-web-components/components/color-area/ 👇

[ashetland]

Yeah definitely see this both out in the wild. Even your first example shows both approaches next to each other😆. If the current setup feels more Calcite-y, then happy to go with this and update in the future if folks voice opinions.

[ashetland]

Even your first example shows both approaches next to each other😆.

Scratch that, the one on the right doesn't have color in the thumbs at all 🤦‍♂️.

[geospatialem]

Marking as verified per on the conversation above in https://github.com/Esri/calcite-design-system/issues/7761#issuecomment-1944409876 and https://github.com/Esri/calcite-design-system/issues/7761#issuecomment-1944425756.