Updated tests and types, removed overflowColor

microsoft · Nov 15, 2024 · f54624d · f54624d
1 parent b4fefd6
commit f54624d
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 32 deletions.
diff --git a/...onents/react-color-picker-preview/library/etc/react-color-picker-preview.api.md b/...onents/react-color-picker-preview/library/etc/react-color-picker-preview.api.md
@@ -20,9 +20,7 @@ export const AlphaSlider: ForwardRefComponent<AlphaSliderProps>;
 export const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots>;
 
 // @public
-export type AlphaSliderProps = Omit<ComponentProps<Partial<AlphaSliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'value'> & ColorSliderProps & {
-    overlayColor?: string;
-};
+export type AlphaSliderProps = Omit<ComponentProps<Partial<AlphaSliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'value' | ' color'> & ColorSliderProps;
 
 // @public (undocumented)
 export type AlphaSliderSlots = ColorSliderSlots;
@@ -61,8 +59,8 @@ export const ColorPicker: ForwardRefComponent<ColorPickerProps>;
 export const colorPickerClassNames: SlotClassNames<ColorPickerSlots>;
 
 // @public
-export type ColorPickerProps = ComponentProps<ColorPickerSlots> & {
-    color: string;
+export type ColorPickerProps = ComponentProps<Omit<ColorPickerSlots, 'color'>> & {
+    color: HsvColor;
     onColorChange?: EventHandler<ColorPickerOnChangeData>;
 };
 
@@ -81,11 +79,12 @@ export const ColorSlider: ForwardRefComponent<ColorSliderProps>;
 export const colorSliderClassNames: SlotClassNames<ColorSliderSlots>;
 
 // @public
-export type ColorSliderProps = Omit<ComponentProps<Partial<ColorSliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'value'> & {
+export type ColorSliderProps = Omit<ComponentProps<Partial<ColorSliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'value' | 'color'> & {
     channel?: string;
     onChange?: EventHandler<SliderOnChangeData>;
     vertical?: boolean;
-    color?: string;
+    color?: HsvColor;
+    defaultColor?: HsvColor;
 };
 
 // @public (undocumented)

diff --git a/...onents/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.test.tsx b/...onents/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.test.tsx
@@ -25,12 +25,12 @@ describe('AlphaSlider', () => {
   });
 
   it('renders a default state', () => {
-    const result = render(<AlphaSlider overlayColor="red" />);
+    const result = render(<AlphaSlider color={{ h: 0, s: 1, v: 1 }} />);
     expect(result.container).toMatchInlineSnapshot(`
       <div>
         <div
           class="fui-ColorSlider fui-AlphaSlider"
-          style="--fui-AlphaSlider--direction: 90deg; --fui-AlphaSlider--progress: 100%; --fui-AlphaSlider__thumb--color: transparent; --fui-AlphaSlider__rail--color: hsl(0 0%, 0%);"
+          style="--fui-AlphaSlider--direction: 90deg; --fui-AlphaSlider--progress: 100%; --fui-AlphaSlider__thumb--color: transparent; --fui-AlphaSlider__rail--color: hsl(0 100%, 50%);"
         >
           <input
             class="fui-ColorSlider__input fui-AlphaSlider__input"

diff --git a/...onents/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.types.ts b/...onents/react-color-picker-preview/library/src/components/AlphaSlider/AlphaSlider.types.ts
@@ -1,6 +1,5 @@
 import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
 import type { ColorSliderSlots, ColorSliderProps, ColorSliderState } from '../ColorSlider/ColorSlider.types';
-import type { HsvColor } from '../ColorPicker/ColorPicker.types';
 
 export type AlphaSliderSlots = ColorSliderSlots;
 
@@ -9,14 +8,9 @@ export type AlphaSliderSlots = ColorSliderSlots;
  */
 export type AlphaSliderProps = Omit<
   ComponentProps<Partial<AlphaSliderSlots>, 'input'>,
-  'defaultValue' | 'onChange' | 'value'
+  'defaultValue' | 'onChange' | 'value' | ' color'
 > &
-  ColorSliderProps & {
-    /**
-     * The color to overlay on the alpha slider.
-     */
-    overlayColor?: HsvColor;
-  };
+  ColorSliderProps;
 
 /**
  * State used in rendering AlphaSlider

diff --git a/...omponents/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSlider.ts b/...omponents/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSlider.ts
@@ -19,7 +19,7 @@ export const useAlphaSlider_unstable = (
   const nativeProps = getPartitionedNativeProps({
     props,
     primarySlotTagName: 'input',
-    excludedPropNames: ['onChange'],
+    excludedPropNames: ['onChange', 'color'],
   });
 
   const {

diff --git a/...ents/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts b/...ents/react-color-picker-preview/library/src/components/AlphaSlider/useAlphaSliderState.ts
@@ -7,6 +7,7 @@ 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 '../ColorPicker/ColorPicker.types';
 
 export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps) => {
   'use no memo';
@@ -15,7 +16,7 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp
   const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);
   const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);
   const { color, onChange = onChangeFromContext } = props;
-  const hsvColor = colorFromContext || color;
+  const hsvColor = color || colorFromContext;
   const hslColor = tinycolor(hsvColor).toHsl();
 
   const [currentValue, setCurrentValue] = useControllableState({
@@ -30,7 +31,7 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp
 
   const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {
     const newValue = Number(event.target.value);
-    const newColor = { ...hsvColor, a: newValue / 100 };
+    const newColor: HsvColor = { ...hsvColor, a: newValue / 100 };
     setCurrentValue(newValue);
     inputOnChange?.(event);
     onChange?.(event, { type: 'change', event, color: newColor });

diff --git a/...ct-components/react-color-picker-preview/library/src/components/ColorArea/useColorArea.ts b/...ct-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,
@@ -40,7 +40,7 @@ export const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTML
 
   const [hsvColor, setColor] = useControllableState<HsvColor>({
     defaultState: props.defaultColor,
-    state: colorFromContext || color,
+    state: color || colorFromContext,
     initialState: INITIAL_COLOR_HSV,
   });
   const saturation = Math.round(hsvColor.s * 100);

diff --git a/...onents/react-color-picker-preview/library/src/components/ColorPicker/ColorPicker.test.tsx b/...onents/react-color-picker-preview/library/src/components/ColorPicker/ColorPicker.test.tsx
@@ -10,7 +10,7 @@ describe('ColorPicker', () => {
   });
 
   it('renders a default state', () => {
-    const result = render(<ColorPicker color="red" />);
+    const result = render(<ColorPicker color={{ h: 0, s: 1, v: 1 }} />);
     expect(result.container).toMatchInlineSnapshot(`
       <div>
         <div

diff --git a/...onents/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.test.tsx b/...onents/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/...onents/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.types.ts b/...onents/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/...omponents/react-color-picker-preview/library/src/components/ColorSlider/useColorSlider.ts b/...omponents/react-color-picker-preview/library/src/components/ColorSlider/useColorSlider.ts
@@ -35,7 +35,7 @@ export const useColorSlider_unstable = (
   const nativeProps = getPartitionedNativeProps({
     props,
     primarySlotTagName: 'input',
-    excludedPropNames: ['onChange'],
+    excludedPropNames: ['onChange', 'color'],
   });
 
   const {
@@ -49,7 +49,7 @@ export const useColorSlider_unstable = (
     thumb,
   } = props;
 
-  const hsvColor = colorFromContext || color;
+  const hsvColor = color || colorFromContext;
 
   const [currentValue, setCurrentValue] = useControllableState({
     defaultState: props.defaultColor?.h,

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
@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 import type { ContextSelector, Context } from '@fluentui/react-context-selector';
-import type { ColorPickerProps, ColorPickerState, HsvColor } from '../components/ColorPicker/ColorPicker.types';
+import type { ColorPickerState, HsvColor } from '../components/ColorPicker/ColorPicker.types';
+import { INITIAL_COLOR_HSV } from '../utils/constants';
 
 /**
  * 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 +33,7 @@ export const colorPickerContextDefaultValue: ColorPickerContextValue = {
   requestChange: () => {
     /*noop*/
   },
-  color: undefined,
+  color: { ...INITIAL_COLOR_HSV },
 };
 
 export type ColorPickerContextValues = {

diff --git a/...ponents/react-color-picker-preview/stories/src/AlphaSlider/AlphaSliderDefault.stories.tsx b/...ponents/react-color-picker-preview/stories/src/AlphaSlider/AlphaSliderDefault.stories.tsx
@@ -29,8 +29,8 @@ export const Default = (props: Partial<AlphaSliderProps>) => {
 
   return (
     <div className={styles.example}>
-      <AlphaSlider overlayColor={COLOR} color={color} onChange={onSliderChange} {...props} />
-      <AlphaSlider overlayColor={COLOR} color={color} onChange={onSliderChange} vertical {...props} />
+      <AlphaSlider color={color} onChange={onSliderChange} {...props} />
+      <AlphaSlider color={color} onChange={onSliderChange} vertical {...props} />
       <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
       <Button onClick={resetSlider}>Reset</Button>
     </div>