Support null values in ColorField with channel prop (#6722)

Author: devongovett

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

@@ -92,7 +92,7 @@ function Example() {
         <ColorField label="Saturation" value={color} onChange={setColor} colorSpace="hsl" channel="saturation" />
         <ColorField label="Lightness" value={color} onChange={setColor} colorSpace="hsl" channel="lightness" />
       </div>
-      <p>Current color value: {color.toString('hex')}</p>
+      <p>Current color value: {color?.toString('hex')}</p>
     </>
   );
 }

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

@@ -374,17 +374,45 @@ describe('ColorField', function () {
     expect(onChangeSpy).toHaveBeenCalledTimes(1);
   });
 
-  it('should support the channel prop', async function () {
-    let onChange = jest.fn();
-    let {getByRole} = renderComponent({label: null, value: '#abc', colorSpace: 'hsl', channel: 'hue', onChange});
-    let colorField = getByRole('textbox');
-    expect(colorField.value).toBe('210°');
-    expect(colorField).toHaveAttribute('aria-label', 'Hue');
+  describe('channel', function () {
+    it('should support the channel prop', async function () {
+      let onChange = jest.fn();
+      let {getByRole} = renderComponent({label: null, value: '#abc', colorSpace: 'hsl', channel: 'hue', onChange});
+      let colorField = getByRole('textbox');
+      expect(colorField.value).toBe('210°');
+      expect(colorField).toHaveAttribute('aria-label', 'Hue');
+
+      await user.tab();
+      await user.keyboard('100');
+      await user.tab();
+      expect(onChange).toHaveBeenCalledWith(parseColor('hsl(100, 25%, 73.33%)'));
+    });
 
-    await user.tab();
-    await user.keyboard('100');
-    await user.tab();
-    expect(onChange).toHaveBeenCalledWith(parseColor('hsl(100, 25%, 73.33%)'));
+    it('should default to empty', function () {
+      let {getByRole} = renderComponent({label: null, colorSpace: 'hsl', channel: 'hue'});
+      let colorField = getByRole('textbox');
+      expect(colorField).toHaveValue('');
+    });
+
+    it('should support null value', function () {
+      let {getByRole} = renderComponent({label: null, value: null, colorSpace: 'hsl', channel: 'hue'});
+      let colorField = getByRole('textbox');
+      expect(colorField).toHaveValue('');
+    });
+
+    it('should support clearing value', async function () {
+      let onChange = jest.fn();
+      let {getByRole} = renderComponent({label: null, defaultValue: '#abc', colorSpace: 'hsl', channel: 'hue', onChange});
+      let colorField = getByRole('textbox');
+      expect(colorField).toHaveValue('210°');
+
+      await user.tab();
+      await user.keyboard('{Backspace}');
+      await user.tab();
+
+      expect(colorField).toHaveValue('');
+      expect(onChange).toHaveBeenCalledWith(null);
+    });
   });
 
   describe('validation', () => {

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

@@ -23,19 +23,29 @@ export interface ColorChannelFieldState extends NumberFieldState {
  */
 export function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState {
   let {channel, colorSpace, locale} = props;
+  let black = useColor('#000')!;
   let initialValue = useColor(props.value);
-  let initialDefaultValue = useColor(props.defaultValue || '#0000')!;
-  let [colorValue, setColor] = useControlledState(initialValue || undefined, initialDefaultValue, props.onChange);
-  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);
+  let initialDefaultValue = useColor(props.defaultValue);
+  let [colorValue, setColor] = useControlledState(initialValue, initialDefaultValue ?? null, props.onChange);
+  let color = useMemo(() => {
+    let nonNullColorValue = colorValue || black;
+    return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
+  }, [black, colorValue, colorSpace]);
   let value = color.getChannelValue(channel);
   let range = color.getChannelRange(channel);
   let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [color, channel]);
   let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;
 
   let numberFieldState = useNumberFieldState({
     locale,
-    value: value / multiplier,
-    onChange: (v) => setColor(color.withChannelValue(channel, v * multiplier)),
+    value: colorValue === null ? NaN : value / multiplier,
+    onChange: (v) => {
+      if (!Number.isNaN(v)) {
+        setColor(color.withChannelValue(channel, v * multiplier));
+      } else {
+        setColor(null);
+      }
+    },
     minValue: range.minValue / multiplier,
     maxValue: range.maxValue / multiplier,
     step: range.step / multiplier,