Skip to content

chore(react-provider): use simplified prop merging#19744

Merged
layershifter merged 4 commits intomasterfrom
chore/provider-as-root
Sep 10, 2021
Merged

chore(react-provider): use simplified prop merging#19744
layershifter merged 4 commits intomasterfrom
chore/provider-as-root

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Sep 10, 2021

Pull request checklist

Description of changes

Modifies FluentProvider to use simplified prop merging.

@layershifter layershifter requested a review from a team as a code owner September 10, 2021 09:04
@fabricteam
Copy link
Collaborator

fabricteam commented Sep 10, 2021 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 164.2 kB
46.81 kB		 164.243 kB
46.841 kB		 -43 B
-31 B
react-components
react-components: FluentProvider & webLightTheme		 35.242 kB
11.188 kB		 35.75 kB
11.392 kB		 -508 B
-204 B
react-provider
FluentProvider		 15.24 kB
5.577 kB		 15.748 kB
5.773 kB		 -508 B
-196 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-button
Button		 22.932 kB
6.984 kB
react-button
CompoundButton		 28.215 kB
7.834 kB
react-button
MenuButton		 24.733 kB
7.546 kB
react-button
ToggleButton		 32.527 kB
7.601 kB
react-menu
Menu (including children components)		 102.963 kB
31.313 kB
react-menu
Menu (including selectable components)		 105.239 kB
31.665 kB
react-switch
Switch		 18.067 kB
6.181 kB
🤖 This report was generated against 7a242ccb6b33ca9b1e10474c0fba000270d625f5

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 10, 2021 •
edited
Loading

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

Sandbox Source
Fluent UI React Starter Configuration

@size-auditor
Copy link

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

Asset size changes

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

Baseline commit: 7a242ccb6b33ca9b1e10474c0fba000270d625f5 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 10, 2021 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 995 981 5000
BaseButton mount 1069 1005 5000
Breadcrumb mount 3025 3053 1000
ButtonNext mount 496 505 5000
Checkbox mount 1692 1692 5000
CheckboxBase mount 1475 1444 5000
ChoiceGroup mount 5380 5367 5000
ComboBox mount 1116 1108 1000
CommandBar mount 11293 11493 1000
ContextualMenu mount 7042 7315 1000
DefaultButton mount 1157 1151 5000
DetailsRow mount 4153 4108 5000
DetailsRowFast mount 3867 4117 5000
DetailsRowNoStyles mount 3692 3929 5000
Dialog mount 2620 2627 1000
DocumentCardTitle mount 150 150 1000
Dropdown mount 3580 3592 5000
FluentProviderNext mount 8076 7551 5000
FluentProviderWithTheme mount 416 358 10
FluentProviderWithTheme virtual-rerender 101 113 10
FluentProviderWithTheme virtual-rerender-with-unmount 550 532 10
FocusTrapZone mount 1929 1798 5000
FocusZone mount 1939 1790 5000
IconButton mount 1976 2002 5000
Label mount 387 375 5000
Layer mount 3348 3378 5000
Link mount 517 507 5000
MakeStyles mount 1892 1876 50000
MenuButton mount 1646 1657 5000
MessageBar mount 2261 2263 5000
Nav mount 3707 3677 1000
OverflowSet mount 1221 1179 5000
Panel mount 2545 2509 1000
Persona mount 918 910 1000
Pivot mount 1513 1583 1000
PrimaryButton mount 1405 1395 5000
Rating mount 8777 8639 5000
SearchBox mount 1542 1509 5000
Shimmer mount 2950 2910 5000
Slider mount 2181 2185 5000
SpinButton mount 5695 5614 5000
Spinner mount 456 465 5000
SplitButton mount 3431 3543 5000
Stack mount 540 572 5000
StackWithIntrinsicChildren mount 1739 1750 5000
StackWithTextChildren mount 5189 5271 5000
SwatchColorPicker mount 10987 11338 5000
Tabs mount 1519 1552 1000
TagPicker mount 2841 2631 5000
TeachingBubble mount 14195 14277 5000
Text mount 489 479 5000
TextField mount 1408 1498 5000
ThemeProvider mount 1301 1309 5000
ThemeProvider virtual-rerender 655 647 5000
ThemeProvider virtual-rerender-with-unmount 2044 2054 5000
Toggle mount 883 895 5000
buttonNative mount 126 123 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
DatepickerMinimalPerf.default 6675 5476 1.22:1
PortalMinimalPerf.default 209 182 1.15:1
ChatDuplicateMessagesPerf.default 355 319 1.11:1
TreeWith60ListItems.default 206 188 1.1:1
RefMinimalPerf.default 265 246 1.08:1
BoxMinimalPerf.default 417 389 1.07:1
SkeletonMinimalPerf.default 421 394 1.07:1
ButtonSlotsPerf.default 643 615 1.05:1
LayoutMinimalPerf.default 429 407 1.05:1
MenuMinimalPerf.default 979 928 1.05:1
ImageMinimalPerf.default 438 420 1.04:1
ProviderMinimalPerf.default 1196 1147 1.04:1
RadioGroupMinimalPerf.default 540 519 1.04:1
TableMinimalPerf.default 478 460 1.04:1
TextMinimalPerf.default 399 384 1.04:1
AttachmentMinimalPerf.default 189 184 1.03:1
CarouselMinimalPerf.default 534 520 1.03:1
DropdownManyItemsPerf.default 795 773 1.03:1
HeaderMinimalPerf.default 421 408 1.03:1
ListWith60ListItems.default 751 729 1.03:1
MenuButtonMinimalPerf.default 1869 1820 1.03:1
SegmentMinimalPerf.default 399 388 1.03:1
IconMinimalPerf.default 703 682 1.03:1
CustomToolbarPrototype.default 4468 4340 1.03:1
TooltipMinimalPerf.default 1148 1116 1.03:1
TreeMinimalPerf.default 904 875 1.03:1
CheckboxMinimalPerf.default 3036 2987 1.02:1
DividerMinimalPerf.default 412 403 1.02:1
EmbedMinimalPerf.default 4581 4500 1.02:1
FlexMinimalPerf.default 316 310 1.02:1
HeaderSlotsPerf.default 867 846 1.02:1
ListMinimalPerf.default 592 580 1.02:1
ReactionMinimalPerf.default 431 423 1.02:1
TableManyItemsPerf.default 2179 2136 1.02:1
AccordionMinimalPerf.default 181 179 1.01:1
AlertMinimalPerf.default 323 320 1.01:1
CardMinimalPerf.default 640 633 1.01:1
ItemLayoutMinimalPerf.default 1363 1349 1.01:1
SliderMinimalPerf.default 1715 1691 1.01:1
AnimationMinimalPerf.default 454 453 1:1
AvatarMinimalPerf.default 217 218 1:1
ButtonOverridesMissPerf.default 1916 1920 1:1
DialogMinimalPerf.default 836 834 1:1
LoaderMinimalPerf.default 770 767 1:1
ProviderMergeThemesPerf.default 1841 1849 1:1
StatusMinimalPerf.default 776 774 1:1
AttachmentSlotsPerf.default 1186 1204 0.99:1
DropdownMinimalPerf.default 3444 3470 0.99:1
InputMinimalPerf.default 1343 1350 0.99:1
LabelMinimalPerf.default 436 441 0.99:1
ListCommonPerf.default 717 726 0.99:1
RosterPerf.default 1255 1272 0.99:1
PopupMinimalPerf.default 641 646 0.99:1
TextAreaMinimalPerf.default 581 588 0.99:1
ToolbarMinimalPerf.default 1071 1083 0.99:1
ButtonMinimalPerf.default 190 193 0.98:1
ListNestedPerf.default 640 653 0.98:1
VideoMinimalPerf.default 723 736 0.98:1
FormMinimalPerf.default 462 475 0.97:1
SplitButtonMinimalPerf.default 4469 4649 0.96:1
ChatMinimalPerf.default 703 739 0.95:1
GridMinimalPerf.default 388 408 0.95:1
ChatWithPopoverPerf.default 385 418 0.92:1

@layershifter layershifter enabled auto-merge (squash) September 10, 2021 14:36
@layershifter layershifter merged commit 126c528 into master Sep 10, 2021
@layershifter layershifter deleted the chore/provider-as-root branch September 10, 2021 15:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@ling1726 ling1726 ling1726 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

Fluent UI react-components (v9)

Projects

None yet

Milestone

September Project Cycle Q3 2021

Development

Successfully merging this pull request may close these issues.

@fluentui/react-provider: use simplified prop merging

3 participants

@layershifter @fabricteam @ling1726