Skip to content

chore: create @fluentui/react-portal-compat#22466

Merged
layershifter merged 1 commit into
microsoft:masterfrom
layershifter:chore/create-compat
Apr 13, 2022
Merged

chore: create @fluentui/react-portal-compat#22466
layershifter merged 1 commit into
microsoft:masterfrom
layershifter:chore/create-compat

Conversation

@layershifter

@layershifter layershifter commented Apr 12, 2022

Copy link
Copy Markdown
Member

New Behavior

This PR adds @fluentui/react-portal-compat based on RFC #21774.
The boilerplate was created by a generator. All actual work (code, fixing dependencies, etc.) will done in a separate PR.

@codesandbox-ci

Copy link
Copy Markdown

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 776354a:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 924 904 5000
Button mount 558 542 5000
FluentProvider mount 1749 1803 5000
FluentProviderWithTheme mount 249 273 10
FluentProviderWithTheme virtual-rerender 230 219 10
FluentProviderWithTheme virtual-rerender-with-unmount 297 279 10
MakeStyles mount 1696 1701 50000

@size-auditor

size-auditor Bot commented Apr 12, 2022

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: 65897f7924362a8c8bf581ddca162c8ed4247011 (build)

@fabricteam

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
priority-overflow
createOverflowManager
2.836 kB
1.209 kB
react-accordion
Accordion (including children components)
74.792 kB
22.516 kB
react-avatar
Avatar
45.142 kB
13.111 kB
react-badge
Badge
20.895 kB
6.567 kB
react-badge
CounterBadge
21.848 kB
6.883 kB
react-badge
PresenceBadge
21.951 kB
6.565 kB
react-button
Button
28.013 kB
8.059 kB
react-button
CompoundButton
33.508 kB
9.092 kB
react-button
MenuButton
29.796 kB
8.665 kB
react-button
SplitButton
36.268 kB
9.863 kB
react-button
ToggleButton
37.395 kB
8.68 kB
react-card
Card - All
53.619 kB
15.372 kB
react-card
Card
48.904 kB
14.089 kB
react-card
CardFooter
7.686 kB
3.264 kB
react-card
CardHeader
9.251 kB
3.78 kB
react-card
CardPreview
7.658 kB
3.291 kB
react-combobox
Combobox
54.566 kB
18.884 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
176.089 kB
49.113 kB
react-components
react-components: FluentProvider & webLightTheme
32.601 kB
10.668 kB
react-divider
Divider
15.385 kB
5.539 kB
react-image
Image
10.109 kB
3.958 kB
react-input
Input
21.661 kB
7.18 kB
react-label
Label
8.371 kB
3.504 kB
react-link
Link
11.106 kB
4.507 kB
react-menu
Menu (including children components)
105.852 kB
32.433 kB
react-menu
Menu (including selectable components)
109.031 kB
32.897 kB
react-popover
Popover
96.787 kB
29.559 kB
react-portal
Portal
6.272 kB
2.17 kB
react-positioning
usePopper
23.21 kB
8.084 kB
react-priority-overflow
hooks only
10.606 kB
4.087 kB
react-provider
FluentProvider
14.009 kB
5.25 kB
react-select
Select
16.562 kB
6.264 kB
react-slider
Slider
25.549 kB
8.25 kB
react-spinbutton
SpinButton
41.512 kB
11.912 kB
react-spinner
Spinner
16.459 kB
5.549 kB
react-switch
Switch
24.279 kB
8.001 kB
react-text
Text - Default
10.797 kB
4.233 kB
react-text
Text - Wrappers
14.113 kB
4.576 kB
react-textarea
Textarea
20.602 kB
7.033 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
29.676 kB
6.604 kB
react-theme
Teams: Light theme
18.492 kB
5.296 kB
react-tooltip
Tooltip
42.837 kB
14.727 kB
react-utilities
SSRProvider
189 B
161 B
🤖 This report was generated against 65897f7924362a8c8bf581ddca162c8ed4247011

@fabricteam

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 177 157 1.13:1
ImageMinimalPerf.default 371 338 1.1:1
FlexMinimalPerf.default 294 269 1.09:1
TableMinimalPerf.default 406 378 1.07:1
VideoMinimalPerf.default 693 646 1.07:1
AlertMinimalPerf.default 273 257 1.06:1
ListWith60ListItems.default 670 633 1.06:1
RosterPerf.default 1145 1078 1.06:1
ListMinimalPerf.default 521 495 1.05:1
PortalMinimalPerf.default 175 166 1.05:1
RadioGroupMinimalPerf.default 461 439 1.05:1
TextAreaMinimalPerf.default 501 477 1.05:1
AvatarMinimalPerf.default 192 184 1.04:1
CarouselMinimalPerf.default 480 460 1.04:1
LayoutMinimalPerf.default 354 339 1.04:1
SegmentMinimalPerf.default 339 327 1.04:1
IconMinimalPerf.default 599 577 1.04:1
AccordionMinimalPerf.default 146 142 1.03:1
ProviderMinimalPerf.default 407 397 1.03:1
TreeMinimalPerf.default 811 789 1.03:1
BoxMinimalPerf.default 331 326 1.02:1
ChatMinimalPerf.default 721 710 1.02:1
CheckboxMinimalPerf.default 2711 2670 1.02:1
HeaderSlotsPerf.default 746 733 1.02:1
LabelMinimalPerf.default 380 373 1.02:1
LoaderMinimalPerf.default 671 659 1.02:1
PopupMinimalPerf.default 626 611 1.02:1
TableManyItemsPerf.default 1915 1886 1.02:1
TextMinimalPerf.default 346 339 1.02:1
ToolbarMinimalPerf.default 947 933 1.02:1
ItemLayoutMinimalPerf.default 1180 1168 1.01:1
ReactionMinimalPerf.default 361 356 1.01:1
SplitButtonMinimalPerf.default 4403 4366 1.01:1
StatusMinimalPerf.default 661 656 1.01:1
AnimationMinimalPerf.default 544 546 1:1
ButtonSlotsPerf.default 545 546 1:1
ChatWithPopoverPerf.default 374 375 1:1
DialogMinimalPerf.default 746 746 1:1
DropdownMinimalPerf.default 3021 3015 1:1
GridMinimalPerf.default 325 326 1:1
InputMinimalPerf.default 1291 1286 1:1
RefMinimalPerf.default 228 229 1:1
SliderMinimalPerf.default 1661 1664 1:1
AttachmentMinimalPerf.default 145 146 0.99:1
AttachmentSlotsPerf.default 1066 1074 0.99:1
ButtonOverridesMissPerf.default 1503 1514 0.99:1
CardMinimalPerf.default 554 559 0.99:1
DividerMinimalPerf.default 344 346 0.99:1
DropdownManyItemsPerf.default 671 679 0.99:1
EmbedMinimalPerf.default 4110 4150 0.99:1
FormMinimalPerf.default 389 393 0.99:1
ListNestedPerf.default 544 547 0.99:1
MenuButtonMinimalPerf.default 1674 1697 0.99:1
TooltipMinimalPerf.default 1080 1094 0.99:1
DatepickerMinimalPerf.default 5672 5760 0.98:1
MenuMinimalPerf.default 825 845 0.98:1
ProviderMergeThemesPerf.default 1230 1251 0.98:1
ChatDuplicateMessagesPerf.default 292 301 0.97:1
ListCommonPerf.default 603 620 0.97:1
CustomToolbarPrototype.default 2714 2803 0.97:1
ButtonMinimalPerf.default 152 158 0.96:1
HeaderMinimalPerf.default 363 383 0.95:1
SkeletonMinimalPerf.default 332 363 0.91:1

@fabricteam

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1018 1040 5000
Breadcrumb mount 3038 2923 1000
Checkbox mount 1704 1690 5000
CheckboxBase mount 1413 1471 5000
ChoiceGroup mount 5230 5337 5000
ComboBox mount 1037 1041 1000
CommandBar mount 11562 11372 1000
ContextualMenu mount 12133 12252 1000
DefaultButton mount 1315 1304 5000
DetailsRow mount 4127 4211 5000
DetailsRowFast mount 4117 4169 5000
DetailsRowNoStyles mount 3988 3878 5000
Dialog mount 2400 2436 1000
DocumentCardTitle mount 167 178 1000
Dropdown mount 3613 3635 5000
FocusTrapZone mount 1982 1896 5000
FocusZone mount 1862 1852 5000
IconButton mount 1981 1911 5000
Label mount 369 375 5000
Layer mount 3191 3197 5000
Link mount 503 520 5000
MenuButton mount 1625 1637 5000
MessageBar mount 2224 2248 5000
Nav mount 3556 3575 1000
OverflowSet mount 1216 1225 5000
Panel mount 2351 2355 1000
Persona mount 1089 1076 1000
Pivot mount 1547 1563 1000
PrimaryButton mount 1419 1423 5000
Rating mount 8592 8468 5000
SearchBox mount 1468 1462 5000
Shimmer mount 2791 2734 5000
Slider mount 2119 2191 5000
SpinButton mount 5463 5597 5000
Spinner mount 446 482 5000
SplitButton mount 3418 3558 5000
Stack mount 603 613 5000
StackWithIntrinsicChildren mount 2638 2584 5000
StackWithTextChildren mount 6030 5956 5000
SwatchColorPicker mount 12605 12461 5000
TagPicker mount 2942 2923 5000
TeachingBubble mount 94402 89231 5000
Text mount 472 465 5000
TextField mount 1505 1528 5000
ThemeProvider mount 1211 1214 5000
ThemeProvider virtual-rerender 689 693 5000
ThemeProvider virtual-rerender-with-unmount 2031 2066 5000
Toggle mount 849 840 5000
buttonNative mount 130 142 5000

@layershifter layershifter merged commit b37857d into microsoft:master Apr 13, 2022
@layershifter layershifter deleted the chore/create-compat branch April 13, 2022 12:45
marwan38 pushed a commit to marwan38/fluentui that referenced this pull request Jun 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants