feat(react-storybook-addon): make withFluentProvider decorator configurable to be used for VR tests

packages/react-components/react-storybook-addon/README.md

@@ -68,3 +68,34 @@ module.exports = {
  - > 💡 this will run `prestorybook` script that compiles addon implementation with all of its direct dependencies that live within monorepo, so it can be consumed by local storybook
 
 2. Every time you do any change to implementation, after you ran your local storybook you'll need to manually run `yarn workspace @fluentui/react-storybook-addon build` to reflect those changes
+
+## Parameter Configuration
+
+- Three custom optional parameters can be set to alter behavior of the addon
+ 1. `dir` - determines whether to render story in `ltr` or `rtl` mode. Default is `undefined`.
+ 2. `fluentTheme` - determines whether to render story theme in `web-light`, `web-dark`, `teams-high-contrast`, `teams-dark`, or `teams-light`. Setting this
+ parameter will disable ability to dynamically change the theme within story canvas or doc.
+ 3. `isVrTest` - when set to `true`, this removes injected padding and background theme that's automatically applied from rendered story.
+
+```js
+import { TEAMS_HIGH_CONTRAST, WEB_DARK, WEB_LIGHT } from '@fluentui/react-storybook-addon';
+import { Button } from '@fluentui/react-components';
+
+export const Button = () => <Button> Hello World </Button>;
+
+export const ButtonDarkMode = {
+ render: Button,
+ parameters: { fluentTheme: WEB_DARK }, // story renders in Dark mode.
+};
+
+export const ButtonHighContrast = {
+ render: Button,
+ parameters: { fluentTheme: TEAMS_HIGH_CONTRAST, isVrTest: true }; // story renders in High Contrast mode without injected padding and background style.
+}
+
+export const ButtonRTL = {
+ render: Button,
+ parameters: { fluentTheme: WEB_LIGHT, dir: 'rtl', isVrTest: true}, // story renders in RTL, Web light mode and without injected padding and background style.
+};
+
+```

packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md

@@ -5,6 +5,7 @@
 ```ts
 
 import { Args } from '@storybook/api';
+import { Parameters as Parameters_2 } from '@storybook/api';
 import { StoryContext } from '@storybook/addons';
 import type { Theme } from '@fluentui/react-theme';
 
@@ -14,12 +15,33 @@ export interface FluentGlobals extends Args {
  [THEME_ID]?: ThemeIds;
 }
 
+// @public
+export interface FluentParameters extends Parameters_2 {
+ // (undocumented)
+ dir?: 'ltr' | 'rtl';
+ // (undocumented)
+ fluentTheme?: ThemeIds;
+ // (undocumented)
+ isVrTest?: boolean;
+}
+
 // @public (undocumented)
 export interface FluentStoryContext extends StoryContext {
  // (undocumented)
  globals: FluentGlobals;
+ // (undocumented)
+ parameters: FluentParameters;
 }
 
+// @public (undocumented)
+export const TEAMS_DARK = "teams-dark";
+
+// @public (undocumented)
+export const TEAMS_HIGH_CONTRAST = "teams-high-contrast";
+
+// @public (undocumented)
+export const TEAMS_LIGHT = "teams-light";
+
 // @public (undocumented)
 export const THEME_ID: "storybook/fluentui-react-addon/theme";
 
@@ -49,6 +71,12 @@ export const themes: readonly [{
  readonly theme: Theme;
 }];
 
+// @public (undocumented)
+export const WEB_DARK = "web-dark";
+
+// @public (undocumented)
+export const WEB_LIGHT = "web-light";
+
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
+import { useParameter } from '@storybook/api';
 
 import { ThemeIds, themes, defaultTheme } from '../theme';
 import { THEME_ID } from '../constants';
-import { useGlobals } from '../hooks';
+import { useGlobals, FluentParameters } from '../hooks';
 
 export interface ThemeSelectorItem {
  id: string;
@@ -33,7 +34,9 @@ function createThemeItems(
 
 export const ThemePicker = () => {
  const [globals, updateGlobals] = useGlobals();
- const selectedThemeId = globals[THEME_ID] ?? defaultTheme.id;
+ const fluentTheme: FluentParameters['fluentTheme'] = useParameter('fluentTheme');
+
+ const selectedThemeId = fluentTheme ? fluentTheme : globals[THEME_ID] ?? defaultTheme.id;
  const selectedTheme = themes.find(entry => entry.id === selectedThemeId);
 
  const isActive = selectedThemeId !== defaultTheme.id;

packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx

@@ -2,24 +2,34 @@ import * as React from 'react';
 
 import { FluentProvider } from '@fluentui/react-provider';
 import { Theme } from '@fluentui/react-theme';
-
-import { themes, defaultTheme } from '../theme';
+import { themes, defaultTheme, ThemeIds } from '../theme';
 import { THEME_ID } from '../constants';
 import { FluentGlobals, FluentStoryContext } from '../hooks';
 
+const findTheme = (themeId?: ThemeIds) => {
+ if (!themeId) {
+ return;
+ }
+ return themes.find(value => value.id === themeId);
+};
+
 const getActiveFluentTheme = (globals: FluentGlobals) => {
  const selectedThemeId = globals[THEME_ID];
- const { theme } = themes.find(value => value.id === selectedThemeId) ?? defaultTheme;
+ const { theme } = findTheme(selectedThemeId) ?? defaultTheme;
 
  return { theme };
 };
 
 export const withFluentProvider = (StoryFn: () => JSX.Element, context: FluentStoryContext) => {
- const { theme } = getActiveFluentTheme(context.globals);
+ const { globals, parameters } = context;
+ const { isVrTest } = parameters;
+ const globalTheme = getActiveFluentTheme(globals);
+ const paramTheme = findTheme(parameters.fluentTheme);
+ const { theme } = paramTheme ?? globalTheme;
 
  return (
- <FluentProvider theme={theme}>
- <FluentExampleContainer theme={theme}>{StoryFn()}</FluentExampleContainer>
+ <FluentProvider theme={theme} dir={parameters.dir}>
+ {isVrTest ? StoryFn() : <FluentExampleContainer theme={theme}>{StoryFn()}</FluentExampleContainer>}
  </FluentProvider>
  );
 };
@@ -28,5 +38,5 @@ const FluentExampleContainer: React.FC<{ theme: Theme }> = props => {
  const { theme } = props;
 
  const backgroundColor = theme.colorNeutralBackground2;
- return <div style={{ padding: '48px 24px', backgroundColor: backgroundColor }}>{props.children}</div>;
+ return <div style={{ padding: '48px 24px', backgroundColor }}>{props.children}</div>;
 };

packages/react-components/react-storybook-addon/src/hooks.ts

@@ -1,20 +1,30 @@
-import { useGlobals as useStorybookGlobals, Args as StorybookArgs } from '@storybook/api';
+import { useGlobals as useStorybookGlobals, Args as StorybookArgs, Parameters } from '@storybook/api';
 import { StoryContext as StorybookContext } from '@storybook/addons';
 
 import { THEME_ID } from './constants';
 import { ThemeIds } from './theme';
 
 export interface FluentStoryContext extends StorybookContext {
  globals: FluentGlobals;
+ parameters: FluentParameters;
 }
 
 /**
- * Extends the storybook globals object to include fluent specific propoerties
+ * Extends the storybook globals object to include fluent specific properties
  */
 export interface FluentGlobals extends StorybookArgs {
  [THEME_ID]?: ThemeIds;
 }
 
+/**
+ * Extends the storybook parameters object to include fluent specific properties
+ */
+export interface FluentParameters extends Parameters {
+ dir?: 'ltr' | 'rtl';
+ fluentTheme?: ThemeIds;
+ isVrTest?: boolean;
+}
+
 export function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void] {
  return useStorybookGlobals();
 }

packages/react-components/react-storybook-addon/src/index.ts

@@ -1,4 +1,4 @@
-export type { FluentGlobals, FluentStoryContext } from './hooks';
+export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hooks';
 export type { ThemeIds } from './theme';
-export { themes } from './theme';
+export { themes, TEAMS_DARK, TEAMS_HIGH_CONTRAST, TEAMS_LIGHT, WEB_DARK, WEB_LIGHT } from './theme';
 export { THEME_ID } from './constants';

packages/react-components/react-storybook-addon/src/theme.ts

@@ -8,12 +8,18 @@ import {
 
 import type { Theme } from '@fluentui/react-theme';
 
+export const WEB_LIGHT = 'web-light';
+export const WEB_DARK = 'web-dark';
+export const TEAMS_LIGHT = 'teams-light';
+export const TEAMS_DARK = 'teams-dark';
+export const TEAMS_HIGH_CONTRAST = 'teams-high-contrast';
+
 export const themes = [
- { id: 'web-light', label: 'Web Light', theme: webLightTheme },
- { id: 'web-dark', label: 'Web Dark', theme: webDarkTheme },
- { id: 'teams-light', label: 'Teams Light', theme: teamsLightTheme },
- { id: 'teams-dark', label: 'Teams Dark', theme: teamsDarkTheme },
- { id: 'teams-high-contrast', label: 'Teams High Contrast', theme: teamsHighContrastTheme },
+ { id: WEB_LIGHT, label: 'Web Light', theme: webLightTheme },
+ { id: WEB_DARK, label: 'Web Dark', theme: webDarkTheme },
+ { id: TEAMS_LIGHT, label: 'Teams Light', theme: teamsLightTheme },
+ { id: TEAMS_DARK, label: 'Teams Dark', theme: teamsDarkTheme },
+ { id: TEAMS_HIGH_CONTRAST, label: 'Teams High Contrast', theme: teamsHighContrastTheme },
 ] as const;
 
 export const defaultTheme = themes[0];