Storybook/Button documentation #19298

PeterDraex · 2021-08-06T14:44:39Z

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 · 2021-08-06T14:51:19Z

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 · 2021-08-06T14:53:23Z

Asset size changes

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

Baseline commit: a5914a25144d0ae6fe3d99c5e18c9f2f476cca58 (build)

fabricteam · 2021-08-06T14:59:49Z

📊 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 · 2021-08-06T15:10:29Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
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

packages/react-button/src/components/Button/Button.stories.tsx

ling1726 · 2021-08-09T14:57:51Z

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

packages/react-button/src/components/Button/Button.stories.tsx

packages/react-button/src/components/Button/Button.tsx

Hotell · 2021-08-11T15:31:12Z

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 ?

Co-authored-by: Martin Hochel <[email protected]>

packages/react-button/src/tmp-icons.stories.tsx

@Hotell

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.

PeterDraex added 3 commits August 6, 2021 16:25

Button docs

34c9bb2

Merge branch 'microsoft:master' into feature/button-docs

4d48a3a

Change files

080028a

PeterDraex requested review from Hotell, smhigley, khmakoto, miroslavstastny and jurokapsiar August 6, 2021 14:44

PeterDraex self-assigned this Aug 6, 2021

PeterDraex requested review from dzearing and a team as code owners August 6, 2021 14:44

This was referenced Aug 9, 2021

Storybook / Button documentation #19296

Closed

Storybook / Button documentation #19290

Closed

PeterDraex added Priority 1: High Storybook Area: Documentation Type: Documentation labels Aug 9, 2021

PeterDraex mentioned this pull request Aug 9, 2021

react-components docs: Controls #19309

Closed

6 tasks

ling1726 reviewed Aug 9, 2021

View reviewed changes

packages/react-button/src/components/Button/Button.stories.tsx Outdated Show resolved Hide resolved

ling1726 reviewed Aug 9, 2021

View reviewed changes

packages/react-button/src/components/Button/Button.stories.tsx Show resolved Hide resolved

ling1726 reviewed Aug 9, 2021

View reviewed changes

packages/react-button/src/components/Button/Button.stories.tsx Show resolved Hide resolved

ling1726 reviewed Aug 9, 2021

View reviewed changes

packages/react-button/src/components/Button/Button.tsx Show resolved Hide resolved

msft-fluent-ui-bot removed the Needs: Author Feedback label Aug 11, 2021

PeterDraex and others added 5 commits August 14, 2021 09:21

Update packages/react-button/.storybook/preview.js

cbc50f4

Co-authored-by: Martin Hochel <[email protected]>

Update preview.js

4930526

Update preview.js

eb35fd7

Update preview.js

f481a4d

fix object spread

09bc168

PeterDraex mentioned this pull request Aug 18, 2021

Storybook/Menu documentation #19433

Closed

layershifter reviewed Aug 19, 2021

View reviewed changes

packages/react-button/src/tmp-icons.stories.tsx Outdated Show resolved Hide resolved

PeterDraex added 3 commits August 19, 2021 13:16

remove unused tmp-icons

d5f5ac0

move description to a separate file

ec9c1da

code style

3a1bd7c

miroslavstastny approved these changes Aug 23, 2021

View reviewed changes

PeterDraex force-pushed the feature/button-docs branch 2 times, most recently from b30b8c2 to 7c28898 Compare August 23, 2021 12:10

add Markdown typing for typescript

baeaed9

PeterDraex force-pushed the feature/button-docs branch from 7c28898 to baeaed9 Compare August 23, 2021 12:32

add displayName to satisfy a lint rule

6650fc8

PeterDraex force-pushed the feature/button-docs branch from 2b6ff5f to 6650fc8 Compare August 23, 2021 16:08

PeterDraex removed request for smhigley, khmakoto, jurokapsiar and paulgildea August 23, 2021 16:18

miroslavstastny merged commit 0352049 into microsoft:master Aug 23, 2021

behowell mentioned this pull request Aug 24, 2021

Update documentation for Beta components #19389

Closed

16 tasks

PeterDraex deleted the feature/button-docs branch August 24, 2021 07:11

ling1726 mentioned this pull request Sep 2, 2021

Storybook/Popover documentation #19635

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook/Button documentation #19298

Storybook/Button documentation #19298

PeterDraex commented Aug 6, 2021 •

edited

Loading

codesandbox-ci bot commented Aug 6, 2021 •

edited

Loading

size-auditor bot commented Aug 6, 2021 •

edited

Loading

fabricteam commented Aug 6, 2021 •

edited

Loading

fabricteam commented Aug 6, 2021 •

edited

Loading

ling1726 commented Aug 9, 2021

Hotell commented Aug 11, 2021

Storybook/Button documentation #19298

Storybook/Button documentation #19298

Conversation

PeterDraex commented Aug 6, 2021 • edited Loading

Description of changes

WARNING - This only works in individual package Storybook

Known issues

Pull request checklist

codesandbox-ci bot commented Aug 6, 2021 • edited Loading

size-auditor bot commented Aug 6, 2021 • edited Loading

Asset size changes

fabricteam commented Aug 6, 2021 • edited Loading

📊 Bundle size report

fabricteam commented Aug 6, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

ling1726 commented Aug 9, 2021

Hotell commented Aug 11, 2021

PeterDraex commented Aug 6, 2021 •

edited

Loading

codesandbox-ci bot commented Aug 6, 2021 •

edited

Loading

size-auditor bot commented Aug 6, 2021 •

edited

Loading

fabricteam commented Aug 6, 2021 •

edited

Loading

fabricteam commented Aug 6, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)