fluentui
fluentui copied to clipboard
Published
20 hours ago •
microsoft
microsoft
update package manifest to only include v8 controls
One valid question that comes up....do we need a manifest for v9 or any other packages? Or is this just a legacy v8 concern?
📊 Bundle size report
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| global-context createContext |
533 B341 B |
| global-context createContextSelector |
554 B348 B |
| priority-overflow createOverflowManager |
2.936 kB1.212 kB |
| react-accordion Accordion (including children components) |
78.914 kB24.06 kB |
| react-alert Alert |
83.511 kB20.921 kB |
| react-avatar Avatar |
48.381 kB13.696 kB |
| react-avatar AvatarGroup |
14.95 kB5.989 kB |
| react-avatar AvatarGroupItem |
68.349 kB19.039 kB |
| react-badge Badge |
22.6 kB7.205 kB |
| react-badge CounterBadge |
23.503 kB7.497 kB |
| react-badge PresenceBadge |
24.05 kB7.067 kB |
| react-button Button |
36.119 kB9.647 kB |
| react-button CompoundButton |
43.144 kB10.86 kB |
| react-button MenuButton |
38.813 kB10.551 kB |
| react-button SplitButton |
46.228 kB11.933 kB |
| react-button ToggleButton |
51.888 kB11.127 kB |
| react-card Card - All |
67.002 kB19.261 kB |
| react-card Card |
62.684 kB18.177 kB |
| react-card CardFooter |
8.561 kB3.601 kB |
| react-card CardHeader |
9.604 kB3.94 kB |
| react-card CardPreview |
8.662 kB3.656 kB |
| react-combobox Combobox (including child components) |
74.636 kB24.186 kB |
| react-combobox Dropdown (including child components) |
74.236 kB24.086 kB |
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
188.672 kB52.359 kB |
| react-components react-components: FluentProvider & webLightTheme |
33.394 kB11.007 kB |
| react-dialog Dialog (including children components) |
81.199 kB24.196 kB |
| react-divider Divider |
16.459 kB5.902 kB |
| react-image Image |
10.78 kB4.264 kB |
| react-input Input |
23.757 kB7.704 kB |
| react-label Label |
9.338 kB3.86 kB |
| react-link Link |
11.784 kB4.867 kB |
| react-menu Menu (including children components) |
116.572 kB35.778 kB |
| react-menu Menu (including selectable components) |
119.641 kB36.297 kB |
| react-overflow hooks only |
10.685 kB4.104 kB |
| react-popover Popover |
102.963 kB31.553 kB |
| react-portal Portal |
10.576 kB3.875 kB |
| react-portal-compat PortalCompatProvider |
5.851 kB1.964 kB |
| react-positioning usePositioning |
19.7 kB7.404 kB |
| react-provider FluentProvider |
15.755 kB5.883 kB |
| react-radio Radio |
35.56 kB11.929 kB |
| react-radio RadioGroup |
14.248 kB5.7 kB |
| react-select Select |
20.846 kB7.346 kB |
| react-slider Slider |
31.526 kB10.046 kB |
| react-spinbutton SpinButton |
44.102 kB12.425 kB |
| react-spinner Spinner |
19.977 kB6.438 kB |
| react-switch Switch |
32.097 kB10.27 kB |
| react-text Text - Default |
11.782 kB4.605 kB |
| react-text Text - Wrappers |
15.092 kB5.044 kB |
| react-textarea Textarea |
25.013 kB8.133 kB |
| react-theme Single theme token import |
69 B89 B |
| react-theme Teams: all themes |
29.65 kB6.444 kB |
| react-theme Teams: Light theme |
17.486 kB5.057 kB |
| react-tooltip Tooltip |
41.535 kB14.639 kB |
| react-utilities SSRProvider |
180 B159 B |
Perf Analysis (@fluentui/react-components)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 1272 | 1268 | 5000 | |
| Button | mount | 926 | 938 | 5000 | |
| FluentProvider | mount | 1479 | 1494 | 5000 | |
| FluentProviderWithTheme | mount | 575 | 575 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 540 | 546 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 567 | 590 | 10 | |
| MakeStyles | mount | 1952 | 1935 | 50000 | |
| SpinButton | mount | 2340 | 2358 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| AttachmentMinimalPerf.default | 134 | 117 | 1.15:1 |
| AccordionMinimalPerf.default | 129 | 119 | 1.08:1 |
| ButtonMinimalPerf.default | 141 | 133 | 1.06:1 |
| ListCommonPerf.default | 531 | 501 | 1.06:1 |
| CarouselMinimalPerf.default | 360 | 342 | 1.05:1 |
| SegmentMinimalPerf.default | 312 | 297 | 1.05:1 |
| AvatarMinimalPerf.default | 163 | 159 | 1.03:1 |
| ButtonSlotsPerf.default | 433 | 421 | 1.03:1 |
| ChatWithPopoverPerf.default | 296 | 286 | 1.03:1 |
| TableMinimalPerf.default | 363 | 354 | 1.03:1 |
| BoxMinimalPerf.default | 294 | 289 | 1.02:1 |
| DropdownManyItemsPerf.default | 550 | 541 | 1.02:1 |
| FormMinimalPerf.default | 330 | 324 | 1.02:1 |
| ListNestedPerf.default | 474 | 466 | 1.02:1 |
| RefMinimalPerf.default | 187 | 183 | 1.02:1 |
| SkeletonMinimalPerf.default | 309 | 302 | 1.02:1 |
| TooltipMinimalPerf.default | 1878 | 1836 | 1.02:1 |
| AnimationMinimalPerf.default | 474 | 469 | 1.01:1 |
| EmbedMinimalPerf.default | 2653 | 2633 | 1.01:1 |
| HeaderSlotsPerf.default | 680 | 675 | 1.01:1 |
| ImageMinimalPerf.default | 346 | 342 | 1.01:1 |
| InputMinimalPerf.default | 862 | 856 | 1.01:1 |
| RosterPerf.default | 1689 | 1673 | 1.01:1 |
| RadioGroupMinimalPerf.default | 396 | 391 | 1.01:1 |
| ReactionMinimalPerf.default | 327 | 325 | 1.01:1 |
| StatusMinimalPerf.default | 608 | 604 | 1.01:1 |
| TextMinimalPerf.default | 301 | 298 | 1.01:1 |
| ToolbarMinimalPerf.default | 793 | 789 | 1.01:1 |
| TreeMinimalPerf.default | 691 | 682 | 1.01:1 |
| AlertMinimalPerf.default | 218 | 218 | 1:1 |
| ButtonOverridesMissPerf.default | 1015 | 1015 | 1:1 |
| CardMinimalPerf.default | 465 | 465 | 1:1 |
| CheckboxMinimalPerf.default | 1524 | 1520 | 1:1 |
| DatepickerMinimalPerf.default | 4703 | 4688 | 1:1 |
| DialogMinimalPerf.default | 692 | 691 | 1:1 |
| DividerMinimalPerf.default | 312 | 312 | 1:1 |
| DropdownMinimalPerf.default | 2172 | 2172 | 1:1 |
| GridMinimalPerf.default | 300 | 299 | 1:1 |
| ItemLayoutMinimalPerf.default | 984 | 984 | 1:1 |
| ListWith60ListItems.default | 492 | 494 | 1:1 |
| LoaderMinimalPerf.default | 514 | 512 | 1:1 |
| MenuMinimalPerf.default | 731 | 731 | 1:1 |
| PopupMinimalPerf.default | 560 | 558 | 1:1 |
| SliderMinimalPerf.default | 1238 | 1240 | 1:1 |
| SplitButtonMinimalPerf.default | 3277 | 3263 | 1:1 |
| IconMinimalPerf.default | 560 | 559 | 1:1 |
| CustomToolbarPrototype.default | 2160 | 2163 | 1:1 |
| VideoMinimalPerf.default | 619 | 620 | 1:1 |
| AttachmentSlotsPerf.default | 862 | 868 | 0.99:1 |
| ChatMinimalPerf.default | 638 | 646 | 0.99:1 |
| FlexMinimalPerf.default | 246 | 249 | 0.99:1 |
| LayoutMinimalPerf.default | 310 | 312 | 0.99:1 |
| MenuButtonMinimalPerf.default | 1356 | 1363 | 0.99:1 |
| ProviderMergeThemesPerf.default | 979 | 988 | 0.99:1 |
| TableManyItemsPerf.default | 1562 | 1584 | 0.99:1 |
| TextAreaMinimalPerf.default | 407 | 410 | 0.99:1 |
| TreeWith60ListItems.default | 125 | 126 | 0.99:1 |
| HeaderMinimalPerf.default | 315 | 320 | 0.98:1 |
| LabelMinimalPerf.default | 337 | 344 | 0.98:1 |
| ProviderMinimalPerf.default | 309 | 314 | 0.98:1 |
| PortalMinimalPerf.default | 138 | 142 | 0.97:1 |
| ChatDuplicateMessagesPerf.default | 217 | 225 | 0.96:1 |
| ListMinimalPerf.default | 441 | 463 | 0.95:1 |
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 8b00cf2040cbba55bb6e337491be6d16259ae34e:
| Sandbox | Source |
|---|---|
| @fluentui/react 8 starter | Configuration |
| @fluentui/react-components 9 starter | Configuration |
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
Asset size changes
Size Auditor did not detect a change in bundle size for any component!
Baseline commit: 9617a5a46ef4c5e310a066a5374ff2ed61db3c66 (build)
![size-auditor[bot] avatar](https://avatars.githubusercontent.com/in/13711?v=4 "Published by a pub.dev verified publisher"){kind=small}
Perf Analysis (@fluentui/react)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 1184 | 1181 | 5000 | |
| Breadcrumb | mount | 2776 | 2769 | 1000 | |
| Checkbox | mount | 2638 | 2643 | 5000 | |
| CheckboxBase | mount | 2367 | 2375 | 5000 | |
| ChoiceGroup | mount | 4255 | 4216 | 5000 | |
| ComboBox | mount | 1177 | 1174 | 1000 | |
| CommandBar | mount | 9273 | 9169 | 1000 | |
| ContextualMenu | mount | 10188 | 10188 | 1000 | |
| DefaultButton | mount | 1350 | 1359 | 5000 | |
| DetailsRow | mount | 3351 | 3356 | 5000 | |
| DetailsRowFast | mount | 3391 | 3367 | 5000 | |
| DetailsRowNoStyles | mount | 3232 | 3212 | 5000 | |
| Dialog | mount | 2976 | 2950 | 1000 | |
| DocumentCardTitle | mount | 583 | 574 | 1000 | |
| Dropdown | mount | 3144 | 3191 | 5000 | |
| FocusTrapZone | mount | 1966 | 1963 | 5000 | |
| FocusZone | mount | 1932 | 1885 | 5000 | |
| GroupedList | mount | 47702 | 53909 | 2 | |
| GroupedList | virtual-rerender | 23236 | 23003 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 82209 | 82304 | 2 | |
| GroupedListV2 | mount | 552 | 560 | 2 | |
| GroupedListV2 | virtual-rerender | 529 | 525 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 571 | 566 | 2 | |
| IconButton | mount | 1784 | 1769 | 5000 | |
| Label | mount | 752 | 752 | 5000 | |
| Layer | mount | 4113 | 4114 | 5000 | |
| Link | mount | 849 | 848 | 5000 | |
| MenuButton | mount | 1613 | 1636 | 5000 | |
| MessageBar | mount | 2313 | 2328 | 5000 | |
| Nav | mount | 3083 | 3040 | 1000 | |
| OverflowSet | mount | 1416 | 1399 | 5000 | |
| Panel | mount | 2490 | 2471 | 1000 | |
| Persona | mount | 1253 | 1242 | 1000 | |
| Pivot | mount | 1495 | 1510 | 1000 | |
| PrimaryButton | mount | 1488 | 1485 | 5000 | |
| Rating | mount | 6959 | 6956 | 5000 | |
| SearchBox | mount | 1499 | 1531 | 5000 | |
| Shimmer | mount | 2932 | 2896 | 5000 | |
| Slider | mount | 2106 | 2106 | 5000 | |
| SpinButton | mount | 4280 | 4332 | 5000 | |
| Spinner | mount | 828 | 835 | 5000 | |
| SplitButton | mount | 2814 | 2846 | 5000 | |
| Stack | mount | 891 | 903 | 5000 | |
| StackWithIntrinsicChildren | mount | 2232 | 2246 | 5000 | |
| StackWithTextChildren | mount | 4904 | 4911 | 5000 | |
| SwatchColorPicker | mount | 9543 | 9548 | 5000 | |
| TagPicker | mount | 2354 | 2290 | 5000 | |
| TeachingBubble | mount | 75815 | 75154 | 5000 | |
| Text | mount | 826 | 836 | 5000 | |
| TextField | mount | 1569 | 1578 | 5000 | |
| ThemeProvider | mount | 1442 | 1453 | 5000 | |
| ThemeProvider | virtual-rerender | 1135 | 1134 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1993 | 2009 | 5000 | |
| Toggle | mount | 1142 | 1118 | 5000 | |
| buttonNative | mount | 533 | 537 | 5000 |
We currently have no plans for repo-wide consumption of v9, though there are some packages that have started adopting said components, so it might be useful.
@dmichon-msft Would you need a separate manifest that only includes the v9 packages? If so, can you open an issue describing that need?