Storybook/Button documentation

[PeterDraex]

Description of changes

This PR improves documentation of the Button component.

This documentation page will serve as an example of documentation content for other pages. Any suggestions are welcome!

Features like live code editing, export to CodeSandbox or list of known issues will be added in other PRs (full list in the description of react-components docs project). Appearance will be improved in cooperation with designers.

WARNING - This only works in individual package Storybook

To review this PR, you need to clone this branch, run yarn, then yarn start and choose @fluentui/react-button.

Review of individual package is necessary, because automatic inference of Storybook Controls and of component description isn't working in @fluentui/react-components. This should be addressed by #18514 and if not, we’ll deal with it in a separate issue.

Known issues

• react-components docs: Controls #19309 - we’ll deal with controls in a separate PR

Pull request checklist

• Include a change request file using $ yarn change

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

Sandbox	Source
Fluent UI React Starter	Configuration

[size-auditor]

Asset size changes

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

Baseline commit: a5914a25144d0ae6fe3d99c5e18c9f2f476cca58 (build)

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-accordion Accordion (including children components)	75.787 kB 22.366 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 Button	25.016 kB 8.035 kB
react-button CompoundButton	30.308 kB 8.911 kB
react-button MenuButton	26.603 kB 8.543 kB
react-button ToggleButton	34.613 kB 8.671 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	177.666 kB 50.281 kB
react-components react-components: FluentProvider & webLightTheme	36.288 kB 11.615 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)	115.15 kB 34.665 kB
react-menu Menu (including selectable components)	117.88 kB 35.217 kB
react-popover Popover	124.599 kB 36.198 kB
react-portal Portal	7.78 kB 2.672 kB
react-positioning usePopper	23.145 kB 7.942 kB
react-provider FluentProvider	16.286 kB 5.991 kB
react-text Text - Default	11.798 kB 4.452 kB
react-text Text - Wrappers	15.414 kB 4.734 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	46.054 kB 15.658 kB
react-utilities SSRProvider	213 B 170 B

_{🤖 This report was generated against a5914a25144d0ae6fe3d99c5e18c9f2f476cca58}

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	838	820	5000
BaseButton	mount	851	856	5000
Breadcrumb	mount	2509	2469	1000
ButtonNext	mount	384	399	5000
Checkbox	mount	1461	1464	5000
CheckboxBase	mount	1229	1239	5000
ChoiceGroup	mount	4438	4469	5000
ComboBox	mount	941	978	1000
CommandBar	mount	9841	9689	1000
ContextualMenu	mount	5812	5969	1000
DefaultButton	mount	1053	1064	5000
DetailsRow	mount	3502	3487	5000
DetailsRowFast	mount	3571	3583	5000
DetailsRowNoStyles	mount	3336	3363	5000
Dialog	mount	2047	2064	1000
DocumentCardTitle	mount	130	131	1000
Dropdown	mount	3155	3131	5000
FluentProviderNext	mount	7177	7161	5000
FocusTrapZone	mount	1670	1691	5000
FocusZone	mount	1696	1667	5000
IconButton	mount	1612	1656	5000
Label	mount	318	316	5000
Layer	mount	1659	1667	5000
Link	mount	425	438	5000
MakeStyles	mount	1735	1720	50000
MenuButton	mount	1392	1395	5000
MessageBar	mount	1886	1926	5000
Nav	mount	3067	3037	1000
OverflowSet	mount	1024	1048	5000
Panel	mount	1953	1968	1000
Persona	mount	779	788	1000
Pivot	mount	1323	1329	1000
PrimaryButton	mount	1194	1212	5000
Rating	mount	7291	7205	5000
SearchBox	mount	1233	1256	5000
Shimmer	mount	2345	2377	5000
Slider	mount	1827	1862	5000
SpinButton	mount	4683	4693	5000
Spinner	mount	404	400	5000
SplitButton	mount	2912	2951	5000
Stack	mount	467	476	5000
StackWithIntrinsicChildren	mount	1448	1433	5000
StackWithTextChildren	mount	4221	4278	5000
SwatchColorPicker	mount	9788	9610	5000
Tabs	mount	1332	1302	1000
TagPicker	mount	2448	2477	5000
TeachingBubble	mount	11285	11192	5000
Text	mount	388	397	5000
TextField	mount	1328	1295	5000
ThemeProvider	mount	1154	1139	5000
ThemeProvider	virtual-rerender	559	570	5000
Toggle	mount	768	746	5000
buttonNative	mount	107	105	5000

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
ButtonSlotsPerf.default	517	487	1.06:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	157	138	1.14:1
ChatDuplicateMessagesPerf.default	280	260	1.08:1
RadioGroupMinimalPerf.default	428	400	1.07:1
BoxMinimalPerf.default	341	321	1.06:1
AnimationMinimalPerf.default	402	384	1.05:1
AvatarMinimalPerf.default	185	176	1.05:1
TextMinimalPerf.default	330	313	1.05:1
GridMinimalPerf.default	321	310	1.04:1
ItemLayoutMinimalPerf.default	1150	1104	1.04:1
LoaderMinimalPerf.default	673	649	1.04:1
RefMinimalPerf.default	227	219	1.04:1
ImageMinimalPerf.default	356	345	1.03:1
LabelMinimalPerf.default	358	347	1.03:1
TreeWith60ListItems.default	166	161	1.03:1
AttachmentSlotsPerf.default	1011	990	1.02:1
DividerMinimalPerf.default	348	341	1.02:1
HeaderMinimalPerf.default	337	332	1.02:1
InputMinimalPerf.default	1228	1208	1.02:1
ListWith60ListItems.default	603	592	1.02:1
PopupMinimalPerf.default	569	560	1.02:1
ReactionMinimalPerf.default	354	348	1.02:1
ButtonMinimalPerf.default	156	155	1.01:1
EmbedMinimalPerf.default	3933	3902	1.01:1
FlexMinimalPerf.default	264	261	1.01:1
LayoutMinimalPerf.default	341	339	1.01:1
MenuMinimalPerf.default	802	794	1.01:1
MenuButtonMinimalPerf.default	1574	1552	1.01:1
PortalMinimalPerf.default	167	166	1.01:1
SkeletonMinimalPerf.default	335	332	1.01:1
StatusMinimalPerf.default	635	631	1.01:1
TableManyItemsPerf.default	1773	1758	1.01:1
CustomToolbarPrototype.default	3677	3649	1.01:1
TreeMinimalPerf.default	762	755	1.01:1
AlertMinimalPerf.default	245	244	1:1
ButtonOverridesMissPerf.default	1625	1629	1:1
ProviderMergeThemesPerf.default	1603	1599	1:1
ProviderMinimalPerf.default	928	932	1:1
SplitButtonMinimalPerf.default	3552	3538	1:1
TextAreaMinimalPerf.default	466	468	1:1
ToolbarMinimalPerf.default	874	872	1:1
TooltipMinimalPerf.default	957	959	1:1
AccordionMinimalPerf.default	139	141	0.99:1
CardMinimalPerf.default	512	519	0.99:1
DialogMinimalPerf.default	722	728	0.99:1
DropdownMinimalPerf.default	3060	3079	0.99:1
FormMinimalPerf.default	381	383	0.99:1
HeaderSlotsPerf.default	707	715	0.99:1
ListNestedPerf.default	505	512	0.99:1
SliderMinimalPerf.default	1479	1489	0.99:1
VideoMinimalPerf.default	579	587	0.99:1
ChatMinimalPerf.default	611	624	0.98:1
ChatWithPopoverPerf.default	339	345	0.98:1
CheckboxMinimalPerf.default	2595	2635	0.98:1
DropdownManyItemsPerf.default	644	656	0.98:1
SegmentMinimalPerf.default	323	328	0.98:1
CarouselMinimalPerf.default	425	438	0.97:1
DatepickerMinimalPerf.default	5109	5257	0.97:1
ListMinimalPerf.default	458	473	0.97:1
IconMinimalPerf.default	554	572	0.97:1
TableMinimalPerf.default	368	378	0.97:1
ListCommonPerf.default	571	595	0.96:1
RosterPerf.default	1118	1160	0.96:1

[ling1726]

Is it possible to default to the docs tab first instead of canvas ?

[Hotell]

The documentation doesn’t work properly in @fluentui/react-components

@PeterDraex can you elaborate more pls ?

@Hotell - Automatic inference of Storybook Controls and of component description isn't working.

can you please update the PR description ?

Dismissing the review as @Hotell is OOF to review. The docs have been moved to mdx files as requested. If that still does not match @Hotell's expectations, we can reopen the discussion and eventually do changes even after this PR is merged.