Web components v3 tweaks

[Hotell]

Previous Behavior

New Behavior

testing https://github.com/microsoft/fluentui/pull/31296

Related Issue(s)

• Fixes #

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	669	657	5000
Button	mount	310	303	5000
Field	mount	1200	1148	5000
FluentProvider	mount	722	718	5000
FluentProviderWithTheme	mount	91	94	10
FluentProviderWithTheme	virtual-rerender	38	33	10
FluentProviderWithTheme	virtual-rerender-with-unmount	78	84	10
MakeStyles	mount	915	879	50000
Persona	mount	1794	1758	5000
SpinButton	mount	1431	1420	5000
SwatchPicker	mount	1490	1536	5000

[codesandbox-ci[bot]]

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.

[fabricteam]

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	92	81	1.14:1
ButtonMinimalPerf.default	90	80	1.13:1
ChatDuplicateMessagesPerf.default	156	144	1.08:1
TextMinimalPerf.default	196	182	1.08:1
AttachmentMinimalPerf.default	78	73	1.07:1
AvatarMinimalPerf.default	111	104	1.07:1
ProviderMinimalPerf.default	212	199	1.07:1
TreeWith60ListItems.default	90	84	1.07:1
ButtonSlotsPerf.default	317	298	1.06:1
ListNestedPerf.default	342	323	1.06:1
RadioGroupMinimalPerf.default	267	253	1.06:1
VideoMinimalPerf.default	452	425	1.06:1
ChatWithPopoverPerf.default	198	189	1.05:1
ListMinimalPerf.default	312	297	1.05:1
PortalMinimalPerf.default	87	83	1.05:1
IconMinimalPerf.default	393	376	1.05:1
AttachmentSlotsPerf.default	632	606	1.04:1
BoxMinimalPerf.default	195	187	1.04:1
ButtonOverridesMissPerf.default	649	625	1.04:1
CheckboxMinimalPerf.default	1145	1106	1.04:1
LoaderMinimalPerf.default	186	178	1.04:1
MenuMinimalPerf.default	527	506	1.04:1
DropdownManyItemsPerf.default	396	386	1.03:1
FormMinimalPerf.default	230	224	1.03:1
LabelMinimalPerf.default	219	213	1.03:1
ReactionMinimalPerf.default	213	206	1.03:1
SplitButtonMinimalPerf.default	2277	2221	1.03:1
StatusMinimalPerf.default	394	381	1.03:1
ChatMinimalPerf.default	427	419	1.02:1
DialogMinimalPerf.default	442	432	1.02:1
DividerMinimalPerf.default	209	205	1.02:1
FlexMinimalPerf.default	159	156	1.02:1
InputMinimalPerf.default	548	535	1.02:1
ItemLayoutMinimalPerf.default	713	696	1.02:1
RosterPerf.default	1560	1536	1.02:1
ProviderMergeThemesPerf.default	653	643	1.02:1
CustomToolbarPrototype.default	1475	1452	1.02:1
AnimationMinimalPerf.default	295	291	1.01:1
CarouselMinimalPerf.default	265	262	1.01:1
HeaderMinimalPerf.default	216	213	1.01:1
ListWith60ListItems.default	365	361	1.01:1
PopupMinimalPerf.default	351	347	1.01:1
SkeletonMinimalPerf.default	194	192	1.01:1
SliderMinimalPerf.default	740	732	1.01:1
TextAreaMinimalPerf.default	294	291	1.01:1
CardMinimalPerf.default	305	305	1:1
DropdownMinimalPerf.default	1419	1420	1:1
ImageMinimalPerf.default	222	222	1:1
MenuButtonMinimalPerf.default	952	953	1:1
DatepickerMinimalPerf.default	3517	3557	0.99:1
GridMinimalPerf.default	188	190	0.99:1
HeaderSlotsPerf.default	448	451	0.99:1
TableManyItemsPerf.default	1124	1130	0.99:1
TreeMinimalPerf.default	486	489	0.99:1
EmbedMinimalPerf.default	1860	1898	0.98:1
LayoutMinimalPerf.default	189	193	0.98:1
ListCommonPerf.default	371	377	0.98:1
SegmentMinimalPerf.default	195	198	0.98:1
TableMinimalPerf.default	234	239	0.98:1
ToolbarMinimalPerf.default	532	550	0.97:1
RefMinimalPerf.default	109	114	0.96:1
AlertMinimalPerf.default	148	158	0.94:1
TooltipMinimalPerf.default	1225	1329	0.92:1

[fabricteam]

📊 Bundle size report

✅ No changes found

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	642	650	5000
Breadcrumb	mount	1677	1696	1000
Checkbox	mount	1720	1732	5000
CheckboxBase	mount	1502	1489	5000
ChoiceGroup	mount	3003	3043	5000
ComboBox	mount	689	685	1000
CommandBar	mount	6489	6479	1000
ContextualMenu	mount	12716	12977	1000
DefaultButton	mount	806	816	5000
DetailsRow	mount	2229	2218	5000
DetailsRowFast	mount	2250	2209	5000
DetailsRowNoStyles	mount	2044	2058	5000
Dialog	mount	2862	2672	1000
DocumentCardTitle	mount	225	220	1000
Dropdown	mount	2054	2074	5000
FocusTrapZone	mount	1120	1131	5000
FocusZone	mount	1106	1068	5000
GroupedList	mount	42647	42683	2
GroupedList	virtual-rerender	20451	20540	2
GroupedList	virtual-rerender-with-unmount	51376	51361	2
GroupedListV2	mount	217	248	2
GroupedListV2	virtual-rerender	207	215	2
GroupedListV2	virtual-rerender-with-unmount	235	224	2
IconButton	mount	1138	1151	5000
Label	mount	348	350	5000
Layer	mount	2742	2791	5000
Link	mount	393	398	5000
MenuButton	mount	1005	987	5000
MessageBar	mount	21410	21485	5000
Nav	mount	2044	2049	1000
OverflowSet	mount	792	783	5000
Panel	mount	1871	1797	1000
Persona	mount	754	746	1000
Pivot	mount	918	896	1000
PrimaryButton	mount	961	959	5000
Rating	mount	4766	4731	5000
SearchBox	mount	936	938	5000
Shimmer	mount	1937	1867	5000
Slider	mount	1321	1385	5000
SpinButton	mount	3044	3045	5000
Spinner	mount	397	385	5000
SplitButton	mount	1917	1926	5000
Stack	mount	420	421	5000
StackWithIntrinsicChildren	mount	880	879	5000
StackWithTextChildren	mount	2657	2704	5000
SwatchColorPicker	mount	6448	6525	5000
TagPicker	mount	1502	1446	5000
Text	mount	372	386	5000
TextField	mount	959	967	5000
ThemeProvider	mount	821	834	5000
ThemeProvider	virtual-rerender	577	591	5000
ThemeProvider	virtual-rerender-with-unmount	1297	1298	5000
Toggle	mount	610	616	5000
buttonNative	mount	195	193	5000

[fabricteam]

🕵 fluentuiv8 No visual regressions between this PR and main