feat(react-color-picker): Added custom channels for ColorSlider (#33763)

Co-authored-by: Dmytro Kirpa <kirpadv@gmail.com>

Author: ValentinaKozlova

change/@fluentui-react-color-picker-preview-74a7fc13-787d-4792-9fc2-a2a1c95113ad.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "custom color channels",
+  "packageName": "@fluentui/react-color-picker-preview",
+  "email": "v.kozlova13@gmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -20,7 +20,7 @@ export const AlphaSlider: ForwardRefComponent<AlphaSliderProps>;
 export const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots>;
 
 // @public
-export type AlphaSliderProps = ColorSliderProps & {
+export type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {
     transparency?: boolean;
 };
 
@@ -83,7 +83,7 @@ export const colorSliderClassNames: SlotClassNames<ColorSliderSlots>;
 
 // @public
 export type ColorSliderProps = Omit<ComponentProps<Partial<ColorSliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'value' | 'color'> & Pick<ColorPickerProps, 'shape'> & {
-    channel?: string;
+    channel?: ColorChannel;
     onChange?: EventHandler<SliderOnChangeData>;
     vertical?: boolean;
     color?: HsvColor;
@@ -99,7 +99,7 @@ export type ColorSliderSlots = {
 };
 
 // @public
-export type ColorSliderState = ComponentState<ColorSliderSlots> & Pick<ColorSliderProps, 'vertical' | 'shape'>;
+export type ColorSliderState = ComponentState<ColorSliderSlots> & Pick<ColorSliderProps, 'vertical' | 'shape' | 'channel'>;
 
 // @public
 export const renderAlphaSlider_unstable: (state: AlphaSliderState) => JSX.Element;

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

@@ -6,7 +6,7 @@ export type AlphaSliderSlots = ColorSliderSlots;
 /**
  * AlphaSlider Props
  */
-export type AlphaSliderProps = ColorSliderProps & {
+export type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {
   /**
    * The `transparency` property determines how the alpha channel is interpreted.
    * - When `false`, the alpha channel represents the opacity of the color.

packages/react-components/react-color-picker-preview/library/src/components/ColorSlider/ColorSlider.test.tsx

@@ -17,7 +17,7 @@ describe('ColorSlider', () => {
         <div
           class="fui-ColorSlider"
           role="group"
-          style="--fui-Slider--direction: -90deg; --fui-Slider--progress: 0%; --fui-Slider__thumb--color: hsl(0, 100%, 50%);"
+          style="--fui-Slider--direction: -90deg; --fui-Slider--progress: 0%; --fui-Slider__thumb--color: hsl(0, 100%, 50%); --fui-Slider__rail--color: hsl(0 0%, 0%);"
         >
           <input
             aria-orientation="horizontal"

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

@@ -14,6 +14,8 @@ export type ColorSliderSlots = {
   input: NonNullable<Slot<'input'>>;
 };
 
+export type ColorChannel = 'hue' | 'saturation' | 'value';
+
 /**
  * ColorSlider Props
  */
@@ -22,7 +24,11 @@ export type ColorSliderProps = Omit<
   'defaultValue' | 'onChange' | 'value' | 'color'
 > &
   Pick<ColorPickerProps, 'shape'> & {
-    channel?: string;
+    /**
+     * Color channel of the Slider.
+     * @default `hue`
+     */
+    channel?: ColorChannel;
 
     /**
      * Triggers a callback when the value has been changed. This will be called on every individual step.
@@ -49,4 +55,5 @@ export type ColorSliderProps = Omit<
 /**
  * State used in rendering ColorSlider
  */
-export type ColorSliderState = ComponentState<ColorSliderSlots> & Pick<ColorSliderProps, 'vertical' | 'shape'>;
+export type ColorSliderState = ComponentState<ColorSliderSlots> &
+  Pick<ColorSliderProps, 'vertical' | 'shape' | 'channel'>;

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

@@ -1,19 +1,22 @@
 import * as React from 'react';
+import { tinycolor } from '@ctrl/tinycolor';
 import {
   getPartitionedNativeProps,
   useId,
   slot,
-  clamp,
   useControllableState,
   useEventCallback,
 } from '@fluentui/react-utilities';
 import { colorSliderCSSVars } from './useColorSliderStyles.styles';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';
 import { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';
-import { MIN, HUE_MAX as MAX } from '../../utils/constants';
+import { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';
 import { getPercent } from '../../utils/getPercent';
 import { createHsvColor } from '../../utils/createHsvColor';
+import { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';
+import { HsvColor } from '../../types/color';
+import { INITIAL_COLOR_HSV } from '../../utils/constants';
 
 /**
  * Create the state required to render ColorSlider.
@@ -42,6 +45,7 @@ export const useColorSlider_unstable = (
 
   const {
     color,
+    channel = 'hue',
     onChange = onChangeFromContext,
     shape = shapeFromContext,
     vertical,
@@ -53,34 +57,61 @@ export const useColorSlider_unstable = (
   } = props;
 
   const hsvColor = color || colorFromContext;
+  const hslColor = tinycolor(hsvColor).toHsl();
 
-  const [currentValue, setCurrentValue] = useControllableState({
-    defaultState: props.defaultColor?.h,
-    state: hsvColor?.h,
-    initialState: 0,
+  const [currentColor, setCurrentColor] = useControllableState<HsvColor>({
+    defaultState: props.defaultColor,
+    state: hsvColor,
+    initialState: INITIAL_COLOR_HSV,
   });
-  const clampedValue = clamp(currentValue, MIN, MAX);
+
+  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;
+
+  const valueChannelActions: ChannelActions<number> = {
+    hue: clampValue(currentColor.h),
+    saturation: clampValue(currentColor.s * 100),
+    value: clampValue(currentColor.v * 100),
+  };
+
+  const clampedValue = adjustChannel(channel, valueChannelActions);
   const valuePercent = getPercent(clampedValue, MIN, MAX);
 
   const inputOnChange = input?.onChange;
 
   const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {
     const newValue = Number(event.target.value);
-    const newColor = createHsvColor({ ...hsvColor, h: newValue });
-    setCurrentValue(newValue);
+    const colorActions: ChannelActions<() => HsvColor> = {
+      hue: () => createHsvColor({ ...hsvColor, h: newValue }),
+      saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),
+      value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),
+    };
+    const newColor = adjustChannel(channel, colorActions)();
+
+    setCurrentColor(newColor);
+
     inputOnChange?.(event);
-    onChange?.(event, { type: 'change', event, color: newColor });
+    onChange?.(event, {
+      type: 'change',
+      event,
+      color: newColor,
+    });
   });
 
   const rootVariables = {
     [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',
     [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
-    [colorSliderCSSVars.thumbColorVar]: `hsl(${clampedValue}, 100%, 50%)`,
+    [colorSliderCSSVars.thumbColorVar]:
+      channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),
+    [colorSliderCSSVars.railColorVar]:
+      channel === 'hue'
+        ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`
+        : `hsl(${hslColor.h} 100%, 50%)`,
   };
 
   const state: ColorSliderState = {
     shape,
     vertical,
+    channel,
     components: {
       input: 'input',
       rail: 'div',

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

@@ -14,6 +14,7 @@ export const colorSliderCSSVars = {
   sliderDirectionVar: `--fui-Slider--direction`,
   sliderProgressVar: `--fui-Slider--progress`,
   thumbColorVar: `--fui-Slider__thumb--color`,
+  railColorVar: `--fui-Slider__rail--color`,
 };
 
 // Internal CSS variables
@@ -62,9 +63,18 @@ const useStyles = makeStyles({
     gridTemplateRows: `1fr 100% 1fr`,
     gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`,
   },
+});
+
+const useChannelStyles = makeStyles({
   hue: {
     backgroundImage: hueBackground,
   },
+  saturation: {
+    backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,
+  },
+  value: {
+    backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,
+  },
 });
 
 /**
@@ -200,6 +210,7 @@ export const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSli
   const thumbStyles = useThumbStyles();
   const inputStyles = useInputStyles();
   const shapeStyles = useShapeStyles();
+  const channelStyles = useChannelStyles();
   const isVertical = state.vertical;
 
   state.root.className = mergeClasses(
@@ -212,7 +223,7 @@ export const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSli
   state.rail.className = mergeClasses(
     colorSliderClassNames.rail,
     railStyles.rail,
-    styles.hue,
+    channelStyles[state.channel || 'hue'],
     shapeStyles[state.shape || 'rounded'],
     isVertical ? railStyles.vertical : railStyles.horizontal,
     state.rail.className,

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

@@ -0,0 +1,40 @@
+import { clampValue, adjustChannel, ChannelActions } from './adjustChannel';
+import { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';
+
+describe('clampValue', () => {
+  it('should clamp value within the hue range', () => {
+    expect(clampValue(-10, 'hue')).toBe(MIN);
+    expect(clampValue(370, 'hue')).toBe(HUE_MAX);
+    expect(clampValue(180, 'hue')).toBe(180);
+  });
+
+  it('should clamp value within the saturation/value range', () => {
+    expect(clampValue(-10, 'saturation')).toBe(MIN);
+    expect(clampValue(110, 'saturation')).toBe(COLOR_MAX);
+    expect(clampValue(50, 'saturation')).toBe(50);
+
+    expect(clampValue(-10, 'value')).toBe(MIN);
+    expect(clampValue(110, 'value')).toBe(COLOR_MAX);
+    expect(clampValue(50, 'value')).toBe(50);
+  });
+
+  it('should default to hue if no channel is provided', () => {
+    expect(clampValue(-10)).toBe(MIN);
+    expect(clampValue(370)).toBe(HUE_MAX);
+    expect(clampValue(180)).toBe(180);
+  });
+});
+
+describe('adjustChannel', () => {
+  const actions: ChannelActions<string> = {
+    hue: 'hueAction',
+    saturation: 'saturationAction',
+    value: 'valueAction',
+  };
+
+  it('should return the correct action for the given channel', () => {
+    expect(adjustChannel('hue', actions)).toBe('hueAction');
+    expect(adjustChannel('saturation', actions)).toBe('saturationAction');
+    expect(adjustChannel('value', actions)).toBe('valueAction');
+  });
+});

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

@@ -0,0 +1,33 @@
+import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';
+import { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';
+import { clamp } from '@fluentui/react-utilities';
+
+/**
+ * Clamps a given value to the valid range for a specified color channel.
+ *
+ * @param value - The numeric value to be clamped.
+ * @param channel - The color channel to use for clamping. Defaults to 'hue'.
+ * @returns The clamped value within the range defined by the color channel.
+ */
+export function clampValue(value: number, channel: ColorChannel = 'hue') {
+  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;
+  return clamp(value, MIN, MAX);
+}
+
+export type ChannelActions<T> = {
+  hue: T;
+  saturation: T;
+  value: T;
+};
+
+/**
+ * Adjusts the specified color channel using the provided actions.
+ *
+ * @template T - The type of the result returned by the actions.
+ * @param {ColorChannel} channel - The color channel to adjust.
+ * @param {ChannelActions<T>} actions - An object containing actions for each color channel.
+ * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.
+ */
+export function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {
+  return actions[channel] || actions.hue;
+}

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

@@ -0,0 +1,34 @@
+import { createHsvColor } from './createHsvColor';
+import { HsvColor } from '../types/color';
+
+describe('createHsvColor', () => {
+  it('should create an HSV color with default values', () => {
+    const color: HsvColor = createHsvColor({});
+    expect(color).toEqual({ h: 0, s: 0, v: 0, a: 1 });
+  });
+
+  it('should create an HSV color with specified hue', () => {
+    const color: HsvColor = createHsvColor({ h: 120 });
+    expect(color).toEqual({ h: 120, s: 0, v: 0, a: 1 });
+  });
+
+  it('should create an HSV color with specified saturation', () => {
+    const color: HsvColor = createHsvColor({ s: 50 });
+    expect(color).toEqual({ h: 0, s: 50, v: 0, a: 1 });
+  });
+
+  it('should create an HSV color with specified value', () => {
+    const color: HsvColor = createHsvColor({ v: 75 });
+    expect(color).toEqual({ h: 0, s: 0, v: 75, a: 1 });
+  });
+
+  it('should create an HSV color with specified alpha', () => {
+    const color: HsvColor = createHsvColor({ a: 0.5 });
+    expect(color).toEqual({ h: 0, s: 0, v: 0, a: 0.5 });
+  });
+
+  it('should create an HSV color with all specified components', () => {
+    const color: HsvColor = createHsvColor({ h: 180, s: 100, v: 100, a: 0.8 });
+    expect(color).toEqual({ h: 180, s: 100, v: 100, a: 0.8 });
+  });
+});