ColorPicker: Strip hash from pasted hex values in ColorPicker

[aaronrobertshaw]

Related:

• [Color Picker] Make custom HEX text field available without a click #37981

What?

Strips leading # character from hex values pasted into the ColorPicker's hex input field.

Why?

The leading # on pasted values persists in the input field until the value is committed. This lead to confusion as to whether the color value was invalid or not.

How?

Leveraged InputControl's __unstableStateReducer to process pasted values, stripping any leading # from the value.

Testing Instructions

1. Ensure the existing unit tests still pass: npm run test-unit packages/components/src/color-picker/test
2. Fire up Storybook, visit the ColorPicker page, and attempt to paste complete hex values into the hex input field.
3. Test pasting hex values into ColorPicker instances within the editor.

Screenshots or screencast

Before	After
Screen.Recording.2022-05-23.at.3.02.40.pm.mp4	Screen.Recording.2022-05-23.at.3.03.20.pm.mp4

[andrewserong]

This tests nicely to me, a good little improvement, it makes using the component feel much smoother (also, great example of the value of the state reducer!)

LGTM 👍