perf-app: added SwatchPicker scenario (#31081)

microsoft · Apr 17, 2024 · b2c6867 · b2c6867
1 parent 4c66c2a
commit b2c6867
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
@@ -25,6 +25,7 @@
     "@fluentui/react-persona": "*",
     "@fluentui/react-provider": "*",
     "@fluentui/react-spinbutton": "*",
+    "@fluentui/react-swatch-picker-preview": "*",
     "@fluentui/react-theme": "*",
     "@griffel/core": "^1.14.1",
     "@microsoft/load-themed-styles": "^1.10.26",

diff --git a/apps/perf-test-react-components/src/scenarios/SwatchPicker.tsx b/apps/perf-test-react-components/src/scenarios/SwatchPicker.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SwatchPicker, ColorSwatch, ImageSwatch, EmptySwatch } from '@fluentui/react-swatch-picker-preview';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+
+const Scenario = () => (
+  <SwatchPicker aria-label="SwatchPicker default" defaultSelectedValue="FF1921">
+    <ColorSwatch color="#FF1921" value="FF1921" aria-label="red" />
+    <ImageSwatch src="path/img.png" value="img" aria-label="img" />
+    <EmptySwatch />
+  </SwatchPicker>
+);
+
+Scenario.decorator = (props: { children: React.ReactNode }) => (
+  <FluentProvider theme={webLightTheme}>{props.children}</FluentProvider>
+);
+
+export default Scenario;