Storybook / Button documentation

[PeterDraex]

Closed in favor of #19298

[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 34c9bb2:

Sandbox	Source
Fluent UI React Starter	Configuration

[size-auditor]

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: 499afa3

Possible causes

• The baseline build 499afa3 is broken
• The Size Auditor run for the baseline build 499afa3 was not triggered

Recommendations

• Please merge your branch for this Pull request with the latest master build and commit your changes once again

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-button Button	24.886 kB 7.975 kB	24.91 kB 7.988 kB	-24 B -13 B
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	176.902 kB 50.064 kB	176.93 kB 50.072 kB	-28 B -8 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-accordion Accordion (including children components)	75.578 kB 22.287 kB
react-avatar Avatar	56.558 kB 15.66 kB
react-badge Badge	24.343 kB 7.165 kB
react-badge CounterBadge	27.156 kB 7.851 kB
react-badge PresenseBadge	237 B 177 B
react-button CompoundButton	30.226 kB 8.878 kB
react-button MenuButton	26.521 kB 8.509 kB
react-button ToggleButton	34.531 kB 8.637 kB
react-components react-components: FluentProvider & webLightTheme	36.237 kB 11.596 kB
react-divider Divider	15.889 kB 5.747 kB
react-image Image	10.642 kB 4.264 kB
react-label Label	9.397 kB 3.839 kB
react-link Link	14.715 kB 6.012 kB
react-make-styles makeStaticStyles (runtime)	7.59 kB 3.321 kB
react-make-styles makeStyles + mergeClasses (runtime)	22.135 kB 8.356 kB
react-make-styles makeStyles + mergeClasses (build time)	2.557 kB 1.202 kB
react-menu Menu (including children components)	114.61 kB 34.554 kB
react-menu Menu (including selectable components)	116.71 kB 34.824 kB
react-popover Popover	124.181 kB 36.121 kB
react-portal Portal	7.78 kB 2.672 kB
react-positioning usePopper	23.157 kB 7.942 kB
react-provider FluentProvider	16.235 kB 5.972 kB
react-theme Teams: all themes	32.941 kB 6.674 kB
react-theme Teams: Light theme	20.247 kB 5.662 kB
react-tooltip Tooltip	45.281 kB 15.45 kB
react-utilities SSRProvider	213 B 170 B

_{🤖 This report was generated against b3f9f26e2822631b7583c47495a7de0fbf80cf78}

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	904	904	5000
BaseButton	mount	898	903	5000
Breadcrumb	mount	2654	2666	1000
ButtonNext	mount	439	433	5000
Checkbox	mount	1517	1487	5000
CheckboxBase	mount	1281	1298	5000
ChoiceGroup	mount	4726	4724	5000
ComboBox	mount	961	994	1000
CommandBar	mount	10219	10171	1000
ContextualMenu	mount	6178	6280	1000
DefaultButton	mount	1132	1095	5000
DetailsRow	mount	3690	3686	5000
DetailsRowFast	mount	3665	3682	5000
DetailsRowNoStyles	mount	3522	3477	5000
Dialog	mount	2117	2123	1000
DocumentCardTitle	mount	131	148	1000
Dropdown	mount	3206	3214	5000
FluentProviderNext	mount	7567	7486	5000
FocusTrapZone	mount	1833	1795	5000
FocusZone	mount	1769	1840	5000
IconButton	mount	1718	1695	5000
Label	mount	341	337	5000
Layer	mount	1773	1759	5000
Link	mount	471	462	5000
MakeStyles	mount	1825	1842	50000
MenuButton	mount	1424	1472	5000
MessageBar	mount	2009	2039	5000
Nav	mount	3237	3221	1000
OverflowSet	mount	1033	1029	5000
Panel	mount	2049	2064	1000
Persona	mount	810	810	1000
Pivot	mount	1407	1400	1000
PrimaryButton	mount	1276	1248	5000
Rating	mount	7617	7617	5000
SearchBox	mount	1310	1308	5000
Shimmer	mount	2686	2558	5000
Slider	mount	1947	1937	5000
SpinButton	mount	4896	4936	5000
Spinner	mount	415	425	5000
SplitButton	mount	3135	3125	5000
Stack	mount	501	504	5000
StackWithIntrinsicChildren	mount	1532	1525	5000
StackWithTextChildren	mount	4447	4440	5000
SwatchColorPicker	mount	10205	10218	5000
Tabs	mount	1391	1370	1000
TagPicker	mount	2516	2576	5000
TeachingBubble	mount	11678	11825	5000
Text	mount	426	413	5000
TextField	mount	1337	1349	5000
ThemeProvider	mount	1172	1157	5000
ThemeProvider	virtual-rerender	599	593	5000
Toggle	mount	789	792	5000
buttonNative	mount	115	111	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatDuplicateMessagesPerf.default	316	278	1.14:1
AttachmentMinimalPerf.default	157	142	1.11:1
SegmentMinimalPerf.default	360	330	1.09:1
CarouselMinimalPerf.default	468	438	1.07:1
PopupMinimalPerf.default	622	594	1.05:1
RadioGroupMinimalPerf.default	443	420	1.05:1
FlexMinimalPerf.default	286	276	1.04:1
TextAreaMinimalPerf.default	495	475	1.04:1
AvatarMinimalPerf.default	194	188	1.03:1
InputMinimalPerf.default	1278	1245	1.03:1
LayoutMinimalPerf.default	367	357	1.03:1
SkeletonMinimalPerf.default	361	351	1.03:1
DividerMinimalPerf.default	356	350	1.02:1
DropdownManyItemsPerf.default	682	668	1.02:1
FormMinimalPerf.default	391	385	1.02:1
GridMinimalPerf.default	336	328	1.02:1
HeaderMinimalPerf.default	353	346	1.02:1
ListMinimalPerf.default	506	495	1.02:1
ListNestedPerf.default	535	526	1.02:1
MenuMinimalPerf.default	838	820	1.02:1
RefMinimalPerf.default	237	233	1.02:1
AlertMinimalPerf.default	271	268	1.01:1
AnimationMinimalPerf.default	411	407	1.01:1
BoxMinimalPerf.default	350	346	1.01:1
ButtonSlotsPerf.default	539	536	1.01:1
CardMinimalPerf.default	535	531	1.01:1
DatepickerMinimalPerf.default	5393	5359	1.01:1
DialogMinimalPerf.default	752	743	1.01:1
HeaderSlotsPerf.default	748	741	1.01:1
ItemLayoutMinimalPerf.default	1197	1189	1.01:1
LoaderMinimalPerf.default	685	679	1.01:1
MenuButtonMinimalPerf.default	1642	1620	1.01:1
PortalMinimalPerf.default	171	169	1.01:1
ProviderMergeThemesPerf.default	1688	1665	1.01:1
SliderMinimalPerf.default	1562	1541	1.01:1
StatusMinimalPerf.default	669	660	1.01:1
TableManyItemsPerf.default	1877	1862	1.01:1
CustomToolbarPrototype.default	3852	3822	1.01:1
TooltipMinimalPerf.default	997	989	1.01:1
TreeMinimalPerf.default	795	787	1.01:1
VideoMinimalPerf.default	622	617	1.01:1
AttachmentSlotsPerf.default	1065	1064	1:1
ButtonOverridesMissPerf.default	1679	1679	1:1
ChatMinimalPerf.default	641	641	1:1
CheckboxMinimalPerf.default	2714	2727	1:1
DropdownMinimalPerf.default	3067	3064	1:1
EmbedMinimalPerf.default	4097	4095	1:1
ProviderMinimalPerf.default	986	989	1:1
SplitButtonMinimalPerf.default	3751	3762	1:1
TreeWith60ListItems.default	175	175	1:1
ButtonMinimalPerf.default	166	168	0.99:1
ListWith60ListItems.default	639	645	0.99:1
ReactionMinimalPerf.default	371	374	0.99:1
TableMinimalPerf.default	396	401	0.99:1
ToolbarMinimalPerf.default	921	928	0.99:1
LabelMinimalPerf.default	371	379	0.98:1
AccordionMinimalPerf.default	151	155	0.97:1
ImageMinimalPerf.default	349	359	0.97:1
RosterPerf.default	1139	1176	0.97:1
TextMinimalPerf.default	328	343	0.96:1
ChatWithPopoverPerf.default	337	356	0.95:1
ListCommonPerf.default	604	639	0.95:1
IconMinimalPerf.default	569	600	0.95:1