fix(ColorPicker): Fix default color value in ColorPicker (#6364)

* fix default color value to have full alpha channel

* add test

* make color required

* add missing color prop in RSP ColorPicker

* fix types

* fix tests

* add transparent example to colorswatch docs

* use previous value if input is empty/invalid

* add back null

* missed a few lines in tests

* fix types

* fix tests

* remove null from ColorPickerProps

Author: reidbarber

packages/@react-aria/color/src/useColorSwatch.ts

@@ -21,7 +21,7 @@ import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {
   /** The color value to display in the swatch. */
-  color?: string | Color | null,
+  color?: string | Color,
   /** 
    * A localized accessible name for the color.
    * By default, a description is generated from the color value,

packages/@react-spectrum/color/docs/ColorSwatch.mdx

@@ -63,12 +63,20 @@ function Example() {
 }
 ```
 
-### No value
-
-When no `color` prop is provided, the value is `null`, or the color is transparent, ColorSwatch displays a red slash across the swatch.
+Fully transparent colors are displayed with a red slash through the swatch, while partially transparent colors are shown with a checkerboard background.
 
 ```tsx example
-<ColorSwatch color={null} />
+import {parseColor, ColorSlider} from '@react-spectrum/color';
+
+function Example() {
+  let [color, setColor] = React.useState(parseColor('hsla(0, 100%, 50%, 0)'));
+  return (
+    <Flex direction="column" gap="size-100">
+      <ColorSlider value={color} onChange={setColor} channel="alpha" />
+      <ColorSwatch color={color} />
+    </Flex>
+  );
+}
 ```
 
 ## Labeling

packages/@react-spectrum/color/src/ColorPicker.tsx

@@ -80,6 +80,7 @@ function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButt
                 })({isFocusVisible})}>
                 <ColorSwatch
                   ref={swatchRef}
+                  color={props.value}
                   size={props.size}
                   rounding={props.rounding}
                   aria-label={props['aria-label']}

packages/@react-spectrum/color/src/ColorSwatchPicker.tsx

@@ -18,7 +18,7 @@ import {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatc
 import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
 import {useDOMRef, useStyleProps} from '@react-spectrum/utils';
 
-export interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color | null, Color>, StyleProps {
+export interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps {
   /** The ColorSwatches within the ColorSwatchPicker. */
   children: ReactNode,
   /**

packages/@react-spectrum/color/stories/ColorField.stories.tsx

@@ -151,7 +151,7 @@ export const ContextualHelpStory: ColorFieldStory = {
 };
 
 function ControlledColorField(props: SpectrumColorFieldProps) {
-  let [color, setColor] = useState<string | Color | null | undefined>(props.value);
+  let [color, setColor] = useState<string | Color | null | undefined>(props.value || '#000000');
   let onChange = (color: Color | null) => {
     setColor(color);
     if (props.onChange) { props.onChange(color); }

packages/@react-spectrum/color/test/ColorPicker.test.js

@@ -70,6 +70,39 @@ describe('ColorPicker', function () {
     expect(within(button).getByRole('img')).toHaveAttribute('aria-label', 'dark vibrant blue');
   });
 
+  it('should have default value of black', async function () {
+    let {getByRole, getAllByRole} = render(
+      <Provider theme={theme}>
+        <ColorPicker label="Fill">
+          <ColorEditor />
+        </ColorPicker>
+      </Provider>
+    );
+
+    let button = getByRole('button');
+    expect(button).toHaveTextContent('Fill');
+    expect(within(button).getByRole('img')).toHaveAttribute('aria-label', 'black');
+
+    await user.click(button);
+
+    let dialog = getByRole('dialog');
+    expect(dialog).toHaveAttribute('aria-labelledby');
+    expect(document.getElementById(dialog.getAttribute('aria-labelledby'))).toHaveTextContent('Fill');
+
+    let sliders = getAllByRole('slider');
+    expect(sliders).toHaveLength(3);
+
+    let picker = getAllByRole('button')[1];
+    expect(picker).toHaveTextContent('Hex');
+
+    let colorField = getAllByRole('textbox')[0];
+    expect(colorField).toHaveAttribute('aria-label', 'Hex');
+
+    let alpha = getAllByRole('textbox')[1];
+    expect(alpha).toHaveAttribute('aria-label', 'Alpha');
+  });
+
+
   it('allows switching color space', async function () {
     let {getByRole, getAllByRole} = render(
       <Provider theme={theme}>

packages/@react-stately/color/src/useColorPickerState.ts

@@ -4,7 +4,7 @@ import {useColor} from './useColor';
 import {useControlledState} from '@react-stately/utils';
 import {ValueBase} from '@react-types/shared';
 
-export interface ColorPickerProps extends ValueBase<string | Color | null, Color> {}
+export interface ColorPickerProps extends ValueBase<string | Color, Color> {}
 
 export interface ColorPickerState {
   /** The current color value of the color picker. */
@@ -15,13 +15,15 @@ export interface ColorPickerState {
 
 export function useColorPickerState(props: ColorPickerProps): ColorPickerState {
   let value = useColor(props.value);
-  let defaultValue = useColor(props.defaultValue || '#0000')!;
+  let defaultValue = useColor(props.defaultValue || '#000000')!;
   let [color, setColor] = useControlledState(value || undefined, defaultValue, props.onChange);
 
   return {
     color,
     setColor(color) {
-      setColor(color || parseColor('#0000'));
+      if (color != null) {
+        setColor(color || parseColor('#000000'));
+      }
     }
   };
 }

packages/react-aria-components/src/ColorSwatchPicker.tsx

@@ -10,7 +10,7 @@ import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, u
 import {useLocale, useLocalizedStringFormatter} from 'react-aria';
 
 export interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}
-export interface ColorSwatchPickerProps extends ValueBase<string | Color | null, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps> {
+export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps> {
   /** The children of the ColorSwatchPicker. */
   children?: ReactNode,
   /**
@@ -66,7 +66,7 @@ export interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRender
 
 export interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents {
   /** The color of the swatch. */
-  color: string | Color | null,
+  color: string | Color,
   /** Whether the color swatch is disabled. */
   isDisabled?: boolean
 }