ColorField feedback

[matthewdeutsch]

😯 Current Behavior

https://codesandbox.io/s/react-spectrum-playground-forked-r3n4h?file=/src/App.js

• [x] No Rgb/Hsl conversion
  • Will be supported in https://github.com/adobe/react-spectrum/pull/1732
• [x] No value for ColorField leads to typescript error
• [ ] No RgbColor/HslColor types exported
  • Need more information about use case, we probably don't want to expose this
• [x] No alpha support for ColorField Ex: #RRGGBBAA
  • Will be supported in #3228
• [ ] No CSS conversion / Hex conversion utils
  • covered by parse/convert to string? need more information
• [x] Keeping multiple input in sync
  • controlled mode should handle this - storybook example

🤔 Expected Behavior

🔦 Context

Adobe Teams building Color Pickers for their products

💻 Examples

🧢 Your Company/Team

Adobe/AJO

[holblin]

Here is a better description of the problems or suggestions we have: https://codesandbox.io/s/react-spectrum-playground-forked-r3n4h?file=/src/App.js

[holblin]

Hi @matthewdeutsch, do you have any updates?

[holblin]

Hi,

My image in the playground doesn't work anymore. Here is the image I was targeting: https://spectrum.adobe.com/page/color-area/ (first image on the page which shows more than the color area)

@matthewdeutsch , I saw the issue was moved to Groomed, what are the next steps? Did you have some ETA or idea about the timeline?

[dannify]

I think we will take a look at the ts error for ColorField but the other items likely won't be addressed this quarter.

[holblin]

Hi @dannify, did you have some updates on the ColorField ts error?

Currently, we used null because it allows us to clear the field but we discover it also introduces a CSS issue (the focus CSS class is still active after blurring out of the field with the keyboard).

Since the CSS issue is the less evil of both bugs we will continue like that but I would love to have a supported way to empty out or keep empty (after user modification) the color field.

[holblin]

Hi @snowystinger , I checked the null argument on https://codesandbox.io/s/react-spectrum-playground-forked-ixe73z but when I tab I got an error: Cannot read properties of null (reading 'toString'). I try to update the version of the dependencies and I have the same issue.

Do you think there is some adjustment to do on top of https://github.com/adobe/react-spectrum/pull/2893 for the null state?

Also, did you catch the CSS issue after the keyboard blur? (I think it might be linked)

[holblin]

@dannify , did you know if these two points describe here are planned:

• Color class: No RgbColor/HslColor types exported
• Color conversion and sync fields

[holblin]

@matthewdeutsch , could you uncheck:

• No Rgb/Hsl conversion
• Keeping multiple input in sync

I don't think these points have been addressed yet.

No Rgb/Hsl conversion: Ability to use an HSL ColorField (or another color component) with an RGB value as input/output.

Keeping multiple inputs in sync: Keeping multiple color inputs in sync while they are in a different color space (RGB + HSL)

[dannify]

The updates to the type have not been released yet. Release to go out today/tomorrow.

[dannify]

Update: Release is out. The type issue should be resolved. RGB/HSL conversion is in a PR - https://github.com/adobe/react-spectrum/pull/2887 Keeping multiple inputs in sync isn't anything we would actually do in RSP as far as I am aware. This should be handled via using all of the components needed in a controlled state.

[spsDrop]

PR for hex rgba color support https://github.com/adobe/react-spectrum/pull/3228