Root as slot implementation by bsunderhus · Pull Request #19483 · microsoft/fluentui

bsunderhus · 2021-08-23T12:31:27Z

Pull request checklist

Include a change request file using $ yarn change

Description of changes

Implements changes requested by RFC RFC: Root as a slot #19068 on react-utilities
Updates react-aria accordingly
Updates react-accordion accordingly
Updates react-menu accordingly
Updates react-input accordingly

codesandbox-ci · 2021-08-23T12:39:32Z

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

Sandbox	Source
Fluent UI React Starter	Configuration

fabricteam · 2021-08-23T15:37:38Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`54.693 kB` `17.239 kB`	`55.21 kB` `17.401 kB`	`-517 B` `-162 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`166.56 kB` `48.052 kB`	`166.561 kB` `48.077 kB`	`-1 B` `-25 B`
`react-menu` Menu (including children components)	`106.087 kB` `32.752 kB`	`106.042 kB` `32.735 kB`	`45 B` `17 B`
`react-menu` Menu (including selectable components)	`108.877 kB` `33.291 kB`	`108.802 kB` `33.277 kB`	`75 B` `14 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`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: 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-popover` Popover	`102.804 kB` `31.283 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-tooltip` Tooltip	`46.054 kB` `15.658 kB`
`react-utilities` SSRProvider	`213 B` `170 B`

_{🤖 This report was generated against c227b8e06fc0e9b72b16bbd6ecba420e146d9554}

size-auditor · 2021-08-23T15:48:05Z

Asset size changes

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

Baseline commit: c227b8e06fc0e9b72b16bbd6ecba420e146d9554 (build)

fabricteam · 2021-08-23T16:27:51Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	939	964	5000
BaseButton	mount	991	996	5000
Breadcrumb	mount	2645	2729	1000
ButtonNext	mount	433	448	5000
Checkbox	mount	1695	1631	5000
CheckboxBase	mount	1478	1448	5000
ChoiceGroup	mount	5209	5171	5000
ComboBox	mount	1072	1053	1000
CommandBar	mount	10814	10758	1000
ContextualMenu	mount	6747	6777	1000
DefaultButton	mount	1268	1265	5000
DetailsRow	mount	4138	4196	5000
DetailsRowFast	mount	4128	4040	5000
DetailsRowNoStyles	mount	3819	3807	5000
Dialog	mount	1490	2272	1000
DocumentCardTitle	mount	153	167	1000
Dropdown	mount	3595	3703	5000
FluentProviderNext	mount	7109	7337	5000
FocusTrapZone	mount	1853	1740	5000
FocusZone	mount	1879	1864	5000
IconButton	mount	1892	1931	5000
Label	mount	348	367	5000
Layer	mount	1943	1906	5000
Link	mount	540	499	5000
MakeStyles	mount	1831	1823	50000
MenuButton	mount	1548	1568	5000
MessageBar	mount	2077	2030	5000
Nav	mount	3493	3488	1000
OverflowSet	mount	1176	1180	5000
Panel	mount	2158	2222	1000
Persona	mount	902	862	1000
Pivot	mount	1524	1519	1000
PrimaryButton	mount	1374	1378	5000
Rating	mount	8293	8265	5000
SearchBox	mount	1481	1447	5000
Shimmer	mount	2748	2767	5000
Slider	mount	2122	2183	5000
SpinButton	mount	5570	5287	5000
Spinner	mount	471	462	5000
SplitButton	mount	3531	3592	5000
Stack	mount	560	584	5000
StackWithIntrinsicChildren	mount	1784	1809	5000
StackWithTextChildren	mount	5181	5333	5000
SwatchColorPicker	mount	11166	11269	5000
Tabs	mount	1487	1502	1000
TagPicker	mount	2844	2889	5000
TeachingBubble	mount	12617	12825	5000
Text	mount	433	449	5000
TextField	mount	1473	1454	5000
ThemeProvider	mount	1236	1247	5000
ThemeProvider	virtual-rerender	646	637	5000
Toggle	mount	861	830	5000
buttonNative	mount	111	118	5000

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeMinimalPerf.default	976	843	1.16:1
PortalMinimalPerf.default	212	185	1.15:1
ButtonMinimalPerf.default	216	193	1.12:1
AttachmentMinimalPerf.default	185	168	1.1:1
AvatarMinimalPerf.default	228	211	1.08:1
DividerMinimalPerf.default	411	382	1.08:1
LayoutMinimalPerf.default	410	380	1.08:1
FormMinimalPerf.default	481	449	1.07:1
ListMinimalPerf.default	556	519	1.07:1
AnimationMinimalPerf.default	451	425	1.06:1
CarouselMinimalPerf.default	539	508	1.06:1
ChatWithPopoverPerf.default	432	409	1.06:1
RefMinimalPerf.default	240	227	1.06:1
SegmentMinimalPerf.default	388	367	1.06:1
ToolbarMinimalPerf.default	1086	1025	1.06:1
CardMinimalPerf.default	654	624	1.05:1
ChatDuplicateMessagesPerf.default	341	326	1.05:1
CheckboxMinimalPerf.default	3023	2885	1.05:1
CustomToolbarPrototype.default	4271	4087	1.05:1
ButtonOverridesMissPerf.default	1902	1834	1.04:1
ItemLayoutMinimalPerf.default	1327	1277	1.04:1
LoaderMinimalPerf.default	734	707	1.04:1
PopupMinimalPerf.default	704	680	1.04:1
ProviderMinimalPerf.default	1087	1044	1.04:1
AttachmentSlotsPerf.default	1186	1154	1.03:1
DropdownMinimalPerf.default	3363	3276	1.03:1
GridMinimalPerf.default	364	355	1.03:1
VideoMinimalPerf.default	689	668	1.03:1
BoxMinimalPerf.default	396	390	1.02:1
LabelMinimalPerf.default	419	409	1.02:1
ListCommonPerf.default	688	674	1.02:1
ReactionMinimalPerf.default	408	401	1.02:1
ChatMinimalPerf.default	743	733	1.01:1
DialogMinimalPerf.default	820	812	1.01:1
EmbedMinimalPerf.default	4558	4518	1.01:1
FlexMinimalPerf.default	323	321	1.01:1
ListWith60ListItems.default	669	664	1.01:1
MenuMinimalPerf.default	921	911	1.01:1
RadioGroupMinimalPerf.default	490	484	1.01:1
SplitButtonMinimalPerf.default	4745	4704	1.01:1
StatusMinimalPerf.default	762	758	1.01:1
TableManyItemsPerf.default	2219	2188	1.01:1
ButtonSlotsPerf.default	603	600	1:1
InputMinimalPerf.default	1314	1309	1:1
MenuButtonMinimalPerf.default	1800	1792	1:1
ProviderMergeThemesPerf.default	1743	1742	1:1
TextMinimalPerf.default	401	400	1:1
HeaderSlotsPerf.default	827	836	0.99:1
RosterPerf.default	1292	1307	0.99:1
SkeletonMinimalPerf.default	383	388	0.99:1
SliderMinimalPerf.default	1665	1684	0.99:1
IconMinimalPerf.default	688	693	0.99:1
HeaderMinimalPerf.default	384	392	0.98:1
DropdownManyItemsPerf.default	751	774	0.97:1
TableMinimalPerf.default	458	474	0.97:1
TextAreaMinimalPerf.default	569	586	0.97:1
TooltipMinimalPerf.default	1105	1142	0.97:1
AlertMinimalPerf.default	304	318	0.96:1
DatepickerMinimalPerf.default	5798	6015	0.96:1
ImageMinimalPerf.default	400	417	0.96:1
TreeWith60ListItems.default	181	191	0.95:1
ListNestedPerf.default	595	633	0.94:1
AccordionMinimalPerf.default	155	173	0.9:1

change/@fluentui-react-utilities-7755db0b-2b84-49bb-81db-9d949a3e7c17.json

packages/react-accordion/src/Accordion.stories.tsx

packages/react-accordion/src/components/Accordion/useAccordion.ts

layershifter · 2021-08-24T13:40:36Z

...s/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap

  <button
    className=""
    disabled={false}
-    id="accordion-header-1"


Is it expected that we don't have id there anymore?

Yes. this is due to removal of id mechanism. Has definitely nothing to do with this PR, I'll try to remove this change

packages/react-accordion/src/components/AccordionHeader/useAccordionHeader.ts

packages/react-menu/src/common/isConformant.ts

packages/react-menu/src/components/MenuDivider/useMenuDivider.ts

packages/react-menu/src/components/MenuGroup/useMenuGroup.ts

packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts

…a3e7c17.json Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

msft-fluent-ui-bot · 2021-09-01T07:41:37Z

🎉@fluentui/react-tooltip@v9.0.0-alpha.75 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:41:40Z

🎉@fluentui/react-text@v9.0.0-alpha.9 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:41:43Z

🎉@fluentui/react-tabster@v9.0.0-alpha.55 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:41:46Z

🎉@fluentui/react-portal@v9.0.0-alpha.42 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:41:49Z

🎉@fluentui/react-link@v9.0.0-alpha.75 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:41:52Z

🎉@fluentui/react-provider@v9.0.0-alpha.71 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:41:55Z

🎉@fluentui/react-positioning@v9.0.0-alpha.48 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:41:58Z

🎉@fluentui/react-make-styles@v9.0.0-alpha.61 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:01Z

🎉@fluentui/make-styles-webpack-loader@v9.0.0-alpha.15 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:04Z

🎉@fluentui/babel-make-styles@v9.0.0-alpha.42 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:07Z

🎉@fluentui/react-label@v9.0.0-alpha.33 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:10Z

🎉@fluentui/react-conformance-make-styles@v9.0.0-alpha.4 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:13Z

🎉@fluentui/react-menu@v9.0.0-alpha.70 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:16Z

🎉@fluentui/react-popover@v9.0.0-alpha.35 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:19Z

🎉@fluentui/jest-serializer-make-styles@v9.0.0-alpha.36 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:28Z

🎉@fluentui/react-divider@v9.0.0-alpha.61 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:31Z

🎉@fluentui/react-utilities@v9.0.0-alpha.43 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:34Z

🎉@fluentui/react-image@v9.0.0-alpha.72 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:37Z

🎉@fluentui/react-button@v9.0.0-alpha.78 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:40Z

🎉@fluentui/react-badge@v9.0.0-alpha.74 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:43Z

🎉@fluentui/react-checkbox@v9.0.0-alpha.29 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:46Z

🎉@fluentui/react-context-selector@v9.0.0-alpha.26 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:49Z

🎉@fluentui/react-avatar@v9.0.0-alpha.74 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:52Z

🎉@fluentui/react-aria@v9.0.0-alpha.25 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-09-01T07:42:55Z

🎉@fluentui/react-accordion@v9.0.0-alpha.69 has been released which incorporates this pull request.:tada:

Handy links:

bsunderhus self-assigned this Aug 23, 2021

bsunderhus force-pushed the root-as-slot-implementation branch 3 times, most recently from 286ba6d to 3f1678c Compare August 24, 2021 09:35

bsunderhus added 8 commits August 24, 2021 12:37

Adds suppot for root as slot

0c86106

Updates react-aria to use root as slot

762fb40

Updates react-accordion to use root as slot

32b049b

Updates react-menu to use root as slot

d7a6c08

Change files

69e24a2

Updates react-input to use root as slot

321e912

Fix merge conflicts

f3fd6e0

Update react-menu API

94b2021

bsunderhus force-pushed the root-as-slot-implementation branch from 9003792 to 94b2021 Compare August 24, 2021 10:37

Updates react-aria test

4357718

bsunderhus requested review from a team and layershifter August 24, 2021 11:23

bsunderhus marked this pull request as ready for review August 24, 2021 11:28

bsunderhus requested review from a team and ecraig12345 as code owners August 24, 2021 11:28

layershifter reviewed Aug 24, 2021

View reviewed changes

bsunderhus and others added 2 commits August 24, 2021 17:37

Update change/@fluentui-react-utilities-7755db0b-2b84-49bb-81db-9d949…

c2a204f

…a3e7c17.json Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Updates Internals

ff5cee8

bsunderhus force-pushed the root-as-slot-implementation branch from 90af3ee to ff5cee8 Compare August 24, 2021 16:13

bsunderhus added 2 commits August 24, 2021 18:22

skipAsPropTests on react-input

c9bbbbd

Disables broken conformance tests

43aa214

layershifter mentioned this pull request Aug 31, 2021

react-button - Simplify prop merging #18814

Merged

1 task

layershifter mentioned this pull request Sep 1, 2021

Input: Add styling #19376

Merged

1 task

ling1726 mentioned this pull request Sep 6, 2021

react-card - Phase 1 #19646

Merged

behowell mentioned this pull request Sep 6, 2021

Add IntrinsicShorthandProps type for slots that use intrinsic elements like div or span #19642

Merged

bsunderhus deleted the root-as-slot-implementation branch December 3, 2021 16:18

Conversation

bsunderhus commented Aug 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Uh oh!

codesandbox-ci bot commented Aug 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Aug 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor bot commented Aug 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Aug 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

layershifter Aug 24, 2021

Choose a reason for hiding this comment

Uh oh!

bsunderhus Aug 24, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

Uh oh!

msft-fluent-ui-bot commented Sep 1, 2021

bsunderhus commented Aug 23, 2021 •

edited

Loading

codesandbox-ci bot commented Aug 23, 2021 •

edited

Loading

fabricteam commented Aug 23, 2021 •

edited

Loading

size-auditor bot commented Aug 23, 2021 •

edited

Loading

fabricteam commented Aug 23, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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