From b8d423da1cd0507c189f52f6ac175915df45a02f Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Thu, 9 Jan 2025 04:10:02 -0800
Subject: [PATCH] feat(react-color-picker): added alpha input field (#33536)

Co-authored-by: Dmytro Kirpa <kirpadv@gmail.com>
---
 .../ColorPickerDefault.stories.tsx            | 51 +++++++++++++++++--
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/ColorPickerDefault.stories.tsx b/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/ColorPickerDefault.stories.tsx
index 3d903f1a6eb8b..394822d70e830 100644
--- a/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/ColorPickerDefault.stories.tsx
+++ b/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/ColorPickerDefault.stories.tsx
@@ -50,7 +50,7 @@ const useStyles = makeStyles({
     width: '80px',
   },
   spinButton: {
-    width: '50px',
+    minWidth: '60px',
   },
 });
 
@@ -62,17 +62,20 @@ type RgbKey = 'r' | 'g' | 'b';
 
 export const Default = () => {
   const hexId = useId('hex-input');
+  const alphaId = useId('alpha-input');
 
   const styles = useStyles();
   const [color, setColor] = React.useState(DEFAULT_COLOR_HSV);
   const [hex, setHex] = React.useState(tinycolor(color).toHexString());
   const [rgb, setRgb] = React.useState(tinycolor(color).toRgb());
+  const [alpha, setAlpha] = React.useState(color.a);
   const [namedColor, setNamedColor] = React.useState('');
 
   const handleChange: ColorPickerProps['onColorChange'] = (_, data) => {
     setColor({ ...data.color, a: data.color.a ?? 1 });
     setHex(tinycolor(data.color).toHexString());
     setRgb(tinycolor(data.color).toRgb());
+    setAlpha(data.color.a ?? 1);
     const _namedColor = tinycolor(`hsl(${data.color.h},100%,50%)`).toName();
     if (_namedColor) {
       setNamedColor(_namedColor);
@@ -96,6 +99,26 @@ export const Default = () => {
     }
   };
 
+  const onAlphaChange: SpinButtonProps['onChange'] = React.useCallback(
+    (_ev, data) => {
+      const value = data.value ?? parseFloat(data.displayValue ?? '');
+
+      if (Number.isNaN(value) || value < 0 || value > 1) {
+        return;
+      }
+
+      const newColor = tinycolor({ ...color, a: value });
+
+      if (newColor.isValid) {
+        setColor(newColor.toHsv());
+        setHex(newColor.toHex());
+        setRgb(newColor.toRgb());
+        setAlpha(newColor.a);
+      }
+    },
+    [setAlpha, setRgb, setHex, setColor, color],
+  );
+
   const colorAriaAttributes = {
     'aria-label': 'ColorPicker',
     'aria-roledescription': '2D slider',
@@ -110,7 +133,6 @@ export const Default = () => {
         <AlphaSlider aria-label="Alpha" aria-valuetext={`${color.a * 100}%`} />
       </ColorPicker>
       <div className={styles.inputFields}>
-        <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
         <InputHexField
           id={hexId}
           value={hex}
@@ -119,6 +141,7 @@ export const Default = () => {
             const newColor = tinycolor(value);
             if (newColor.isValid) {
               setColor(newColor.toHsv());
+              setRgb(newColor.toRgb());
             }
             setHex(oldValue => (HEX_COLOR_REGEX.test(value) ? value : oldValue));
           }}
@@ -126,8 +149,9 @@ export const Default = () => {
         <InputRgbField label="Red" value={rgb.r} name="r" onChange={onRgbChange} />
         <InputRgbField label="Green" value={rgb.g} name="g" onChange={onRgbChange} />
         <InputRgbField label="Blue" value={rgb.b} name="b" onChange={onRgbChange} />
+        <InputAlphaField id={alphaId} value={alpha} onChange={onAlphaChange} />
       </div>
-      <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toHexString() }} />
+      <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
     </div>
   );
 };
@@ -182,6 +206,27 @@ const InputRgbField = ({
   );
 };
 
+const InputAlphaField = ({
+  label = 'Alpha',
+  value,
+  onChange,
+  id,
+}: {
+  value: number;
+  label?: string;
+  onChange?: SpinButtonProps['onChange'];
+  id: string;
+}) => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.colorFieldWrapper}>
+      <Label htmlFor={id}>{label}</Label>
+      <SpinButton min={0} max={1} className={styles.spinButton} value={value} step={0.01} onChange={onChange} id={id} />
+    </div>
+  );
+};
+
 const handleOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
   const value = tinycolor(e.target.value);
   if (!value.isValid) {