clay icon indicating copy to clipboard operation
clay copied to clipboard

Published 20 hours ago • verified publisher icon liferay

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

Open ethib137 opened this issue 3 years ago • 5 comments

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

ethib137 avatar Jun 16 '21 11:06 ethib137

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.

matuzalemsteles avatar Jun 16 '21 15:06 matuzalemsteles

cc @liferay-lexicon

brunofernandezg avatar Jun 17 '21 06:06 brunofernandezg

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!

ghost avatar Jun 18 '21 06:06 ghost

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.

ethib137 avatar Jun 20 '21 09:06 ethib137

LPS Ticket https://liferay.atlassian.net/browse/LPS-190539

matuzalemsteles avatar Jul 13 '23 23:07 matuzalemsteles