Content: Color Field Revamp

[zcolah]

Problem

The current color field poses 3 key issues:

1. Does not display the hexcode value adjacent to the color selected. This requires the user to click on the color swatch each time, and then switch to the hex code mode in the pop up just to see the hex code. See screenshot below.
2. Lacks support for hex codes with transparency values (e.g. B38C8C6B). This is the latest industry standard and users may not always want to store hex codes with full opacity.
3. Cannot set to be null on creation or when updated via the interface. However this is possible via the API. Hence we wish to provide parity for the same.

Solution

The new color field has the following improvements:

1. The Hex Code is displayed adjacent to the color swatch
2. Supports Hex Codes with transparency
3. The color picker pop up opens whenever the input is selected

Future Solution

Based on an evaluation, we may improve the color picker pop up. In this pop up the Hex Code, HSLA, RGBA value are visible at the same time and there is support for setting the transparency as well.

Developer Notes

Data Value Storage

1. All color values need to be stored as Hex Values irrespective of what color format (RGBA, HSLA, HSBA, HEX) they are inputted in. 2. We will now support the latest version of hex codes that accommodate for transparency. e.g. B38C8C6B 3. Ensure there is an update made to the back end to support the two additional characters. Hex Values will be able to be either

• 6 Characters (if they are at 100% opacity)
• 8 Characters (if they are at an opacity below 100%) 4. If the user removes the field value please store it as null 5. If the user types in a field value and switches to a different field, then please set the field value as “#FFFFFF” 6. Support the user typing in a hex code value with and without a hex code.
• The user may type or paste in “FFFFFF”, and hit enter, please save that as “#FFFFFF”
• For example the user may type or paste in “#FFFFFF”, and hit enter, please save that as “#FFFFFF” 7. Once the user enters an input always capitalize it. For example if a user enters “ffffff”, please make it “FFFFFF” and store it in all caps as well.

Other Notes

1. Similar to the Date Picker, please open the color picker when the user selects the color input
2. The hex code in the input should update as the color is updated in the pop up

References

1. Refer to this Code Sand Box to see how they made a color field using MUI components that supports transparent values: https://codesandbox.io/s/mui-color-picker-gbisn

2. We have designed a custom color picker pop up (see Future Solution). Before building the custom color picker pop up, please evaluate the complexity of integrating this kind of pop up that supports transparent hex values and has a more intuitive user experience. Here are two references to help with the evaluation which we can also potentially use for our integration.

• See full option: https://codepen.io/stoumann/pen/vYXmBpW
• See second option: https://codepen.io/narsenico/pen/xPxNeE

Figma

https://www.figma.com/file/zOI7oSH3fG1XDmmPzsP6PX/Zesty-3.0-Revamp?type=design&node-id=3623%3A19117&mode=dev&t=Waf1vzxF4gMFPUiA-1