fluentui
fluentui copied to clipboard
Published
20 hours ago •
microsoft
microsoft
Constructible stylesheets/merge styles
Asset size changes
| Project | Bundle | Baseline Size | New Size | Difference |
|---|---|---|---|---|
| office-ui-fabric-react | fluentui-react-Icons | 65.372 kB | 66.17 kB |  798 bytes |
| office-ui-fabric-react | fluentui-react-Sticky | 31.299 kB | 32.091 kB | 792 bytes |
| office-ui-fabric-react | fluentui-react-Styling | 43.708 kB | 44.399 kB | 691 bytes |
| office-ui-fabric-react | fluentui-react-PositioningContainer | 68.335 kB | 68.962 kB | 627 bytes |
| office-ui-fabric-react | fluentui-react-Pickers | 280.499 kB | 281.11 kB | 611 bytes |
| office-ui-fabric-react | fluentui-react-ContextualMenu | 145.771 kB | 146.377 kB | 606 bytes |
| office-ui-fabric-react | fluentui-react-Button | 184.699 kB | 185.297 kB | 598 bytes |
| office-ui-fabric-react | fluentui-react-SearchBox | 177.483 kB | 178.08 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-SwatchColorPicker | 180.204 kB | 180.801 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-MessageBar | 178.787 kB | 179.384 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-Layer | 45.102 kB | 45.699 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-ChoiceGroup | 61.945 kB | 62.542 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-Stack | 40.079 kB | 40.676 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-ButtonGrid | 170.512 kB | 171.109 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-Grid | 170.512 kB | 171.109 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-TextField | 77.42 kB | 78.017 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-Breadcrumb | 190.387 kB | 190.984 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-Positioning | 20.826 kB | 21.423 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-Facepile | 200.245 kB | 200.842 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-DocumentCard | 205.208 kB | 205.805 kB | 597 bytes |
| office-ui-fabric-react | fluentui-react-KeytipLayer | 96.617 kB | 97.213 kB | 596 bytes |
| office-ui-fabric-react | fluentui-react-ColorPicker | 126.086 kB | 126.682 kB | 596 bytes |
| office-ui-fabric-react | fluentui-react-GroupedListV2 | 116.853 kB | 117.449 kB | 596 bytes |
| office-ui-fabric-react | fluentui-react-GroupedList | 129.162 kB | 129.758 kB | 596 bytes |
| office-ui-fabric-react | fluentui-react-HoverCard | 90.609 kB | 91.205 kB | 596 bytes |
| office-ui-fabric-react | fluentui-react-ShimmeredDetailsList | 232.925 kB | 233.521 kB | 596 bytes |
| office-ui-fabric-react | fluentui-react-PersonaCoin | 108.305 kB | 108.901 kB | 596 bytes |
| office-ui-fabric-react | fluentui-react-DatePicker | 175.711 kB | 176.307 kB | 596 bytes |
| office-ui-fabric-react | fluentui-react-Toggle | 43.626 kB | 44.222 kB | 596 bytes |
| office-ui-fabric-react | fluentui-react-Persona | 108.305 kB | 108.901 kB | 596 bytes |
| office-ui-fabric-react | fluentui-react-SelectedItemsList | 220.976 kB | 221.57 kB | 594 bytes |
| office-ui-fabric-react | fluentui-react-Separator | 33.04 kB | 33.634 kB | 594 bytes |
| office-ui-fabric-react | fluentui-react-Calendar | 116.606 kB | 117.2 kB | 594 bytes |
| office-ui-fabric-react | fluentui-react-CommandBar | 191.418 kB | 192.012 kB | 594 bytes |
| office-ui-fabric-react | fluentui-react-Spinner | 39.332 kB | 39.926 kB | 594 bytes |
| office-ui-fabric-react | fluentui-react-Tooltip | 80.891 kB | 81.485 kB | 594 bytes |
| office-ui-fabric-react | fluentui-react-WeeklyDayPicker | 96.968 kB | 97.562 kB | 594 bytes |
| office-ui-fabric-react | fluentui-react-Link | 37.159 kB | 37.752 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-Dialog | 199.166 kB | 199.759 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-Label | 36.002 kB | 36.595 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-Image | 43.857 kB | 44.45 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-Dropdown | 221.056 kB | 221.649 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-MarqueeSelection | 70.998 kB | 71.591 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-Pivot | 178.755 kB | 179.348 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-DraggableZone | 32.726 kB | 33.319 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-Nav | 177.821 kB | 178.414 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-Panel | 188.843 kB | 189.436 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-TeachingBubble | 194.042 kB | 194.635 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-ScrollablePane | 52.958 kB | 53.551 kB | 593 bytes |
| office-ui-fabric-react | fluentui-react-ExtendedPicker | 94.108 kB | 94.7 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-Divider | 17.49 kB | 18.082 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-FloatingPicker | 230.532 kB | 231.124 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-DetailsList | 222.435 kB | 223.027 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-TimePicker | 228.514 kB | 229.106 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-Slider | 54.142 kB | 54.734 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-Callout | 78.016 kB | 78.608 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-Selection | 40.865 kB | 41.457 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-ComboBox | 238.373 kB | 238.965 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-Keytip | 75.44 kB | 76.032 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-Coachmark | 86.775 kB | 87.367 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-Keytips | 99.354 kB | 99.946 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-PersonaPresence | 54.943 kB | 55.535 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-Overlay | 38.44 kB | 39.032 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-List | 37.684 kB | 38.276 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-OverflowSet | 30.639 kB | 31.231 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-Check | 50.107 kB | 50.699 kB | 592 bytes |
| office-ui-fabric-react | fluentui-react-Checkbox | 56.593 kB | 57.184 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-ChoiceGroupOption | 55.63 kB | 56.221 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-Announced | 36.132 kB | 36.723 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-ActivityItem | 67.85 kB | 68.441 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-Icon | 48.801 kB | 49.392 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-Utilities | 71.283 kB | 71.874 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-Shimmer | 46.672 kB | 47.263 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-Theme | 41.491 kB | 42.082 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-Fabric | 39.407 kB | 39.998 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-FocusZone | 52.873 kB | 53.464 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-Rating | 77.501 kB | 78.092 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-ProgressIndicator | 37.103 kB | 37.694 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-Modal | 88.663 kB | 89.254 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-Text | 35.631 kB | 36.222 kB | 591 bytes |
| office-ui-fabric-react | fluentui-react-SpinButton | 181.228 kB | 181.817 kB | 589 bytes |
| office-ui-fabric-react | fluentui-react-Viewport | 22.837 kB | 23.426 kB | 589 bytes |
| office-ui-fabric-react | fluentui-react-KeytipData | 13.51 kB | 14.097 kB | 587 bytes |
| office-ui-fabric-react | fluentui-react-FocusTrapZone | 15.616 kB | 16.203 kB | 587 bytes |
Over Tolerance (1024 B) Over Baseline 
Below Baseline 
New 
Removed 1 kB = 1000 B
Baseline commit: 0cc88f2318ecca9e80f119ac39ea16eff580ac32 (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 b641f711223d4aa0804cbc98dd160e65ba3ff404:
| 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}
Perf Analysis (@fluentui/react)
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| ComboBox | mount | 660 | 1174 | 1000 | Possible regression |
| DefaultButton | mount | 747 | 1819 | 5000 | Possible regression |
| IconButton | mount | 1096 | 2113 | 5000 | Possible regression |
| MenuButton | mount | 925 | 2027 | 5000 | Possible regression |
| Nav | mount | 1907 | 3870 | 1000 | Possible regression |
| Pivot | mount | 847 | 1629 | 1000 | Possible regression |
| PrimaryButton | mount | 847 | 1995 | 5000 | Possible regression |
| SpinButton | mount | 2796 | 5205 | 5000 | Possible regression |
| SplitButton | mount | 1802 | 4342 | 5000 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 609 | 618 | 5000 | |
| Breadcrumb | mount | 1643 | 1682 | 1000 | |
| Checkbox | mount | 1692 | 1726 | 5000 | |
| CheckboxBase | mount | 1480 | 1463 | 5000 | |
| ChoiceGroup | mount | 2920 | 3006 | 5000 | |
| ComboBox | mount | 660 | 1174 | 1000 | Possible regression |
| CommandBar | mount | 6488 | 11368 | 1000 | |
| ContextualMenu | mount | 16773 | 16876 | 1000 | |
| DefaultButton | mount | 747 | 1819 | 5000 | Possible regression |
| DetailsRow | mount | 2192 | 2208 | 5000 | |
| DetailsRowFast | mount | 2204 | 2250 | 5000 | |
| DetailsRowNoStyles | mount | 2034 | 2043 | 5000 | |
| Dialog | mount | 2698 | 2658 | 1000 | |
| DocumentCardTitle | mount | 232 | 233 | 1000 | |
| Dropdown | mount | 2014 | 2055 | 5000 | |
| FocusTrapZone | mount | 1151 | 1123 | 5000 | |
| FocusZone | mount | 1076 | 1059 | 5000 | |
| GroupedList | mount | 41685 | 42283 | 2 | |
| GroupedList | virtual-rerender | 19814 | 20131 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 50910 | 52716 | 2 | |
| GroupedListV2 | mount | 235 | 228 | 2 | |
| GroupedListV2 | virtual-rerender | 201 | 223 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 229 | 230 | 2 | |
| IconButton | mount | 1096 | 2113 | 5000 | Possible regression |
| Label | mount | 335 | 360 | 5000 | |
| Layer | mount | 2688 | 2759 | 5000 | |
| Link | mount | 399 | 413 | 5000 | |
| MenuButton | mount | 925 | 2027 | 5000 | Possible regression |
| MessageBar | mount | 21648 | 21384 | 5000 | |
| Nav | mount | 1907 | 3870 | 1000 | Possible regression |
| OverflowSet | mount | 764 | 790 | 5000 | |
| Panel | mount | 1783 | 2044 | 1000 | |
| Persona | mount | 755 | 765 | 1000 | |
| Pivot | mount | 847 | 1629 | 1000 | Possible regression |
| PrimaryButton | mount | 847 | 1995 | 5000 | Possible regression |
| Rating | mount | 4666 | 4759 | 5000 | |
| SearchBox | mount | 927 | 920 | 5000 | |
| Shimmer | mount | 1874 | 1902 | 5000 | |
| Slider | mount | 1296 | 1356 | 5000 | |
| SpinButton | mount | 2796 | 5205 | 5000 | Possible regression |
| Spinner | mount | 380 | 404 | 5000 | |
| SplitButton | mount | 1802 | 4342 | 5000 | Possible regression |
| Stack | mount | 403 | 411 | 5000 | |
| StackWithIntrinsicChildren | mount | 858 | 860 | 5000 | |
| StackWithTextChildren | mount | 2556 | 2609 | 5000 | |
| SwatchColorPicker | mount | 6010 | 6578 | 5000 | |
| TagPicker | mount | 1452 | 1450 | 5000 | |
| Text | mount | 373 | 378 | 5000 | |
| TextField | mount | 933 | 934 | 5000 | |
| ThemeProvider | mount | 837 | 820 | 5000 | |
| ThemeProvider | virtual-rerender | 573 | 577 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1264 | 1242 | 5000 | |
| Toggle | mount | 600 | 615 | 5000 | |
| buttonNative | mount | 189 | 180 | 5000 |
Perf Analysis (@fluentui/react-components)
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| InfoButton | mount | 9 | 14 | 5000 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 606 | 625 | 5000 | |
| Button | mount | 312 | 320 | 5000 | |
| Field | mount | 1086 | 1104 | 5000 | |
| FluentProvider | mount | 693 | 698 | 5000 | |
| FluentProviderWithTheme | mount | 73 | 83 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 66 | 64 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 71 | 79 | 10 | |
| InfoButton | mount | 9 | 14 | 5000 | Possible regression |
| MakeStyles | mount | 839 | 882 | 50000 | |
| Persona | mount | 1653 | 1688 | 5000 | |
| SpinButton | mount | 1356 | 1335 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| FlexMinimalPerf.default | 166 | 148 | 1.12:1 |
| LayoutMinimalPerf.default | 216 | 194 | 1.11:1 |
| AccordionMinimalPerf.default | 85 | 78 | 1.09:1 |
| HeaderSlotsPerf.default | 479 | 441 | 1.09:1 |
| IconMinimalPerf.default | 405 | 370 | 1.09:1 |
| CarouselMinimalPerf.default | 275 | 256 | 1.07:1 |
| ButtonMinimalPerf.default | 88 | 83 | 1.06:1 |
| DropdownManyItemsPerf.default | 409 | 387 | 1.06:1 |
| SegmentMinimalPerf.default | 205 | 193 | 1.06:1 |
| HeaderMinimalPerf.default | 206 | 197 | 1.05:1 |
| LoaderMinimalPerf.default | 196 | 186 | 1.05:1 |
| TreeMinimalPerf.default | 486 | 465 | 1.05:1 |
| GridMinimalPerf.default | 191 | 183 | 1.04:1 |
| PopupMinimalPerf.default | 356 | 341 | 1.04:1 |
| PortalMinimalPerf.default | 83 | 80 | 1.04:1 |
| RefMinimalPerf.default | 110 | 106 | 1.04:1 |
| SkeletonMinimalPerf.default | 197 | 190 | 1.04:1 |
| SplitButtonMinimalPerf.default | 2319 | 2230 | 1.04:1 |
| TableMinimalPerf.default | 234 | 226 | 1.04:1 |
| AvatarMinimalPerf.default | 107 | 104 | 1.03:1 |
| ButtonOverridesMissPerf.default | 660 | 642 | 1.03:1 |
| ChatDuplicateMessagesPerf.default | 162 | 157 | 1.03:1 |
| ChatMinimalPerf.default | 442 | 428 | 1.03:1 |
| ProviderMinimalPerf.default | 204 | 199 | 1.03:1 |
| ReactionMinimalPerf.default | 207 | 201 | 1.03:1 |
| TextMinimalPerf.default | 195 | 189 | 1.03:1 |
| AttachmentMinimalPerf.default | 82 | 80 | 1.02:1 |
| ButtonSlotsPerf.default | 327 | 322 | 1.02:1 |
| ToolbarMinimalPerf.default | 536 | 524 | 1.02:1 |
| BoxMinimalPerf.default | 190 | 188 | 1.01:1 |
| DatepickerMinimalPerf.default | 3504 | 3471 | 1.01:1 |
| ImageMinimalPerf.default | 220 | 217 | 1.01:1 |
| ListCommonPerf.default | 374 | 369 | 1.01:1 |
| ListMinimalPerf.default | 314 | 310 | 1.01:1 |
| MenuMinimalPerf.default | 499 | 493 | 1.01:1 |
| SliderMinimalPerf.default | 750 | 742 | 1.01:1 |
| TableManyItemsPerf.default | 1117 | 1109 | 1.01:1 |
| TextAreaMinimalPerf.default | 293 | 289 | 1.01:1 |
| AnimationMinimalPerf.default | 295 | 295 | 1:1 |
| DialogMinimalPerf.default | 439 | 437 | 1:1 |
| DividerMinimalPerf.default | 204 | 204 | 1:1 |
| DropdownMinimalPerf.default | 1426 | 1428 | 1:1 |
| EmbedMinimalPerf.default | 1868 | 1870 | 1:1 |
| FormMinimalPerf.default | 225 | 226 | 1:1 |
| ItemLayoutMinimalPerf.default | 703 | 704 | 1:1 |
| ListWith60ListItems.default | 362 | 363 | 1:1 |
| MenuButtonMinimalPerf.default | 953 | 952 | 1:1 |
| RosterPerf.default | 1566 | 1561 | 1:1 |
| TreeWith60ListItems.default | 84 | 84 | 1:1 |
| VideoMinimalPerf.default | 431 | 431 | 1:1 |
| CardMinimalPerf.default | 301 | 304 | 0.99:1 |
| CheckboxMinimalPerf.default | 1135 | 1144 | 0.99:1 |
| LabelMinimalPerf.default | 213 | 215 | 0.99:1 |
| ProviderMergeThemesPerf.default | 659 | 668 | 0.99:1 |
| CustomToolbarPrototype.default | 1468 | 1479 | 0.99:1 |
| AttachmentSlotsPerf.default | 641 | 657 | 0.98:1 |
| ChatWithPopoverPerf.default | 190 | 193 | 0.98:1 |
| ListNestedPerf.default | 323 | 329 | 0.98:1 |
| TooltipMinimalPerf.default | 1228 | 1261 | 0.97:1 |
| StatusMinimalPerf.default | 387 | 404 | 0.96:1 |
| RadioGroupMinimalPerf.default | 251 | 264 | 0.95:1 |
| InputMinimalPerf.default | 513 | 551 | 0.93:1 |
| AlertMinimalPerf.default | 148 | 166 | 0.89:1 |