What?

Related to #46358

Update ColorPalette's onChange prop to require a string for its newColor parameter, rather than optionally accepting one.

Why?

While working on the above refactor, I encountered type conflicts with ColorPalette's onChange, because this method's newColor parameter was optional, and could therefor be undefined. Within ColorListPicker the related onChange values are all strings or arrays of strings.

While we could type the parameters in ColorListPicker's onChange as string | undefined I thought it was worth revisiting why ColorPalette introduces and optional/undefined value in the first place.

It appears this parameter is optional to accommodate ColorPalette's clearColor method, which passes undefined as the new color value.

That works fine, but I do wonder if "optional" is the best approach for the parameter... there is a second parameter (index, also optional) for the onChange - so omitting newColor while including index would cause a collision, the index would be interpreted as newColor and chaos would ensue. This probably isn't likely to occur in practice, but it does look like a potential issue/edge case that could slip past TypeScript.

That logic leads me to think that string | undefined would be more appropriate than an optional newColor parameter.

Going back to the refactor that initially triggered this however, I do think we can eliminate the undefined option altogether and have clearColor pass an empty string instead. This doesn't appear to break any functionality or tests that I can see, and will simplify the typing of both components.

Curious what others think (cc @mirka @ciampo)

How?

First, update the newColor parameter's type from an optional string to a required one, then replace the use of undefined when clearColor is invoked with an empty string.

Testing Instructions

1. Open the ColorPalette component in Storybook
2. Select any color, and then click it again to deselect it, which will invoke the clearColor method we've updated
3. Select and deselect other colors
4. Confirm there are no console errors, and all selections/deselections work as expected
5. Test in the editor using any block with a color palette (selecting and deselecting text color on a paragraph block, for example).

Testing Instructions for Keyboard

In the editor, with a paragraph block focused, press Tab five times, which will navigate you to the font color option.
Press Space
Press Tabat least once to navigate to a color.
Press Space to select the color. Press Space again to deselect it.