Polaris-react: Color Picker Format

[robbyklein]

Issue summary

More of a request. The ColorPicker component outputs an HSBa color object which we have to convert to a usable CSS color format. It would be so much better if it output RGBa, HSLa, hex, or all of the above like the react-color module does.

Expected behavior

This framework is for building Shopify apps. background-color: hsba() does not exist. Make it easy for us so we don't have to use crazy conversion formulas.

Specifications

• Polaris version: 1.10.2
• React version: 16.2.0
• Browser: Firefox 58
• Device: Macbook
• Operating System: MacOS

[meecrobe]

+1. I am building an app where I use color pickers and I have to do multiple conversions: HSBa→RGBa, HEX→HSBa, HSBa→HEX, HEX→RGBa. That's really painful :confounded:

[rkbhochalya]

Same here. I'm wondering why they designed it in a way which is not useful for most of app developers.

[lemonmade]

The picker itself is an HSBA picker. We can’t really provide a different color format without losing some granularity on the color being described. There are a number of functions Polaris exposes (see this file: https://github.com/Shopify/polaris/blob/master/src/components/ColorPicker/color-utilities.ts) which allow conversion between HSB/ RGB/ HEX. Our recommended approach is to store the HSB(A) color in state, and then use these utilities when you need to present the color in CSS/ save it as part of a form.

[ry5n]

I don't have a release timeframe, but I can share that we’re working on addressing this.

[chloerice]

Hi folks 👋 We treat all feature requests as part of our backlog, so I’ll close this issue for now.

we encourage everyone who wants this feature to add a 👍 to the issue's description. We take your collective interest into account when we look at what to put on the roadmap next.

💜

[pratiknikam]

@chloerice any update around this?

[chloerice]

Hey @pratiknikam, it's not on our roadmap to change the format of the color picker component at this time. Here's a sandbox example of an rgba input. There's work in progress improving the design and accessibility of the color picker, but it's being worked on as time permits due to other projects the contributor is part of.