perf-app: Added performance test scenario for the ColorPicker (#33496)

microsoft · Dec 20, 2024 · fc5f0b1 · fc5f0b1
1 parent df9a753
commit fc5f0b1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json
@@ -21,6 +21,7 @@
     "@fluentui/scripts-perf-test-flamegrill": "*",
     "@fluentui/react-avatar": "*",
     "@fluentui/react-button": "*",
+    "@fluentui/react-color-picker-preview": "*",
     "@fluentui/react-components": "*",
     "@fluentui/react-field": "*",
     "@fluentui/react-persona": "*",

diff --git a/apps/perf-test-react-components/src/scenarios/ColorPicker.tsx b/apps/perf-test-react-components/src/scenarios/ColorPicker.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ColorPicker, ColorArea, ColorSlider, AlphaSlider } from '@fluentui/react-color-picker-preview';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+
+const Scenario = () => (
+  <ColorPicker color={{ h: 109, s: 1, v: 0.91 }}>
+    <ColorArea />
+    <ColorSlider />
+    <AlphaSlider />
+  </ColorPicker>
+);
+
+Scenario.decorator = (props: { children: React.ReactNode }) => (
+  <FluentProvider theme={webLightTheme}>{props.children}</FluentProvider>
+);
+
+export default Scenario;