fluentui
fluentui copied to clipboard
microsoft
fix(react-positioning): improve positioning hack
Perf Analysis (@fluentui/react-components)
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| InfoButton | mount | 15 | 15 | 5000 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 572 | 581 | 5000 | |
| Button | mount | 294 | 289 | 5000 | |
| Field | mount | 1067 | 1040 | 5000 | |
| FluentProvider | mount | 670 | 656 | 5000 | |
| FluentProviderWithTheme | mount | 73 | 81 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 66 | 60 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 71 | 73 | 10 | |
| InfoButton | mount | 15 | 15 | 5000 | Possible regression |
| MakeStyles | mount | 886 | 877 | 50000 | |
| Persona | mount | 1564 | 1555 | 5000 | |
| SpinButton | mount | 1279 | 1271 | 5000 |
Asset size changes
Size Auditor did not detect a change in bundle size for any component!
Baseline commit: 0f5a9008e78d8a3e89ebdecb26c48694b30d35f4 (build)
![size-auditor[bot] avatar](https://avatars.githubusercontent.com/in/13711?v=4 "Published by a pub.dev verified publisher"){kind=small}
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 cb8fcc0076360b034e5c4a677d806edc3815208e:
| Sandbox | Source |
|---|---|
| @fluentui/react 8 starter | Configuration |
| @fluentui/react-components 9 starter | Configuration |
| competent-silence-xecnn2 | Issue #26579 |
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react-combobox Combobox (including child components) |
87.735 kB28.243 kB |
88.017 kB28.304 kB |
282 B 61 B |
| react-combobox Dropdown (including child components) |
86.074 kB27.848 kB |
86.356 kB27.943 kB |
282 B 95 B |
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
206.425 kB57.914 kB |
206.707 kB57.973 kB |
282 B 59 B |
| react-datepicker-compat DatePicker Compat |
222.56 kB59.204 kB |
222.842 kB59.288 kB |
282 B 84 B |
| react-infobutton InfoButton |
130.121 kB39.785 kB |
130.403 kB39.846 kB |
282 B 61 B |
| react-infobutton InfoLabel |
133.586 kB40.852 kB |
133.868 kB40.907 kB |
282 B 55 B |
| react-menu Menu (including children components) |
130.848 kB39.946 kB |
131.129 kB40.008 kB |
281 B 62 B |
| react-menu Menu (including selectable components) |
133.832 kB40.479 kB |
134.113 kB40.541 kB |
281 B 62 B |
| react-popover Popover |
117.083 kB36.122 kB |
117.365 kB36.195 kB |
282 B 73 B |
| react-positioning usePositioning |
24.249 kB8.856 kB |
24.524 kB8.919 kB |
275 B 63 B |
| react-tooltip Tooltip |
47.119 kB16.528 kB |
47.392 kB16.574 kB |
273 B 46 B |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| global-context createContext |
510 B330 B |
| global-context createContextSelector |
537 B342 B |
| priority-overflow createOverflowManager |
3.194 kB1.315 kB |
| react-accordion Accordion (including children components) |
88.516 kB26.795 kB |
| react-alert Alert |
93.549 kB22.537 kB |
| react-avatar Avatar |
57.797 kB15.091 kB |
| react-avatar AvatarGroup |
15.646 kB6.298 kB |
| react-avatar AvatarGroupItem |
73.973 kB19.582 kB |
| react-badge Badge |
23.555 kB7.256 kB |
| react-badge CounterBadge |
24.457 kB7.559 kB |
| react-badge PresenceBadge |
32.135 kB8.423 kB |
| react-button Button |
36.742 kB9.5 kB |
| react-button CompoundButton |
43.896 kB10.98 kB |
| react-button MenuButton |
41.427 kB10.836 kB |
| react-button SplitButton |
49.649 kB12.42 kB |
| react-button ToggleButton |
55.024 kB11.436 kB |
| react-card Card - All |
88.716 kB25.114 kB |
| react-card Card |
83.651 kB23.658 kB |
| react-card CardFooter |
9.193 kB3.892 kB |
| react-card CardHeader |
11.089 kB4.588 kB |
| react-card CardPreview |
9.998 kB4.24 kB |
| react-checkbox Checkbox |
34.5 kB10.878 kB |
| react-components react-components: Button, FluentProvider & webLightTheme |
64.899 kB17.91 kB |
| react-components react-components: FluentProvider & webLightTheme |
36.132 kB11.954 kB |
| react-dialog Dialog (including children components) |
92.076 kB27.492 kB |
| react-divider Divider |
17.441 kB6.349 kB |
| react-field Field |
18.9 kB7.083 kB |
| react-image Image |
11.514 kB4.619 kB |
| react-input Input |
24.183 kB7.772 kB |
| react-label Label |
10.139 kB4.231 kB |
| react-link Link |
12.339 kB5.105 kB |
| react-overflow hooks only |
11.206 kB4.266 kB |
| react-persona Persona |
64.718 kB17.012 kB |
| react-portal Portal |
11.676 kB4.31 kB |
| react-portal-compat PortalCompatProvider |
6.473 kB2.196 kB |
| react-progress ProgressBar |
13.891 kB5.482 kB |
| react-provider FluentProvider |
18.079 kB6.713 kB |
| react-radio Radio |
27.404 kB8.722 kB |
| react-radio RadioGroup |
11.326 kB4.743 kB |
| react-select Select |
25.373 kB8.826 kB |
| react-slider Slider |
34.322 kB11.099 kB |
| react-spinbutton SpinButton |
34.121 kB10.421 kB |
| react-spinner Spinner |
21.327 kB7.015 kB |
| react-switch Switch |
29.924 kB9.342 kB |
| react-table DataGrid |
150.868 kB41.518 kB |
| react-table Table (Primitives only) |
45.111 kB12.567 kB |
| react-table Table as DataGrid |
133.356 kB34.002 kB |
| react-table Table (Selection only) |
79.125 kB19.379 kB |
| react-table Table (Sort only) |
78.455 kB19.187 kB |
| react-tags Tag |
22.004 kB7.93 kB |
| react-text Text - Default |
12.527 kB4.963 kB |
| react-text Text - Wrappers |
15.677 kB5.284 kB |
| react-textarea Textarea |
27.686 kB9.126 kB |
| react-theme Single theme token import |
69 B89 B |
| react-theme Teams: all themes |
31.33 kB6.764 kB |
| react-theme Teams: Light theme |
17.895 kB5.162 kB |
| react-utilities SSRProvider |
180 B159 B |
Perf Analysis (@fluentui/react-northstar)
:warning: 1 potential perf regressions detected
Potential regressions comparing to master
| Scenario | Current PR Ticks | Baseline Ticks | Ratio | Regression Analysis |
|---|---|---|---|---|
| PortalMinimalPerf.default | 93 | 88 | 1.06:1 | analysis |
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| AttachmentMinimalPerf.default | 85 | 76 | 1.12:1 |
| SkeletonMinimalPerf.default | 210 | 189 | 1.11:1 |
| GridMinimalPerf.default | 205 | 187 | 1.1:1 |
| ListMinimalPerf.default | 327 | 306 | 1.07:1 |
| RadioGroupMinimalPerf.default | 274 | 255 | 1.07:1 |
| FormMinimalPerf.default | 229 | 216 | 1.06:1 |
| ReactionMinimalPerf.default | 211 | 200 | 1.06:1 |
| AvatarMinimalPerf.default | 111 | 106 | 1.05:1 |
| FlexMinimalPerf.default | 160 | 153 | 1.05:1 |
| AccordionMinimalPerf.default | 85 | 82 | 1.04:1 |
| ButtonSlotsPerf.default | 317 | 306 | 1.04:1 |
| DropdownManyItemsPerf.default | 408 | 391 | 1.04:1 |
| InputMinimalPerf.default | 549 | 529 | 1.04:1 |
| RosterPerf.default | 1585 | 1518 | 1.04:1 |
| StatusMinimalPerf.default | 397 | 382 | 1.04:1 |
| TreeMinimalPerf.default | 479 | 459 | 1.04:1 |
| AnimationMinimalPerf.default | 298 | 290 | 1.03:1 |
| ButtonMinimalPerf.default | 90 | 87 | 1.03:1 |
| CheckboxMinimalPerf.default | 1159 | 1129 | 1.03:1 |
| ImageMinimalPerf.default | 220 | 214 | 1.03:1 |
| PopupMinimalPerf.default | 354 | 345 | 1.03:1 |
| TableMinimalPerf.default | 240 | 234 | 1.03:1 |
| AlertMinimalPerf.default | 152 | 149 | 1.02:1 |
| LoaderMinimalPerf.default | 185 | 182 | 1.02:1 |
| SliderMinimalPerf.default | 710 | 695 | 1.02:1 |
| CustomToolbarPrototype.default | 1467 | 1441 | 1.02:1 |
| ToolbarMinimalPerf.default | 550 | 537 | 1.02:1 |
| ChatMinimalPerf.default | 435 | 431 | 1.01:1 |
| DatepickerMinimalPerf.default | 3585 | 3537 | 1.01:1 |
| EmbedMinimalPerf.default | 1718 | 1709 | 1.01:1 |
| HeaderSlotsPerf.default | 461 | 455 | 1.01:1 |
| ItemLayoutMinimalPerf.default | 715 | 710 | 1.01:1 |
| ProviderMergeThemesPerf.default | 671 | 667 | 1.01:1 |
| BoxMinimalPerf.default | 191 | 191 | 1:1 |
| CarouselMinimalPerf.default | 257 | 256 | 1:1 |
| DropdownMinimalPerf.default | 1396 | 1400 | 1:1 |
| HeaderMinimalPerf.default | 207 | 206 | 1:1 |
| ListCommonPerf.default | 403 | 403 | 1:1 |
| MenuButtonMinimalPerf.default | 955 | 956 | 1:1 |
| SegmentMinimalPerf.default | 194 | 194 | 1:1 |
| TableManyItemsPerf.default | 1117 | 1118 | 1:1 |
| TooltipMinimalPerf.default | 1259 | 1255 | 1:1 |
| ButtonOverridesMissPerf.default | 618 | 627 | 0.99:1 |
| ChatWithPopoverPerf.default | 190 | 192 | 0.99:1 |
| LayoutMinimalPerf.default | 202 | 204 | 0.99:1 |
| ListWith60ListItems.default | 368 | 373 | 0.99:1 |
| RefMinimalPerf.default | 110 | 111 | 0.99:1 |
| SplitButtonMinimalPerf.default | 2248 | 2266 | 0.99:1 |
| TextAreaMinimalPerf.default | 282 | 285 | 0.99:1 |
| AttachmentSlotsPerf.default | 647 | 657 | 0.98:1 |
| CardMinimalPerf.default | 306 | 311 | 0.98:1 |
| DialogMinimalPerf.default | 446 | 457 | 0.98:1 |
| ListNestedPerf.default | 322 | 327 | 0.98:1 |
| MenuMinimalPerf.default | 502 | 511 | 0.98:1 |
| ChatDuplicateMessagesPerf.default | 145 | 150 | 0.97:1 |
| LabelMinimalPerf.default | 218 | 224 | 0.97:1 |
| ProviderMinimalPerf.default | 195 | 202 | 0.97:1 |
| VideoMinimalPerf.default | 425 | 439 | 0.97:1 |
| DividerMinimalPerf.default | 193 | 202 | 0.96:1 |
| TextMinimalPerf.default | 187 | 194 | 0.96:1 |
| TreeWith60ListItems.default | 82 | 85 | 0.96:1 |
| IconMinimalPerf.default | 368 | 396 | 0.93:1 |
Perf Analysis (@fluentui/react)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 650 | 630 | 5000 | |
| Breadcrumb | mount | 1705 | 1698 | 1000 | |
| Checkbox | mount | 1718 | 1728 | 5000 | |
| CheckboxBase | mount | 1567 | 1506 | 5000 | |
| ChoiceGroup | mount | 3003 | 2982 | 5000 | |
| ComboBox | mount | 685 | 652 | 1000 | |
| CommandBar | mount | 6420 | 6342 | 1000 | |
| ContextualMenu | mount | 15419 | 15248 | 1000 | |
| DefaultButton | mount | 759 | 735 | 5000 | |
| DetailsRow | mount | 2233 | 2191 | 5000 | |
| DetailsRowFast | mount | 2226 | 2202 | 5000 | |
| DetailsRowNoStyles | mount | 2035 | 2051 | 5000 | |
| Dialog | mount | 2673 | 2832 | 1000 | |
| DocumentCardTitle | mount | 229 | 234 | 1000 | |
| Dropdown | mount | 1989 | 2004 | 5000 | |
| FocusTrapZone | mount | 1117 | 1112 | 5000 | |
| FocusZone | mount | 1082 | 1072 | 5000 | |
| GroupedList | mount | 42098 | 42415 | 2 | |
| GroupedList | virtual-rerender | 20334 | 20359 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 52333 | 51826 | 2 | |
| GroupedListV2 | mount | 235 | 240 | 2 | |
| GroupedListV2 | virtual-rerender | 218 | 213 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 232 | 227 | 2 | |
| IconButton | mount | 1081 | 1097 | 5000 | |
| Label | mount | 353 | 342 | 5000 | |
| Layer | mount | 2720 | 2742 | 5000 | |
| Link | mount | 387 | 404 | 5000 | |
| MenuButton | mount | 969 | 955 | 5000 | |
| MessageBar | mount | 21849 | 21642 | 5000 | |
| Nav | mount | 1953 | 1971 | 1000 | |
| OverflowSet | mount | 800 | 812 | 5000 | |
| Panel | mount | 1768 | 1779 | 1000 | |
| Persona | mount | 742 | 763 | 1000 | |
| Pivot | mount | 890 | 863 | 1000 | |
| PrimaryButton | mount | 869 | 852 | 5000 | |
| Rating | mount | 4630 | 4605 | 5000 | |
| SearchBox | mount | 926 | 920 | 5000 | |
| Shimmer | mount | 1849 | 1945 | 5000 | |
| Slider | mount | 1344 | 1328 | 5000 | |
| SpinButton | mount | 2928 | 2916 | 5000 | |
| Spinner | mount | 400 | 387 | 5000 | |
| SplitButton | mount | 1846 | 1800 | 5000 | |
| Stack | mount | 414 | 411 | 5000 | |
| StackWithIntrinsicChildren | mount | 877 | 853 | 5000 | |
| StackWithTextChildren | mount | 2674 | 2723 | 5000 | |
| SwatchColorPicker | mount | 6125 | 6209 | 5000 | |
| TagPicker | mount | 1482 | 1508 | 5000 | |
| Text | mount | 384 | 379 | 5000 | |
| TextField | mount | 926 | 961 | 5000 | |
| ThemeProvider | mount | 852 | 828 | 5000 | |
| ThemeProvider | virtual-rerender | 590 | 601 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1270 | 1286 | 5000 | |
| Toggle | mount | 627 | 628 | 5000 | |
| buttonNative | mount | 190 | 190 | 5000 |