Fix placeholder/default issues in color picker custom field (strapi#23855)

* Fix issue where the color picker doesn't use the placeholder as the default when not expanded, and includes a default value even when no value is set

Fixes strapi#23854

* Adjust defaults a little, add some comments.

* test(color-picker): remove initial value assertion for color picker input

---------

Co-authored-by: Jamie Howard <48524071+jhoward1994@users.noreply.github.com>
Co-authored-by: Jamie Howard <jhoward1994@gmail.com>

Author: ericbf

packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx

@@ -83,7 +83,12 @@ export const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerI
     const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);
     const { formatMessage } = useIntl();
     const field = useField(name);
-    const color = field.value ?? '#000000';
+
+    /**
+     * The color that will show in the field. We can't presume to show black or something
+     *   if no value is currently set (as `null` really corresponds to no color, not
+     *   black), so default to empty string if nothing else is available. */
+    const color = field.value ?? props.placeholder ?? '';
 
     const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
 
@@ -111,7 +116,7 @@ export const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerI
                   <ColorPreview color={color} />
                   <Typography
                     style={{ textTransform: 'uppercase' }}
-                    textColor={field.value ? undefined : 'neutral600'}
+                    textColor={field.value ? undefined : 'neutral500'}
                     variant="omega"
                   >
                     {color}
@@ -139,7 +144,10 @@ export const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerI
                     })}
                     style={{ textTransform: 'uppercase' }}
                     name={name}
-                    defaultValue={color}
+                    // No default value. If nothing is selected, the input will be empty.
+                    defaultValue={field.value ?? ''}
+                    // Here we default to #000000 as the placeholder, because, absent a
+                    //   user defined placeholder, we want to indicate the desired format.
                     placeholder="#000000"
                     onChange={field.onChange}
                     {...props}

packages/plugins/color-picker/admin/src/components/tests/ColorPickerInput.test.tsx

@@ -54,7 +54,6 @@ describe('<ColorPickerInput />', () => {
     expect(getByRole('slider', { name: 'Color' })).toBeVisible();
     expect(getByRole('slider', { name: 'Hue' })).toBeVisible();
     expect(getByRole('textbox', { name: 'Color picker input' })).toBeVisible();
-    expect(getByRole('textbox', { name: 'Color picker input' })).toHaveValue('#000000');
   });
 
   it('can change color via text input', async () => {