feat(react-color-picker): Added transparent option to the AlphaSlider

change/@fluentui-react-color-picker-preview-d36c4ad2-9cc0-4131-bdee-dd557b75c0bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: Added `transparent` option to the AlphaSlider",
+  "packageName": "@fluentui/react-color-picker-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -6,7 +6,9 @@ export type AlphaSliderSlots = ColorSliderSlots;
 /**
  * AlphaSlider Props
  */
-export type AlphaSliderProps = ColorSliderProps;
+export type AlphaSliderProps = ColorSliderProps & {
+  transparency?: boolean;
+};
 
 /**
  * State used in rendering AlphaSlider

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

@@ -15,13 +15,19 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp
   const { dir } = useFluent();
   const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);
   const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);
-  const { color, onChange = onChangeFromContext } = props;
+  const { color, onChange = onChangeFromContext, transparency } = props;
   const hsvColor = color || colorFromContext;
   const hslColor = tinycolor(hsvColor).toHsl();
 
+  function adjustToTransparency(value: number) {
+    return transparency ? 100 - value : value;
+  }
+
+  const defaultState = props.defaultColor?.a !== undefined ? props.defaultColor.a * 100 : undefined;
+  const _state = hsvColor?.a !== undefined ? hsvColor.a * 100 : undefined;
   const [currentValue, setCurrentValue] = useControllableState({
-    defaultState: props.defaultColor?.a ? props.defaultColor.a * 100 : undefined,
-    state: hsvColor?.a ? hsvColor.a * 100 : undefined,
+    defaultState: defaultState && adjustToTransparency(defaultState),
+    state: _state && adjustToTransparency(_state),
     initialState: 100,
   });
   const clampedValue = clamp(currentValue, MIN, MAX);
@@ -30,15 +36,23 @@ export const useAlphaSliderState_unstable = (state: AlphaSliderState, props: Alp
   const inputOnChange = state.input.onChange;
 
   const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {
-    const newValue = Number(event.target.value);
+    const newValue = adjustToTransparency(Number(event.target.value));
     const newColor: HsvColor = { ...hsvColor, a: newValue / 100 };
     setCurrentValue(newValue);
     inputOnChange?.(event);
     onChange?.(event, { type: 'change', event, color: newColor });
   });
 
+  const sliderDirection = state.vertical
+    ? transparency
+      ? '180deg'
+      : '0deg'
+    : dir === 'ltr' && !transparency
+    ? '90deg'
+    : '-90deg';
+
   const rootVariables = {
-    [alphaSliderCSSVars.sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '-90deg',
+    [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,
     [alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
     [alphaSliderCSSVars.thumbColorVar]: `transparent`,
     [alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`,

packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx

@@ -27,13 +27,17 @@ export const AlphaSliderExample = (props: Partial<AlphaSliderProps>) => {
   const styles = useStyles();
 
   const [color, setColor] = React.useState(COLOR);
+  const [transparancyColor, setTransparancyColor] = React.useState(COLOR);
   const [value, setValue] = React.useState(COLOR.a * 100);
   const onSliderChange: AlphaSliderProps['onChange'] = (_, data) => {
     const alpha = data.color.a ?? 1;
     setColor({ ...data.color, a: alpha });
     setValue(alpha * 100);
   };
+  const onTransparancySliderChange: AlphaSliderProps['onChange'] = (_, data) =>
+    setTransparancyColor({ ...data.color, a: data.color.a ?? 1 });
   const resetSlider = () => setColor(COLOR);
+  const resetTransparencySlider = () => setTransparancyColor(COLOR);
 
   return (
     <div className={styles.example}>
@@ -48,6 +52,26 @@ export const AlphaSliderExample = (props: Partial<AlphaSliderProps>) => {
       />
       <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
       <Button onClick={resetSlider}>Reset</Button>
+      <h3>Transparency</h3>
+      <AlphaSlider
+        color={transparancyColor}
+        onChange={onTransparancySliderChange}
+        aria-valuetext={`${value}%`}
+        aria-label="Alpha"
+        transparency
+        {...props}
+      />
+      <AlphaSlider
+        color={transparancyColor}
+        onChange={onTransparancySliderChange}
+        aria-valuetext={`${value}%`}
+        aria-label="Vertical alpha"
+        transparency
+        vertical
+        {...props}
+      />
+      <div className={styles.previewColor} style={{ backgroundColor: tinycolor(transparancyColor).toRgbString() }} />
+      <Button onClick={resetTransparencySlider}>Reset</Button>
     </div>
   );
 };