Remove step from colorfield as well and fix its useEffect same as numberfield

Author: snowystinger

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

@@ -100,7 +100,7 @@ are calculated from the current `value` or zero if the `value` is empty. A `step
 defaulting to `1` if unspecified.
 
 ```tsx example
-<ColorField label="Primary Color" step={0x33} />
+<ColorField label="Primary Color" step={16} />
 ```
 
 ## Validation

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

@@ -283,14 +283,13 @@ describe('ColorField', function () {
 
   it.each`
     Name                                | expected                 | key
-    ${'increment with arrow up key'}    | ${parseColor('#AAAAAE')}  | ${'ArrowUp'}
-    ${'decrement with arrow down key'}  | ${parseColor('#AAAAA6')}  | ${'ArrowDown'}
+    ${'increment with arrow up key'}    | ${parseColor('#AAAAAB')}  | ${'ArrowUp'}
+    ${'decrement with arrow down key'}  | ${parseColor('#AAAAA9')}  | ${'ArrowDown'}
   `('should handle $Name event', function ({expected, key}) {
     let onChangeSpy = jest.fn();
     let {getByLabelText} = renderComponent({
       defaultValue: '#aaa',
-      onChange: onChangeSpy,
-      step: 4
+      onChange: onChangeSpy
     });
     let colorField = getByLabelText('Primary Color');
     expect(colorField.value).toBe('#AAAAAA');
@@ -303,14 +302,13 @@ describe('ColorField', function () {
 
   it.each`
     Name                                | expected                        | deltaY
-    ${'increment with mouse wheel'}     | ${parseColor('#AAAAAE')}  | ${10}
-    ${'decrement with mouse wheel'}     | ${parseColor('#AAAAA6')}  | ${-10}
+    ${'increment with mouse wheel'}     | ${parseColor('#AAAAAB')}  | ${10}
+    ${'decrement with mouse wheel'}     | ${parseColor('#AAAAA9')}  | ${-10}
   `('should handle $Name event', function ({expected, deltaY}) {
     let onChangeSpy = jest.fn();
     let {getByLabelText} = renderComponent({
       defaultValue: '#aaa',
-      onChange: onChangeSpy,
-      step: 4
+      onChange: onChangeSpy
     });
     let colorField = getByLabelText('Primary Color');
     expect(colorField.value).toBe('#AAAAAA');

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

@@ -14,7 +14,7 @@ import {Color, ColorFieldProps} from '@react-types/color';
 import {parseColor} from './Color';
 import {useColor} from './useColor';
 import {useControlledState} from '@react-stately/utils';
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {useMemo, useRef, useState} from 'react';
 
 export interface ColorFieldState {
   /**
@@ -63,11 +63,11 @@ export function useColorFieldState(
   props: ColorFieldProps
 ): ColorFieldState {
   let {
-    step = MIN_COLOR.getChannelRange('red').step,
     value,
     defaultValue,
     onChange
   } = props;
+  let {step} = MIN_COLOR.getChannelRange('red');
 
   let initialValue = useColor(value);
   let initialDefaultValue = useColor(defaultValue);
@@ -85,9 +85,12 @@ export function useColorFieldState(
     }
   };
 
-  useEffect(() => {
+  let [prevValue, setPrevValue] = useState(colorValue);
+  if (prevValue !== colorValue) {
     setInputValue(colorValue ? colorValue.toString('hex') : '');
-  }, [colorValue, setInputValue]);
+    setPrevValue(colorValue);
+  }
+
 
   let parsedValue = useMemo(() => {
     let color;
@@ -97,7 +100,7 @@ export function useColorFieldState(
       color = null;
     }
     return color;
-  }, [inputValue]);
+  }, [parseColor, inputValue]);
   let parsed = useRef(null);
   parsed.current = parsedValue;
 

packages/@react-stately/color/test/useColorFieldState.test.js

@@ -42,20 +42,6 @@ describe('useColorFieldState tests', function () {
     expect(result.current.inputValue).toBe('#AABBCC');
   });
 
-  it.each`
-    action          | props
-    ${'increment'}  | ${{defaultValue: '#000008', step: 4}}
-    ${'decrement'}  | ${{defaultValue: '#000010', step: 4}}
-  `('should $action', function ({action, props}) {
-    let {result} = renderHook(() => useColorFieldState(props));
-    act(() => result.current[action]());
-    expect(result.current.colorValue.getChannelValue('red')).toBe(0);
-    expect(result.current.colorValue.getChannelValue('green')).toBe(0);
-    expect(result.current.colorValue.getChannelValue('blue')).toBe(12);
-    expect(result.current.colorValue.getChannelValue('alpha')).toBe(1);
-    expect(result.current.inputValue).toBe('#00000C');
-  });
-
   it.each`
     name                                 | action               | props
     ${'not increment beyond max value'}  | ${'increment'}       | ${{defaultValue: '#ffffff'}}

packages/@react-types/color/src/index.d.ts

@@ -80,12 +80,7 @@ export interface Color {
 
 export interface ColorFieldProps extends Omit<ValueBase<string | Color | null>, 'onChange'>, InputBase, Validation, FocusableProps, TextInputBase, LabelableProps {
   /** Handler that is called when the value changes. */
-  onChange?: (color: Color | null) => void,
-  /**
-   * The step value to increment and decrement the color by when using the arrow keys.
-   * @default 1
-   */
-  step?: number
+  onChange?: (color: Color | null) => void
 }
 
 export interface AriaColorFieldProps extends ColorFieldProps, AriaLabelingProps, FocusableDOMProps, Omit<TextInputDOMProps, 'minLength' | 'maxLength' | 'pattern' | 'type' | 'inputMode' | 'autoComplete'>, AriaValidationProps {}