Clay: @clayui/color-picker Should accept 8 digit hexcodes and opacity for the color property

[ethib137]

Currently the color picker is unable to properly handle 8 digit hexcodes and opacity. You can see this by completing the following steps.

• Open the code sandbox: https://codesandbox.io/s/ecstatic-feather-rwhw6?file=/src/index.js
• Click on the swatch to open the color picker.
• Click on the droplet to open the advanced picker.
• Notice that the color is displayed as a 6 digit hex code and does not allow for opacity.

Given the current browser support, we should start supporting 8 digit hexcodes and opacity. It may be worth considering

https://caniuse.com/css-rrggbbaa

[matuzalemsteles]

Thanks @ethib137 for bringing this, I think this is super valid and it makes sense to bring it to ColorPicker, apparently, the lib we use internally supports this so it wouldn't be a problem to implement or just tweak to support it, but maybe to support rgba at the level of Improve user experience in UI than having to type everything in the input, as a native picker in the devtools that you can switch between different formats.

cc @drakonux I think this might be interesting, I think we can support it at the input level but visually I'm not sure if we want to improve the experience here, in the end, everything typed is converted to HEX.

[brunofernandezg]

cc @liferay-lexicon

[hold-shift]

Hello @ethib137. After studying the current component behavior, we have seen that the input accepts 2 extra digits for opacity, but a UI solution for the panel is necessary. I'm about to open a Lexicon ticket to work on this. We only need a deadline to assign it a priority within our backlog. Thanks!

[ethib137]

Hi @hold-shift, I can't provide a deadline, since from my side it's only a nice to have, not a requirement. For determining priority, one thing to consider is the use of the color-picker in Style Books. Style Books is becoming more and more important as we move away from creating custom themes, and having a color picker that properly handles 8 digit hexcodes in the panel will improve that experience. I hope that helps.