calcite-color-picker: Add ability to paste hex (with # symbol) into hex input

[jmanke]

Description

Currently, pasting a color with the full hex string (ex. #FF00FF) into the hex input will not work. The last character is truncated and the value is not accepted. This is something users routinely do in Dashboards.

Acceptance Criteria

Pasting a full hex string (with the # symbol included) should update the color-picker's color.

Relevant Info

No response

Which Component

calcite-color-picker

Example Use Case

A user is configuring their theme using the calcite-color-picker and would like to use hex colors from an external source. The user will attempt to paste a hex color into the hex input but it will fail to update the color. A user would expect the hex input to accept hex strings that include the # symbol.

[macandcheese]

This would be a nice QoL improvement.

[jcfranco]

@benelan I triaged this one to this milestone since I already had something in the works for it.

[github-actions[bot]]

Installed and assigned for verification.

[benelan]

Unfortunately, in beta.94 it doesn't let you paste valid hex at all now. Also, should it be using internalSetValue() instead of only setting the Input's value?

https://github.com/Esri/calcite-components/blob/ed9306124c6b0570fe3606a47b33840aeab129bb/src/components/color-picker-hex-input/color-picker-hex-input.tsx#L187

The way it is now won't update Color Picker's value property, as well as some other states like previousNonNullValue and internalColor. It also won't emit, which is taken care of in internalSetValue().

https://codepen.io/benesri/pen/vYjgQBX?editors=100

Edit: Nevermind on the internalSetValue() part, it looks like that should happen when Input's value changes.

[jcfranco]

Taking another look! 👀

[geospatialem]

This issue will be prioritized after the 1.0 release next month.

[jcfranco]

This was addressed via https://github.com/Esri/calcite-components/issues/749 and will be available in the next release (see updated demo). cc @geospatialem

[geospatialem]

Verified in 1.4.0-next.9 🎨

[AdelheidF]

I tried this with 1.4.0 and I don't think it works correctly.

When you paste a new hex value the color does not change. It also does not change if you click anywhere else outside of the hex box afterwards.

If you type in a new hex value the color only changes if you click directly on the RGB/HSV label or the +/- buttons. Clicking just outside of the box doesn't apply the new color. I even think it should automatically apply the color as soon as a valid hex value got entered, not only on blur.

https://codepen.io/afreitag/pen/bGmZGPR

[jcfranco]

Thanks for catching this, @AdelheidF. Need to improve test coverage for this.

I'll take a look to see if this can be fixed for the upcoming patch.

[github-actions[bot]]

Installed and assigned for verification.

[jcfranco]

3rd time's the charm, right? 😄🍀

When you paste a new hex value the color does not change. I even think it should automatically apply the color as soon as a valid hex value got entered, not only on blur.

I do want to clarify that there was no change regarding ☝️. Pasted values will get processed on blur or on Enter press. cc @ashetland

[geospatialem]

Verified when on blur or the Enter key is pressed per Franco's note above.