chore(vr-tests-v9): Convert Button VR tests to CSF

[TristanWatanabe]

Changes:

• Converts Button VR tests stories to storybook Component Story Format (CSF). One file had to be split up to 5 since CSF only allows one export default declaration per file. Creates a new Button/ directory to house modularized Button, ToggleButton, CompountButton and MenuButton stories.
• We extended storybook's storiesOf .add method (called .addStory) to automatically include RTL, Dark Mode and High Contrast variants via the setAddon method. setAddon is already deprecated and set to be removed in storybook 7.0 and there's no real 1-to-1 replacement for it. Since stories need to be explicitly declared in CSF, I created a helper function getStoryVariant which wraps a base story in a decorator (via withFluentDecorator feat(react-storybook-addon): make withFluentProvider decorator configurable to be used for VR tests #25162) and renders it in either RTL, High Contrast or Dark Mode to achieve a similar effect as .addStory.

Depends on: #25162

Example usage:

const Basic = () => <Button> Hello World </Button>;
const BasicRTL = getStoryVariant(Basic, "RTL");	// renders Basic story in RTL via a decorator
const BasicHighContrast = getStoryVariant(Basic, "High Contrast"); // renders Basic story in High Contrast via a decorator

Related Issue(s)

Part of #25078

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
global-context createContext	533 B 341 B
global-context createContextSelector	554 B 348 B
priority-overflow createOverflowManager	3.153 kB 1.299 kB
react-accordion Accordion (including children components)	79.243 kB 24.436 kB
react-alert Alert	84.688 kB 21.233 kB
react-avatar Avatar	48.874 kB 13.864 kB
react-avatar AvatarGroup	14.996 kB 6.013 kB
react-avatar AvatarGroupItem	63.452 kB 17.959 kB
react-badge Badge	22.646 kB 7.228 kB
react-badge CounterBadge	23.536 kB 7.512 kB
react-badge PresenceBadge	24.096 kB 7.09 kB
react-button Button	36.849 kB 9.907 kB
react-button CompoundButton	43.874 kB 11.123 kB
react-button MenuButton	39.543 kB 10.807 kB
react-button SplitButton	46.989 kB 12.192 kB
react-button ToggleButton	52.716 kB 11.381 kB
react-card Card - All	67.664 kB 19.635 kB
react-card Card	63.346 kB 18.539 kB
react-card CardFooter	8.607 kB 3.622 kB
react-card CardHeader	9.65 kB 3.962 kB
react-card CardPreview	8.708 kB 3.678 kB
react-combobox Combobox (including child components)	76.153 kB 24.665 kB
react-combobox Dropdown (including child components)	75.885 kB 24.635 kB
react-components react-components: Button, FluentProvider & webLightTheme	62.94 kB 17.663 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	189.906 kB 52.963 kB
react-components react-components: FluentProvider & webLightTheme	33.446 kB 11.033 kB
react-dialog Dialog (including children components)	83.147 kB 24.799 kB
react-divider Divider	16.505 kB 5.925 kB
react-image Image	10.826 kB 4.286 kB
react-infobutton InfoButton	7.742 kB 3.265 kB
react-input Input	24.428 kB 7.899 kB
react-label Label	9.384 kB 3.883 kB
react-link Link	11.852 kB 4.888 kB
react-menu Menu (including children components)	117.089 kB 36.188 kB
react-menu Menu (including selectable components)	120.158 kB 36.712 kB
react-overflow hooks only	11.004 kB 4.188 kB
react-persona Persona	53.992 kB 15.25 kB
react-popover Popover	103.672 kB 31.871 kB
react-portal Portal	10.495 kB 3.851 kB
react-portal-compat PortalCompatProvider	5.857 kB 1.978 kB
react-positioning usePositioning	19.826 kB 7.417 kB
react-progress Progress	13.131 kB 5.039 kB
react-provider FluentProvider	15.807 kB 5.909 kB
react-radio Radio	36.436 kB 12.126 kB
react-radio RadioGroup	14.294 kB 5.723 kB
react-select Select	23.255 kB 7.954 kB
react-slider Slider	32.108 kB 10.195 kB
react-spinbutton SpinButton	45.826 kB 12.858 kB
react-spinner Spinner	20.023 kB 6.461 kB
react-switch Switch	33.388 kB 10.578 kB
react-text Text - Default	11.828 kB 4.627 kB
react-text Text - Wrappers	15.138 kB 5.064 kB
react-textarea Textarea	25.687 kB 8.331 kB
react-theme Single theme token import	69 B 89 B
react-theme Teams: all themes	29.65 kB 6.444 kB
react-theme Teams: Light theme	17.486 kB 5.057 kB
react-tooltip Tooltip	42.032 kB 14.739 kB
react-utilities SSRProvider	180 B 159 B

_{🤖 This report was generated against cd78876740a3e4093470068bf3c8611ceca733c5}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 781e403:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: cd78876740a3e4093470068bf3c8611ceca733c5 (build)

[TristanWatanabe]

One detected screener change is actually correct and is fixing wrong baseline screenshot

[Hotell]

I created a helper function getStoryVariant which wraps a base story in a decorator and renders it in either RTL, High Contrast or Dark Mode to achieve a similar effect as .addStory.

we should create some robust solution ( custom addon for this particular funcitonality ) . web-components folks have something already in place, feel free to check it out.

[Hotell]

We extended storybook's storiesOf .add method (called .addStory) to automatically include RTL, Dark Mode and High Contrast variants via the setAddon method. setAddon is already deprecated and set to be removed in storybook 7.0 and there's no real 1-to-1 replacement for it.

I documented this some time ago here:
https://github.com/microsoft/fluentui/pull/25108/files#diff-920f84e4e980c89d01f094913994a2725eef5029a7a68a2f7fb75af7a1507801R7-R9

• can we add docs there what should be used instead ?

Follow up PR:

• it would make sense to move this logic to custom addon as I expect that this will be used in other VR apps so we reduce any duplication. Also we should add tests to that logic

[Hotell]

I'd prefer to review this with "Request changes", though suggestion provided are aimed for more maintainable code and scale, which is not a real blocker in terms of implementation. hopefully we can address those prior to merging. ty!

[Hotell]

I created a helper function getStoryVariant

lets make sure the docs land here as well, so one dont have to look up PR comments

[TristanWatanabe]

@Hotell @ling1726 pausing this PR for now, will create a separate PR to add a custom storybook addon package that adds the RTL, High Contrast, and Dark Mode variants for better maintainability and scalability