Skip to content

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Feb 24, 2022

New Behavior

This PR backports changes from #21829 to @fluentui/react-positioning as was suggested (#21829 (review)).

Visual tests were also added.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 24, 2022

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 76afe40:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 24, 2022

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
171.325 kB
47.969 kB
171.671 kB
48.071 kB
346 B
102 B
react-menu
Menu (including children components)
103.046 kB
31.738 kB
103.392 kB
31.838 kB
346 B
100 B
react-menu
Menu (including selectable components)
105.401 kB
32.1 kB
105.747 kB
32.199 kB
346 B
99 B
react-popover
Popover
95.955 kB
29.269 kB
96.301 kB
29.382 kB
346 B
113 B
react-positioning
usePopper
22.864 kB
7.978 kB
23.21 kB
8.084 kB
346 B
106 B
react-tooltip
Tooltip
42.407 kB
14.6 kB
42.753 kB
14.693 kB
346 B
93 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-combobox
Combobox
6.813 kB
2.895 kB
react-components
react-components: FluentProvider & webLightTheme
32.519 kB
10.64 kB
🤖 This report was generated against e2e830792b887733a1fa3db02f1dedb9bf9faa97

@size-auditor
Copy link

size-auditor bot commented Feb 24, 2022

Asset size changes

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

Baseline commit: e2e830792b887733a1fa3db02f1dedb9bf9faa97 (build)

@layershifter layershifter marked this pull request as ready for review February 24, 2022 13:24
@layershifter layershifter requested a review from a team as a code owner February 24, 2022 13:24
@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 751 732 5000
BaseButton mount 786 749 5000
Breadcrumb mount 2094 2323 1000
ButtonNext mount 408 425 5000
Checkbox mount 1225 1319 5000
CheckboxBase mount 1083 1118 5000
ChoiceGroup mount 3970 4034 5000
ComboBox mount 879 808 1000
CommandBar mount 8422 8494 1000
ContextualMenu mount 14110 14421 1000
DefaultButton mount 933 985 5000
DetailsRow mount 3102 3196 5000
DetailsRowFast mount 3086 3032 5000
DetailsRowNoStyles mount 2974 2931 5000
Dialog mount 1851 1926 1000
DocumentCardTitle mount 158 155 1000
Dropdown mount 2747 2700 5000
FluentProviderNext mount 1614 1667 5000
FluentProviderWithTheme mount 133 94 10
FluentProviderWithTheme virtual-rerender 80 98 10
FluentProviderWithTheme virtual-rerender-with-unmount 152 192 10
FocusTrapZone mount 1515 1595 5000
FocusZone mount 1587 1599 5000
IconButton mount 1490 1488 5000
Label mount 292 326 5000
Layer mount 2493 2473 5000
Link mount 412 376 5000
MakeStyles mount 1291 1458 50000
MenuButton mount 1180 1263 5000
MessageBar mount 1739 1666 5000
Nav mount 2812 2839 1000
OverflowSet mount 866 902 5000
Panel mount 1720 1843 1000
Persona mount 744 662 1000
Pivot mount 1254 1233 1000
PrimaryButton mount 1103 1106 5000
Rating mount 6307 6328 5000
SearchBox mount 1118 1034 5000
Shimmer mount 2056 2073 5000
Slider mount 1668 1539 5000
SpinButton mount 4163 4300 5000
Spinner mount 390 335 5000
SplitButton mount 2577 2558 5000
Stack mount 471 480 5000
StackWithIntrinsicChildren mount 1759 1765 5000
StackWithTextChildren mount 4305 4224 5000
SwatchColorPicker mount 9703 9381 5000
TagPicker mount 2275 2074 5000
TeachingBubble mount 11175 10881 5000
Text mount 394 399 5000
TextField mount 1184 1212 5000
ThemeProvider mount 976 1033 5000
ThemeProvider virtual-rerender 542 553 5000
ThemeProvider virtual-rerender-with-unmount 1480 1542 5000
Toggle mount 718 634 5000
buttonNative mount 127 135 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
RefMinimalPerf.default 210 182 1.15:1
ChatDuplicateMessagesPerf.default 259 227 1.14:1
ProviderMergeThemesPerf.default 1474 1292 1.14:1
StatusMinimalPerf.default 589 517 1.14:1
SegmentMinimalPerf.default 292 261 1.12:1
RadioGroupMinimalPerf.default 384 345 1.11:1
AvatarMinimalPerf.default 176 160 1.1:1
CardMinimalPerf.default 464 424 1.09:1
SliderMinimalPerf.default 1438 1323 1.09:1
MenuMinimalPerf.default 678 628 1.08:1
HeaderMinimalPerf.default 291 273 1.07:1
LabelMinimalPerf.default 313 293 1.07:1
RosterPerf.default 974 908 1.07:1
ButtonOverridesMissPerf.default 1362 1279 1.06:1
ChatWithPopoverPerf.default 338 320 1.06:1
DividerMinimalPerf.default 320 301 1.06:1
GridMinimalPerf.default 276 261 1.06:1
ProviderMinimalPerf.default 960 902 1.06:1
TextAreaMinimalPerf.default 433 408 1.06:1
VideoMinimalPerf.default 506 476 1.06:1
DatepickerMinimalPerf.default 4695 4472 1.05:1
DropdownManyItemsPerf.default 574 545 1.05:1
SplitButtonMinimalPerf.default 3621 3441 1.05:1
AttachmentMinimalPerf.default 136 131 1.04:1
DialogMinimalPerf.default 631 608 1.04:1
FlexMinimalPerf.default 223 215 1.04:1
BoxMinimalPerf.default 302 294 1.03:1
ButtonSlotsPerf.default 472 460 1.03:1
TreeMinimalPerf.default 683 660 1.03:1
DropdownMinimalPerf.default 2547 2488 1.02:1
MenuButtonMinimalPerf.default 1321 1296 1.02:1
TextMinimalPerf.default 300 295 1.02:1
ListMinimalPerf.default 439 433 1.01:1
LoaderMinimalPerf.default 579 574 1.01:1
PortalMinimalPerf.default 154 152 1.01:1
ReactionMinimalPerf.default 324 321 1.01:1
AlertMinimalPerf.default 228 227 1:1
AnimationMinimalPerf.default 461 460 1:1
InputMinimalPerf.default 1050 1048 1:1
PopupMinimalPerf.default 493 493 1:1
CustomToolbarPrototype.default 3279 3273 1:1
TableManyItemsPerf.default 1471 1486 0.99:1
TreeWith60ListItems.default 152 153 0.99:1
FormMinimalPerf.default 344 350 0.98:1
HeaderSlotsPerf.default 626 636 0.98:1
LayoutMinimalPerf.default 308 313 0.98:1
TooltipMinimalPerf.default 874 892 0.98:1
AccordionMinimalPerf.default 138 143 0.97:1
ItemLayoutMinimalPerf.default 952 981 0.97:1
ToolbarMinimalPerf.default 720 746 0.97:1
ChatMinimalPerf.default 558 580 0.96:1
CheckboxMinimalPerf.default 2077 2161 0.96:1
EmbedMinimalPerf.default 3352 3480 0.96:1
TableMinimalPerf.default 336 349 0.96:1
ButtonMinimalPerf.default 139 147 0.95:1
ListCommonPerf.default 484 509 0.95:1
IconMinimalPerf.default 501 528 0.95:1
ListWith60ListItems.default 512 543 0.94:1
CarouselMinimalPerf.default 360 386 0.93:1
ImageMinimalPerf.default 287 313 0.92:1
ListNestedPerf.default 418 460 0.91:1
AttachmentSlotsPerf.default 832 926 0.9:1
SkeletonMinimalPerf.default 268 298 0.9:1

@layershifter layershifter merged commit def76ff into microsoft:master Feb 25, 2022
@layershifter layershifter deleted the feat/port-popper-modifier branch February 25, 2022 09:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants