test(color-picker): Added VR tests for ColorSlider and AlphaSlider (#…

…33672)
microsoft · Jan 22, 2025 · d0f533a · d0f533a
1 parent d9e5810
commit d0f533a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
-import { ColorPicker } from '@fluentui/react-color-picker-preview';
+import { ColorPicker, ColorSlider, AlphaSlider } from '@fluentui/react-color-picker-preview';
 import { SampleColorPicker } from './utils';
 import { Steps } from 'storywright';
 
@@ -15,6 +15,22 @@ export default {
 
 export const Default = () => <SampleColorPicker color={{ h: 109, s: 1, v: 0.91 }} />;
 
+export const ColorSliders = () => (
+  <>
+    <ColorSlider color={{ h: 109, s: 1, v: 0.9 }} />
+    <ColorSlider color={{ h: 184, s: 1, v: 0.9 }} vertical />
+  </>
+);
+
+export const AlphaSliders = () => (
+  <>
+    <AlphaSlider color={{ h: 12, s: 1, v: 0.9, a: 0.7 }} />
+    <AlphaSlider color={{ h: 59, s: 1, v: 1 }} vertical />
+    <AlphaSlider color={{ h: 276, s: 1, v: 0.9, a: 0.2 }} transparency />
+    <AlphaSlider color={{ h: 332, s: 1, v: 0.9, a: 0.1 }} transparency vertical />
+  </>
+);
+
 export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
 
 export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);

diff --git a/apps/vr-tests-react-components/src/stories/ColorPicker/utils.tsx b/apps/vr-tests-react-components/src/stories/ColorPicker/utils.tsx
@@ -6,11 +6,24 @@ import {
   ColorSlider,
   type ColorPickerProps,
 } from '@fluentui/react-color-picker-preview';
+import { makeStyles } from '@griffel/react';
 
-export const SampleColorPicker = (props: ColorPickerProps) => (
-  <ColorPicker {...props}>
-    <ColorArea />
-    <ColorSlider />
-    <AlphaSlider />
-  </ColorPicker>
-);
+const useStyles = makeStyles({
+  example: {
+    width: '300px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+  },
+});
+
+export const SampleColorPicker = (props: ColorPickerProps) => {
+  const styles = useStyles();
+  return (
+    <ColorPicker className={styles.example} {...props}>
+      <ColorArea />
+      <ColorSlider />
+      <AlphaSlider />
+    </ColorPicker>
+  );
+};