refactor(react-popover): apply controls setup based on SB authoring RFC #18513

Hotell · 2021-06-10T10:55:41Z

Pull request checklist

Addresses an existing issue: Implements docs(rfc): create storybook authoring proposal #18455
Include a change request file using $ yarn change

Description of changes

implements initial RFC for authoring storybook for react-popover and root storybook config
updates nx migration generator

TODO Martin:

check if those manual argTypes won't be needed for react-components storybook as that is using react-examples preview.js and friends. If they will be needed add them back -> create followup issue -> ref that issue to those manual args definitions

Focus areas to test

(optional)

size-auditor · 2021-06-10T11:08:01Z

Asset size changes

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

Baseline commit: 67cb7ffb83c92b3cd98768c16d6baaacef02e95b (build)

fabricteam · 2021-06-10T11:27:20Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	791	781	5000
BaseButton	mount	878	878	5000
Breadcrumb	mount	2603	2623	1000
ButtonNext	mount	516	522	5000
Checkbox	mount	1458	1550	5000
CheckboxBase	mount	1259	1266	5000
ChoiceGroup	mount	4627	4582	5000
ComboBox	mount	1008	969	1000
CommandBar	mount	10036	10057	1000
ContextualMenu	mount	6151	6193	1000
DefaultButton	mount	1087	1096	5000
DetailsRow	mount	3674	3691	5000
DetailsRowFast	mount	3647	3715	5000
DetailsRowNoStyles	mount	3464	3517	5000
Dialog	mount	2099	2103	1000
DocumentCardTitle	mount	154	146	1000
Dropdown	mount	3237	3172	5000
FluentProviderNext	mount	7221	7273	5000
FocusTrapZone	mount	1776	1772	5000
FocusZone	mount	1833	1800	5000
IconButton	mount	1719	1721	5000
Label	mount	330	327	5000
Layer	mount	1749	1781	5000
Link	mount	467	453	5000
MakeStyles	mount	1806	1806	50000
MenuButton	mount	1416	1449	5000
MessageBar	mount	1941	1980	5000
Nav	mount	3184	3221	1000
OverflowSet	mount	1027	1028	5000
Panel	mount	2041	2027	1000
Persona	mount	808	798	1000
Pivot	mount	1515	1417	1000
PrimaryButton	mount	1253	1284	5000
Rating	mount	7495	7396	5000
SearchBox	mount	1286	1280	5000
Shimmer	mount	2587	2587	5000
Slider	mount	1924	1935	5000
SpinButton	mount	4909	4902	5000
Spinner	mount	409	410	5000
SplitButton	mount	3086	3107	5000
Stack	mount	491	490	5000
StackWithIntrinsicChildren	mount	1473	1471	5000
StackWithTextChildren	mount	4392	4367	5000
SwatchColorPicker	mount	10075	9986	5000
Tabs	mount	1404	1391	1000
TagPicker	mount	2468	2342	5000
TeachingBubble	mount	11728	11817	5000
Text	mount	415	415	5000
TextField	mount	1332	1354	5000
ThemeProvider	mount	1165	1165	5000
ThemeProvider	virtual-rerender	599	588	5000
Toggle	mount	799	786	5000
buttonNative	mount	105	123	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AvatarMinimalPerf.default	195	182	1.07:1
ButtonMinimalPerf.default	164	153	1.07:1
ChatMinimalPerf.default	657	627	1.05:1
AnimationMinimalPerf.default	406	390	1.04:1
TableMinimalPerf.default	405	390	1.04:1
TooltipMinimalPerf.default	1004	969	1.04:1
VideoMinimalPerf.default	628	605	1.04:1
AccordionMinimalPerf.default	150	145	1.03:1
AttachmentMinimalPerf.default	153	148	1.03:1
CarouselMinimalPerf.default	443	432	1.03:1
ChatDuplicateMessagesPerf.default	285	278	1.03:1
FlexMinimalPerf.default	279	272	1.03:1
GridMinimalPerf.default	328	318	1.03:1
RefMinimalPerf.default	233	227	1.03:1
ToolbarMinimalPerf.default	936	905	1.03:1
AttachmentSlotsPerf.default	1053	1030	1.02:1
EmbedMinimalPerf.default	4054	3974	1.02:1
ItemLayoutMinimalPerf.default	1191	1162	1.02:1
ListMinimalPerf.default	497	489	1.02:1
ListWith60ListItems.default	635	622	1.02:1
ProviderMergeThemesPerf.default	1659	1632	1.02:1
TextAreaMinimalPerf.default	485	476	1.02:1
ButtonSlotsPerf.default	537	534	1.01:1
ChatWithPopoverPerf.default	355	352	1.01:1
FormMinimalPerf.default	385	382	1.01:1
InputMinimalPerf.default	1238	1221	1.01:1
LabelMinimalPerf.default	379	375	1.01:1
MenuMinimalPerf.default	841	831	1.01:1
PortalMinimalPerf.default	173	171	1.01:1
RadioGroupMinimalPerf.default	440	434	1.01:1
SplitButtonMinimalPerf.default	3706	3664	1.01:1
TreeWith60ListItems.default	163	162	1.01:1
BoxMinimalPerf.default	337	336	1:1
ButtonOverridesMissPerf.default	1655	1650	1:1
CardMinimalPerf.default	526	525	1:1
CheckboxMinimalPerf.default	2685	2693	1:1
DropdownManyItemsPerf.default	662	662	1:1
DropdownMinimalPerf.default	3028	3021	1:1
HeaderSlotsPerf.default	739	738	1:1
ProviderMinimalPerf.default	961	958	1:1
SegmentMinimalPerf.default	340	340	1:1
SliderMinimalPerf.default	1527	1522	1:1
CustomToolbarPrototype.default	3786	3799	1:1
DialogMinimalPerf.default	734	739	0.99:1
DividerMinimalPerf.default	339	342	0.99:1
ListNestedPerf.default	534	540	0.99:1
MenuButtonMinimalPerf.default	1602	1613	0.99:1
SkeletonMinimalPerf.default	342	347	0.99:1
TableManyItemsPerf.default	1872	1882	0.99:1
TreeMinimalPerf.default	770	781	0.99:1
LayoutMinimalPerf.default	347	355	0.98:1
LoaderMinimalPerf.default	664	680	0.98:1
ReactionMinimalPerf.default	368	377	0.98:1
StatusMinimalPerf.default	664	676	0.98:1
TextMinimalPerf.default	332	340	0.98:1
DatepickerMinimalPerf.default	5197	5371	0.97:1
HeaderMinimalPerf.default	342	353	0.97:1
ListCommonPerf.default	599	619	0.97:1
PopupMinimalPerf.default	562	580	0.97:1
ImageMinimalPerf.default	351	364	0.96:1
RosterPerf.default	1114	1167	0.95:1
AlertMinimalPerf.default	248	264	0.94:1
IconMinimalPerf.default	567	617	0.92:1

Hotell · 2021-06-10T15:02:34Z

packages/react-popover/tsconfig.json

@@ -11,7 +11,7 @@
    "importHelpers": true,
    "noUnusedLocals": true,
    "preserveConstEnums": true,
-    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand", "storybook__addons"]


properly consume sb addons type definitions from our overrides

Hotell · 2021-06-10T15:04:21Z

typings/storybook__addons/index.d.ts

+    controls?: ControlsParameters & DisableControl;
+  }
+
+  interface ControlsParameters {


while this exists in SB github repo it is not being exposed for consumers (also most of these are completely missing in 6.0.x so probably might not work - sort doesn't work (tried that out), rest seems to be working )

codesandbox-ci · 2021-07-14T14:36:44Z

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 d1be2e3:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

fabricteam · 2021-07-14T14:38:26Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-divider` Divider	`15.889 kB` `5.747 kB`
`react-image` Image	`10.642 kB` `4.264 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 - Default	`113.348 kB` `34.242 kB`
`react-menu` Menu - Selectable	`115.36 kB` `34.501 kB`
`react-popover` Popover	`140.938 kB` `41.968 kB`
`react-theme` Teams: all themes	`31.935 kB` `6.49 kB`
`react-theme` Teams: Light theme	`19.527 kB` `5.504 kB`

_{🤖 This report was generated against 67cb7ffb83c92b3cd98768c16d6baaacef02e95b}

…FC (microsoft#18513) * feat(tools): apply new local SB template * Change files * chore: add react-popover to codeowners

msft-fluent-ui-bot assigned miroslavstastny Jun 10, 2021

Hotell changed the title ~~Hotell/rfc/apply setup to react popover~~ refactor(react-popover): apply controls setup based on SB authoring RFC Jun 10, 2021

Hotell added Area: Build System Storybook labels Jun 10, 2021

Hotell added this to the June Project Cycle Q2 2021 milestone Jun 10, 2021

Hotell commented Jun 10, 2021

View reviewed changes

Hotell marked this pull request as ready for review June 10, 2021 15:04

Hotell requested a review from a team as a code owner June 10, 2021 15:04

Hotell requested a review from a team June 10, 2021 16:23

ling1726 approved these changes Jun 18, 2021

View reviewed changes

Hotell force-pushed the hotell/rfc/apply-setup-to-react-popover branch from ab74146 to c8391cd Compare July 14, 2021 14:04

Hotell requested review from jurokapsiar and JustSlone as code owners July 14, 2021 14:04

Hotell added 4 commits July 14, 2021 16:10

chore(react-popover): apply controls setup based on SB authoring RFC

7372ac9

feat(tools): apply new local SB template

1f87744

Change files

2a56fbf

chore: add react-popover to codeowners

d1be2e3

Hotell force-pushed the hotell/rfc/apply-setup-to-react-popover branch from c8391cd to d1be2e3 Compare July 14, 2021 14:22

Hotell enabled auto-merge (squash) July 14, 2021 14:23

Hotell merged commit 521f16a into microsoft:master Jul 14, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(react-popover): apply controls setup based on SB authoring RFC #18513

refactor(react-popover): apply controls setup based on SB authoring RFC #18513

Hotell commented Jun 10, 2021 •

edited

Loading

size-auditor bot commented Jun 10, 2021 •

edited

Loading

fabricteam commented Jun 10, 2021 •

edited

Loading

Hotell Jun 10, 2021

Hotell Jun 10, 2021

codesandbox-ci bot commented Jul 14, 2021

fabricteam commented Jul 14, 2021

refactor(react-popover): apply controls setup based on SB authoring RFC #18513

refactor(react-popover): apply controls setup based on SB authoring RFC #18513

Conversation

Hotell commented Jun 10, 2021 • edited Loading

Pull request checklist

Description of changes

Focus areas to test

size-auditor bot commented Jun 10, 2021 • edited Loading

Asset size changes

fabricteam commented Jun 10, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Hotell Jun 10, 2021

Choose a reason for hiding this comment

Hotell Jun 10, 2021

Choose a reason for hiding this comment

codesandbox-ci bot commented Jul 14, 2021

fabricteam commented Jul 14, 2021

📊 Bundle size report

Hotell commented Jun 10, 2021 •

edited

Loading

size-auditor bot commented Jun 10, 2021 •

edited

Loading

fabricteam commented Jun 10, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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