fix(react-color-picker): default state of ColorPicker (#33715)

change/@fluentui-react-color-picker-preview-0c1f8cab-ce3f-4b53-a9d0-08e7c1907218.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: default state for ColorSliders",
+  "packageName": "@fluentui/react-color-picker-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-color-picker-preview/library/etc/react-color-picker-preview.api.md

@@ -62,7 +62,7 @@ export const colorPickerClassNames: SlotClassNames<ColorPickerSlots>;
 
 // @public
 export type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, 'color'> & {
-    color: HsvColor;
+    color?: HsvColor;
     onColorChange?: EventHandler<ColorPickerOnChangeData>;
     shape?: 'rounded' | 'square';
 };

packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts

@@ -7,8 +7,8 @@ import type { AlphaSliderState, AlphaSliderProps } from './AlphaSlider.types';
 import { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';
 import { MIN, MAX } from '../../utils/constants';
 import { getPercent } from '../../utils/getPercent';
-import type { HsvColor } from '../../types/color';
 import { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils';
+import { createHsvColor } from '../../utils/createHsvColor';
 
 export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps) => {
   'use no memo';
@@ -33,7 +33,7 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp
 
   const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {
     const newValue = adjustToTransparency(Number(event.target.value), transparency);
-    const newColor: HsvColor = { ...hsvColor, a: newValue / 100 };
+    const newColor = createHsvColor({ ...hsvColor, a: newValue / 100 });
     setCurrentValue(newValue);
     inputOnChange?.(event);
     onChange?.(event, { type: 'change', event, color: newColor });

packages/react-components/react-color-picker-preview/library/src/components/ColorPicker/ColorPicker.types.ts

@@ -18,7 +18,7 @@ export type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, '
   /**
    * Selected color.
    */
-  color: HsvColor;
+  color?: HsvColor;
 
   /**
    * Callback for when the user changes the color.

packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/useColorSlider.ts

@@ -13,6 +13,7 @@ import type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';
 import { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';
 import { MIN, HUE_MAX as MAX } from '../../utils/constants';
 import { getPercent } from '../../utils/getPercent';
+import { createHsvColor } from '../../utils/createHsvColor';
 
 /**
  * Create the state required to render ColorSlider.
@@ -65,7 +66,7 @@ export const useColorSlider_unstable = (
 
   const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {
     const newValue = Number(event.target.value);
-    const newColor = { ...hsvColor, h: newValue };
+    const newColor = createHsvColor({ ...hsvColor, h: newValue });
     setCurrentValue(newValue);
     inputOnChange?.(event);
     onChange?.(event, { type: 'change', event, color: newColor });

packages/react-components/react-color-picker-preview/library/src/contexts/colorPicker.ts

@@ -3,13 +3,11 @@ import { createContext, useContextSelector } from '@fluentui/react-context-selec
 import type { ContextSelector, Context } from '@fluentui/react-context-selector';
 import type { ColorPickerState, ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';
 import type { HsvColor } from '../types/color';
-import { INITIAL_COLOR_HSV } from '../utils/constants';
 
 /**
  * The context through which individual color controls communicate with the picker.
  */
-export type ColorPickerContextValue = Pick<ColorPickerProps, 'shape'> & {
-  color: HsvColor;
+export type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'> & {
   /**
    * @internal
    * Callback used by Sliders to request a change on it's selected value
@@ -35,7 +33,7 @@ export const colorPickerContextDefaultValue: ColorPickerContextValue = {
   requestChange: () => {
     /*noop*/
   },
-  color: { ...INITIAL_COLOR_HSV },
+  color: undefined,
   shape: 'rounded',
 };
 

packages/react-components/react-color-picker-preview/library/src/utils/createHsvColor.ts

@@ -0,0 +1,5 @@
+import { HsvColor } from '../types/color';
+
+export function createHsvColor({ h = 0, s = 0, v = 0, a = 1 }: Partial<HsvColor>): HsvColor {
+  return { h, s, v, a };
+}