Root as slot implementation #19483

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

@@ -8,7 +8,6 @@ exports[`AccordionHeader renders a default state 1`] = `
  <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 <[email protected]>

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