feat(color-picker): add support for alpha channel (deprecates hideChannels, hideHex, hideSaved)

[jcfranco]

Related Issue: #749

Summary

This brings opacity support to the color picker along with some design updates.

alphaChannel = true + allowEmpty = true

alphaChannel = true + allowEmpty = false

alphaChannel = false + allowEmpty = true

alphaChannel = false + allowEmpty = false

New props

• alphaChannel – turns on support for alpha
• channelsDisabled – replaces hideChannels
• hexDisabled – replaces hideHex
• savedDisabled – replaces hideSaved

Changes to existing props

• format – now supports hexa, rgba-css, hsla-css, rgba, hsla, and hsva
• hideHex – deprecated
• hideChannels – deprecated
• hideSaved – deprecated

Note: Tests will be tackled by #6840

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jcfranco]

I'll be adding tests, but probably won't be done soon. In the meantime, I'd appreciate feedback on the current changes. 👀

[driskull]

Comments. Code looks good but had questions on API naming/consistency. Just some minor cleanup of comments as well.

[macandcheese]

Looks good overall. Here's some quick feedback (sorry in advance)

Is appending the alpha value to HEX expected to a user? This seems like non-standard behavior compared to how Sketch, Figma, etc., present it (they leave it as a 6 digit HEX). Additionally it causes some weird overlaps:

Perhaps for another time, but 'allow-alpha' with 'hide-opacity' again presents maybe an unexpected visual: Why can I adjust alpha here with HEX, but we don't add an "A" field to rgbA or hslA?

Visuals aside, the affordance for setting alpha on hex seems to be to be more approachable with this "lockup" - I assume the majority of color picker end users will just be familiar with 6 digit hex codes and educating them on potential 8 digit hex codes seems like.. maybe not an educational endeavor we need to take.

Is it expected that hide-hex and allow-alpha does NOT show the slider to adjust opacity?

Spacing bug when only saved items are visible (with hide-hex and hide-channels and NOT allowing opacity):

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

This PR has been automatically closed due to inactivity.