From 242f40837a2fdd27a778ef8b2f2824875348eda7 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Wed, 8 Jan 2025 11:08:58 +0100
Subject: [PATCH] fix after resolving conflicts

---
 .../AlphaSliderDefault.stories.tsx            | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx b/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx
index f837f1dcc65f4..82867dbc8a908 100644
--- a/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx
+++ b/packages/react-components/react-color-picker-preview/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx
@@ -27,13 +27,14 @@ 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 [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) =>
+  };
+  const onTransparancySliderChange: AlphaSliderProps['onChange'] = (_, data) =>
     setTransparancyColor({ ...data.color, a: data.color.a ?? 1 });
   const resetSlider = () => setColor(COLOR);
   const resetTransparencySlider = () => setTransparancyColor(COLOR);
@@ -52,9 +53,23 @@ const onSliderChange: AlphaSliderProps['onChange'] = (_, data) => {
       <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
       <Button onClick={resetSlider}>Reset</Button>
       <h3>Transparency</h3>
-      <AlphaSlider color={transparancyColor} onChange={onTransparancySliderChange} transparency {...props} />
-      <AlphaSlider color={transparancyColor} onChange={onTransparancySliderChange} aria-valuetext={`${value}%`}
-        aria-label="Vertical alpha" transparency vertical {...props} />
+      <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>