chore(storybook): use react-components beta for codesandbox

[ling1726]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

(give an overview)

Focus areas to test

(optional)

[ling1726]

/azp run

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-accordion Accordion (including children components)	57.694 kB 18.16 kB
react-avatar Avatar	54.953 kB 15.667 kB
react-badge Badge	23.182 kB 6.986 kB
react-badge CounterBadge	25.642 kB 7.682 kB
react-badge PresenseBadge	237 B 177 B
react-button Button	25.501 kB 7.738 kB
react-button CompoundButton	30.758 kB 8.689 kB
react-button MenuButton	27.526 kB 8.413 kB
react-button SplitButton	33.637 kB 9.597 kB
react-button ToggleButton	34.727 kB 8.39 kB
react-card Card - All	13.377 kB 4.967 kB
react-card Card	8.896 kB 3.753 kB
react-card CardFooter	8.128 kB 3.424 kB
react-card CardHeader	9.448 kB 3.878 kB
react-card CardPreview	8.421 kB 3.599 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	169.335 kB 48.057 kB
react-components react-components: FluentProvider & webLightTheme	32.188 kB 10.658 kB
react-divider Divider	15.342 kB 5.585 kB
react-image Image	9.771 kB 3.975 kB
react-input Input	31.319 kB 11.305 kB
react-label Label	8.952 kB 3.708 kB
react-link Link	11.646 kB 4.699 kB
react-make-styles makeStaticStyles (runtime)	7.59 kB 3.321 kB
react-make-styles makeStyles + mergeClasses (runtime)	22.175 kB 8.366 kB
react-make-styles makeStyles + mergeClasses (build time)	2.558 kB 1.204 kB
react-menu Menu (including children components)	105.789 kB 32.202 kB
react-menu Menu (including selectable components)	108.065 kB 32.575 kB
react-popover Popover	101.153 kB 30.37 kB
react-portal Portal	6.725 kB 2.237 kB
react-positioning usePopper	23.145 kB 7.942 kB
react-provider FluentProvider	15.147 kB 5.573 kB
react-slider RangedSlider	41.41 kB 11.97 kB
react-slider Slider	34.788 kB 10.855 kB
react-switch Switch	26.606 kB 8.557 kB
react-text Text - Default	11.338 kB 4.418 kB
react-text Text - Wrappers	14.407 kB 4.724 kB
react-theme Teams: all themes	25.712 kB 6.17 kB
react-theme Teams: Light theme	17.215 kB 5.116 kB
react-tooltip Tooltip	45.543 kB 15.541 kB
react-utilities SSRProvider	213 B 170 B

_{🤖 This report was generated against a8e678af9b4b803bb475d8519586dea9b527fe1d}

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[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 f3ea59c:

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: a8e678af9b4b803bb475d8519586dea9b527fe1d (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	798	805	5000
BaseButton	mount	783	784	5000
Breadcrumb	mount	2192	2261	1000
ButtonNext	mount	444	428	5000
Checkbox	mount	1324	1327	5000
CheckboxBase	mount	1100	1124	5000
ChoiceGroup	mount	4036	4031	5000
ComboBox	mount	837	850	1000
CommandBar	mount	8830	8827	1000
ContextualMenu	mount	5555	5575	1000
DefaultButton	mount	990	970	5000
DetailsRow	mount	3239	3200	5000
DetailsRowFast	mount	3217	3264	5000
DetailsRowNoStyles	mount	3072	3089	5000
Dialog	mount	2126	2092	1000
DocumentCardTitle	mount	153	156	1000
Dropdown	mount	2777	2742	5000
FluentProviderNext	mount	2916	2917	5000
FluentProviderWithTheme	mount	167	181	10
FluentProviderWithTheme	virtual-rerender	93	82	10
FluentProviderWithTheme	virtual-rerender-with-unmount	206	212	10
FocusTrapZone	mount	1552	1568	5000
FocusZone	mount	1560	1568	5000
IconButton	mount	1478	1506	5000
Label	mount	310	296	5000
Layer	mount	2531	2523	5000
Link	mount	420	413	5000
MakeStyles	mount	1586	1554	50000
MenuButton	mount	1264	1270	5000
MessageBar	mount	1731	1743	5000
Nav	mount	2870	2838	1000
OverflowSet	mount	971	962	5000
Panel	mount	2019	2006	1000
Persona	mount	742	735	1000
Pivot	mount	1240	1226	1000
PrimaryButton	mount	1096	1122	5000
Rating	mount	6402	6557	5000
SearchBox	mount	1146	1139	5000
Shimmer	mount	2136	2112	5000
Slider	mount	1680	1549	5000
SpinButton	mount	4321	4292	5000
Spinner	mount	386	384	5000
SplitButton	mount	2673	2663	5000
Stack	mount	433	439	5000
StackWithIntrinsicChildren	mount	1462	1472	5000
StackWithTextChildren	mount	3975	3947	5000
SwatchColorPicker	mount	9079	8733	5000
Tabs	mount	1228	1173	1000
TagPicker	mount	2270	2266	5000
TeachingBubble	mount	11130	11038	5000
Text	mount	377	377	5000
TextField	mount	1177	1182	5000
ThemeProvider	mount	1034	1030	5000
ThemeProvider	virtual-rerender	521	537	5000
ThemeProvider	virtual-rerender-with-unmount	1615	1613	5000
Toggle	mount	700	715	5000
buttonNative	mount	114	124	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
FlexMinimalPerf.default	259	238	1.09:1
HeaderMinimalPerf.default	320	299	1.07:1
TextAreaMinimalPerf.default	428	400	1.07:1
AlertMinimalPerf.default	230	220	1.05:1
DropdownMinimalPerf.default	2707	2572	1.05:1
TableManyItemsPerf.default	1623	1541	1.05:1
AnimationMinimalPerf.default	361	347	1.04:1
BoxMinimalPerf.default	303	290	1.04:1
ButtonMinimalPerf.default	153	147	1.04:1
RefMinimalPerf.default	209	201	1.04:1
TreeWith60ListItems.default	159	153	1.04:1
CarouselMinimalPerf.default	398	387	1.03:1
GridMinimalPerf.default	290	282	1.03:1
LayoutMinimalPerf.default	310	302	1.03:1
ListMinimalPerf.default	436	423	1.03:1
SegmentMinimalPerf.default	300	291	1.03:1
SkeletonMinimalPerf.default	308	300	1.03:1
TableMinimalPerf.default	352	341	1.03:1
AttachmentMinimalPerf.default	143	140	1.02:1
AvatarMinimalPerf.default	170	166	1.02:1
ChatDuplicateMessagesPerf.default	258	254	1.02:1
CheckboxMinimalPerf.default	2337	2296	1.02:1
EmbedMinimalPerf.default	3657	3593	1.02:1
HeaderSlotsPerf.default	634	620	1.02:1
StatusMinimalPerf.default	571	562	1.02:1
ToolbarMinimalPerf.default	803	790	1.02:1
TooltipMinimalPerf.default	889	870	1.02:1
AttachmentSlotsPerf.default	936	929	1.01:1
CardMinimalPerf.default	468	465	1.01:1
ChatMinimalPerf.default	558	551	1.01:1
DatepickerMinimalPerf.default	4664	4600	1.01:1
DropdownManyItemsPerf.default	574	569	1.01:1
ListNestedPerf.default	473	469	1.01:1
ListWith60ListItems.default	552	545	1.01:1
MenuButtonMinimalPerf.default	1392	1383	1.01:1
ReactionMinimalPerf.default	322	318	1.01:1
IconMinimalPerf.default	508	504	1.01:1
DialogMinimalPerf.default	631	629	1:1
DividerMinimalPerf.default	300	299	1:1
ImageMinimalPerf.default	314	314	1:1
ItemLayoutMinimalPerf.default	1028	1028	1:1
ListCommonPerf.default	557	558	1:1
LoaderMinimalPerf.default	602	601	1:1
MenuMinimalPerf.default	709	709	1:1
PopupMinimalPerf.default	506	504	1:1
PortalMinimalPerf.default	150	150	1:1
ProviderMergeThemesPerf.default	1474	1479	1:1
SliderMinimalPerf.default	1430	1437	1:1
AccordionMinimalPerf.default	132	133	0.99:1
ButtonOverridesMissPerf.default	1498	1511	0.99:1
ButtonSlotsPerf.default	468	475	0.99:1
InputMinimalPerf.default	1113	1122	0.99:1
CustomToolbarPrototype.default	3516	3543	0.99:1
TreeMinimalPerf.default	678	682	0.99:1
LabelMinimalPerf.default	316	324	0.98:1
ProviderMinimalPerf.default	965	984	0.98:1
RadioGroupMinimalPerf.default	374	382	0.98:1
SplitButtonMinimalPerf.default	3496	3565	0.98:1
TextMinimalPerf.default	289	296	0.98:1
VideoMinimalPerf.default	527	538	0.98:1
FormMinimalPerf.default	324	336	0.96:1
RosterPerf.default	985	1026	0.96:1
ChatWithPopoverPerf.default	310	333	0.93:1

[ling1726]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).