Updated tests and types

ValentinaKozlova · ValentinaKozlova · commit 98a76044c73e · 2024-11-14T16:56:13.000+01:00
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.test.tsx b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.test.tsx
@@ -25,7 +25,8 @@ describe('AlphaSlider', () => {
   });
 
   it('renders a default state', () => {
-    const result = render(<AlphaSlider overlayColor="red" />);
+    const hsvColor = { h: 0, s: 1, v: 1 };
+    const result = render(<AlphaSlider color={hsvColor} />);
     expect(result.container).toMatchInlineSnapshot(`
       <div>
         <div
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.types.ts b/packages/react-components/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.types.ts
@@ -9,7 +9,7 @@ export type AlphaSliderSlots = ColorSliderSlots;
  */
 export type AlphaSliderProps = Omit<
   ComponentProps<Partial<AlphaSliderSlots>, 'input'>,
-  'defaultValue' | 'onChange' | 'value'
+  'defaultValue' | 'onChange' | 'value' | ' color'
 > &
   ColorSliderProps & {
     /**
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/useColorArea.ts b/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/useColorArea.ts
@@ -29,7 +29,7 @@ export const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTML
   const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);
 
   const {
-    onChange = onChangeFromContext,
+    onChange = onChangeFromContext as unknown as ColorAreaProps['onChange'],
     // Slots
     inputX,
     inputY,
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.test.tsx b/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.test.tsx
@@ -21,6 +21,8 @@ describe('ColorSlider', () => {
           <input
             class="fui-ColorSlider__input"
             id="slider-9"
+            max="360"
+            min="0"
             type="range"
             value="0"
           />
@@ -42,7 +44,7 @@ describe('ColorSlider', () => {
   });
 
   it('applies the color prop', () => {
-    render(<ColorSlider color="#f09" />);
+    render(<ColorSlider color={{ h: 324, s: 1, v: 1 }} />);
     expect(screen.getByRole('slider').getAttribute('value')).toEqual('324');
   });
 
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.types.ts b/packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.types.ts
@@ -18,7 +18,7 @@ export type ColorSliderSlots = {
  */
 export type ColorSliderProps = Omit<
   ComponentProps<Partial<ColorSliderSlots>, 'input'>,
-  'defaultValue' | 'onChange' | 'value'
+  'defaultValue' | 'onChange' | 'value' | 'color'
 > & {
   channel?: string;
 
diff --git a/packages/react-components/react-color-picker-preview/library/src/contexts/colorPicker.ts b/packages/react-components/react-color-picker-preview/library/src/contexts/colorPicker.ts
@@ -6,7 +6,8 @@ import type { ColorPickerProps, ColorPickerState, HsvColor } from '../components
 /**
  * The context through which individual color controls communicate with the picker.
  */
-export type ColorPickerContextValue = Pick<ColorPickerProps, 'color'> & {
+export type ColorPickerContextValue = {
+  color: HsvColor;
   /**
    * @internal
    * Callback used by Sliders to request a change on it's selected value
@@ -31,7 +32,7 @@ export const colorPickerContextDefaultValue: ColorPickerContextValue = {
   requestChange: () => {
     /*noop*/
   },
-  color: undefined,
+  color: { h: 0, s: 0, v: 0 },
 };
 
 export type ColorPickerContextValues = {
