fluentui
fluentui copied to clipboard
Published
20 hours ago •
microsoft
microsoft
Support rendering in shadow DOM for `@fluentui/react` (Fluent v8)
Previous Behavior
@fluentui/react would not correctly render styles in shadow DOM.
New Behavior
@fluentui/react supports rendering in shadow DOM.
Related Issue(s)
- Fixes #28058
Perf Analysis (@fluentui/react-components)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 641 | 631 | 5000 | |
| Button | mount | 310 | 301 | 5000 | |
| Field | mount | 1170 | 1140 | 5000 | |
| FluentProvider | mount | 731 | 700 | 5000 | |
| FluentProviderWithTheme | mount | 76 | 84 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 61 | 65 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 78 | 70 | 10 | |
| MakeStyles | mount | 852 | 856 | 50000 | |
| Persona | mount | 1766 | 1765 | 5000 | |
| SpinButton | mount | 1441 | 1398 | 5000 |
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.
![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-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| AvatarMinimalPerf.default | 119 | 104 | 1.14:1 |
| AlertMinimalPerf.default | 161 | 145 | 1.11:1 |
| PortalMinimalPerf.default | 90 | 81 | 1.11:1 |
| TreeWith60ListItems.default | 90 | 81 | 1.11:1 |
| ButtonSlotsPerf.default | 320 | 296 | 1.08:1 |
| LayoutMinimalPerf.default | 208 | 195 | 1.07:1 |
| ChatWithPopoverPerf.default | 205 | 194 | 1.06:1 |
| ListNestedPerf.default | 326 | 307 | 1.06:1 |
| ListWith60ListItems.default | 367 | 347 | 1.06:1 |
| SkeletonMinimalPerf.default | 199 | 187 | 1.06:1 |
| AttachmentMinimalPerf.default | 81 | 77 | 1.05:1 |
| DividerMinimalPerf.default | 204 | 194 | 1.05:1 |
| LoaderMinimalPerf.default | 195 | 186 | 1.05:1 |
| RadioGroupMinimalPerf.default | 270 | 256 | 1.05:1 |
| AttachmentSlotsPerf.default | 648 | 624 | 1.04:1 |
| DropdownManyItemsPerf.default | 400 | 383 | 1.04:1 |
| FlexMinimalPerf.default | 155 | 149 | 1.04:1 |
| MenuMinimalPerf.default | 511 | 491 | 1.04:1 |
| SliderMinimalPerf.default | 774 | 741 | 1.04:1 |
| ButtonMinimalPerf.default | 89 | 86 | 1.03:1 |
| PopupMinimalPerf.default | 355 | 345 | 1.03:1 |
| StatusMinimalPerf.default | 387 | 377 | 1.03:1 |
| TableMinimalPerf.default | 234 | 228 | 1.03:1 |
| ButtonOverridesMissPerf.default | 649 | 637 | 1.02:1 |
| CheckboxMinimalPerf.default | 1163 | 1142 | 1.02:1 |
| DropdownMinimalPerf.default | 1444 | 1418 | 1.02:1 |
| ImageMinimalPerf.default | 216 | 211 | 1.02:1 |
| InputMinimalPerf.default | 527 | 519 | 1.02:1 |
| RefMinimalPerf.default | 115 | 113 | 1.02:1 |
| ToolbarMinimalPerf.default | 549 | 536 | 1.02:1 |
| TooltipMinimalPerf.default | 1282 | 1251 | 1.02:1 |
| AccordionMinimalPerf.default | 92 | 91 | 1.01:1 |
| AnimationMinimalPerf.default | 299 | 297 | 1.01:1 |
| DialogMinimalPerf.default | 441 | 438 | 1.01:1 |
| MenuButtonMinimalPerf.default | 961 | 948 | 1.01:1 |
| SplitButtonMinimalPerf.default | 2281 | 2255 | 1.01:1 |
| TableManyItemsPerf.default | 1102 | 1095 | 1.01:1 |
| TextMinimalPerf.default | 198 | 197 | 1.01:1 |
| CustomToolbarPrototype.default | 1478 | 1462 | 1.01:1 |
| CardMinimalPerf.default | 314 | 313 | 1:1 |
| CarouselMinimalPerf.default | 255 | 256 | 1:1 |
| ChatMinimalPerf.default | 443 | 441 | 1:1 |
| DatepickerMinimalPerf.default | 3500 | 3507 | 1:1 |
| HeaderSlotsPerf.default | 464 | 462 | 1:1 |
| ProviderMergeThemesPerf.default | 653 | 656 | 1:1 |
| ProviderMinimalPerf.default | 202 | 201 | 1:1 |
| SegmentMinimalPerf.default | 195 | 195 | 1:1 |
| EmbedMinimalPerf.default | 1867 | 1884 | 0.99:1 |
| FormMinimalPerf.default | 221 | 224 | 0.99:1 |
| ReactionMinimalPerf.default | 212 | 214 | 0.99:1 |
| TextAreaMinimalPerf.default | 287 | 289 | 0.99:1 |
| BoxMinimalPerf.default | 192 | 196 | 0.98:1 |
| ChatDuplicateMessagesPerf.default | 147 | 150 | 0.98:1 |
| ItemLayoutMinimalPerf.default | 697 | 708 | 0.98:1 |
| LabelMinimalPerf.default | 209 | 213 | 0.98:1 |
| ListMinimalPerf.default | 301 | 307 | 0.98:1 |
| TreeMinimalPerf.default | 476 | 488 | 0.98:1 |
| GridMinimalPerf.default | 185 | 190 | 0.97:1 |
| ListCommonPerf.default | 380 | 397 | 0.96:1 |
| RosterPerf.default | 1576 | 1649 | 0.96:1 |
| VideoMinimalPerf.default | 439 | 462 | 0.95:1 |
| IconMinimalPerf.default | 367 | 393 | 0.93:1 |
| HeaderMinimalPerf.default | 193 | 218 | 0.89:1 |
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react ActivityItem |
68.833 kB22.613 kB |
77 kB24.934 kB |
8.167 kB 2.321 kB |
| react Announced |
36.473 kB12.628 kB |
44.214 kB14.779 kB |
7.741 kB 2.151 kB |
| react Breadcrumb |
196.083 kB58.757 kB |
206.043 kB61.464 kB |
9.96 kB 2.707 kB |
| react Button |
190.127 kB55.019 kB |
200.057 kB57.676 kB |
9.93 kB 2.657 kB |
| react ButtonGrid |
175.918 kB53.25 kB |
185.82 kB55.916 kB |
9.902 kB 2.666 kB |
| react Calendar |
118.756 kB36.101 kB |
127.472 kB38.501 kB |
8.716 kB 2.4 kB |
| react Callout |
80.866 kB26.564 kB |
89.783 kB29.022 kB |
8.917 kB 2.458 kB |
| react Check |
51.062 kB17.152 kB |
58.895 kB19.307 kB |
7.833 kB 2.155 kB |
| react Checkbox |
57.791 kB19.17 kB |
65.671 kB21.357 kB |
7.88 kB 2.187 kB |
| react ChoiceGroup |
63.339 kB20.824 kB |
71.139 kB23.023 kB |
7.8 kB 2.199 kB |
| react ChoiceGroupOption |
56.601 kB18.695 kB |
64.46 kB20.884 kB |
7.859 kB 2.189 kB |
| react Coachmark |
89.704 kB28.407 kB |
98.6 kB30.804 kB |
8.896 kB 2.397 kB |
| react ColorPicker |
129.984 kB40.589 kB |
138.638 kB43 kB |
8.654 kB 2.411 kB |
| react ComboBox |
245.355 kB70.51 kB |
255.601 kB73.316 kB |
10.246 kB 2.806 kB |
| react CommandBar |
197.362 kB58.46 kB |
207.284 kB61.224 kB |
9.922 kB 2.764 kB |
| react ContextualMenu |
150.967 kB46.982 kB |
160.486 kB49.562 kB |
9.519 kB 2.58 kB |
| react DatePicker |
180.318 kB54.947 kB |
189.591 kB57.587 kB |
9.273 kB 2.64 kB |
| react DetailsList |
225.886 kB64.647 kB |
234.963 kB67.114 kB |
9.077 kB 2.467 kB |
| react Dialog |
205.294 kB61.428 kB |
215.44 kB64.161 kB |
10.146 kB 2.733 kB |
| react Divider |
17.63 kB6.234 kB |
25.314 kB8.366 kB |
7.684 kB 2.132 kB |
| react DocumentCard |
211.08 kB62.793 kB |
221.117 kB65.493 kB |
10.037 kB 2.7 kB |
| react DraggableZone |
33.345 kB11.166 kB |
38.654 kB12.542 kB |
5.309 kB 1.376 kB |
| react Dropdown |
227.732 kB66.867 kB |
238.006 kB69.681 kB |
10.274 kB 2.814 kB |
| react ExtendedPicker |
94.987 kB27.297 kB |
101.12 kB28.941 kB |
6.133 kB 1.644 kB |
| react Fabric |
39.75 kB13.688 kB |
47.465 kB15.81 kB |
7.715 kB 2.122 kB |
| react Facepile |
205.992 kB61.67 kB |
215.914 kB64.366 kB |
9.922 kB 2.696 kB |
| react FloatingPicker |
236.233 kB67.368 kB |
246.139 kB70.049 kB |
9.906 kB 2.681 kB |
| react FocusTrapZone |
15.831 kB5.54 kB |
21.616 kB7.045 kB |
5.785 kB 1.505 kB |
| react FocusZone |
53.259 kB16.869 kB |
59.39 kB18.483 kB |
6.131 kB 1.614 kB |
| react Grid |
175.918 kB53.25 kB |
185.82 kB55.916 kB |
9.902 kB 2.666 kB |
| react GroupedList |
131.636 kB39.657 kB |
140.356 kB41.978 kB |
8.72 kB 2.321 kB |
| react GroupedListV2 |
119.324 kB36.822 kB |
128.044 kB39.133 kB |
8.72 kB 2.311 kB |
| react HoverCard |
93.735 kB29.778 kB |
102.629 kB32.207 kB |
8.894 kB 2.429 kB |
| react Icon |
49.74 kB16.603 kB |
57.573 kB18.755 kB |
7.833 kB 2.152 kB |
| react Icons |
65.829 kB24.212 kB |
70.867 kB25.469 kB |
5.038 kB 1.257 kB |
| react Image |
44.79 kB15.024 kB |
52.627 kB17.203 kB |
7.837 kB 2.179 kB |
| react Keytip |
78.588 kB25.825 kB |
87.2 kB28.19 kB |
8.612 kB 2.365 kB |
| react KeytipData |
13.585 kB4.418 kB |
18.579 kB5.7 kB |
4.994 kB 1.282 kB |
| react KeytipLayer |
100.422 kB31.128 kB |
108.988 kB33.466 kB |
8.566 kB 2.338 kB |
| react Keytips |
103.175 kB32.07 kB |
111.75 kB34.446 kB |
8.575 kB 2.376 kB |
| react Label |
36.347 kB12.639 kB |
44.049 kB14.779 kB |
7.702 kB 2.14 kB |
| react Layer |
45.683 kB15.585 kB |
53.709 kB17.792 kB |
8.026 kB 2.207 kB |
| react Link |
37.673 kB12.993 kB |
45.413 kB15.101 kB |
7.74 kB 2.108 kB |
| react List |
38.136 kB12.004 kB |
43.682 kB13.451 kB |
5.546 kB 1.447 kB |
| react MarqueeSelection |
72.119 kB21.676 kB |
80.176 kB23.886 kB |
8.057 kB 2.21 kB |
| react MessageBar |
184.707 kB55.523 kB |
194.609 kB58.143 kB |
9.902 kB 2.62 kB |
| react Modal |
90.409 kB29.213 kB |
99.104 kB31.625 kB |
8.695 kB 2.412 kB |
| react Nav |
183.442 kB55.093 kB |
193.431 kB57.756 kB |
9.989 kB 2.663 kB |
| react OverflowSet |
31.044 kB10.593 kB |
39.049 kB12.769 kB |
8.005 kB 2.176 kB |
| react Overlay |
38.784 kB13.401 kB |
46.622 kB15.553 kB |
7.838 kB 2.152 kB |
| react Panel |
194.946 kB58.34 kB |
205.172 kB61.112 kB |
10.226 kB 2.772 kB |
| react Persona |
111.705 kB35.58 kB |
120.271 kB37.957 kB |
8.566 kB 2.377 kB |
| react PersonaCoin |
111.705 kB35.58 kB |
120.271 kB37.957 kB |
8.566 kB 2.377 kB |
| react PersonaPresence |
55.928 kB18.715 kB |
63.761 kB20.874 kB |
7.833 kB 2.159 kB |
| react Pickers |
287.603 kB80.607 kB |
297.608 kB83.321 kB |
10.005 kB 2.714 kB |
| react Pivot |
184.252 kB55.823 kB |
194.336 kB58.458 kB |
10.084 kB 2.635 kB |
| react Popup |
12.032 kB4.114 kB |
12.242 kB4.181 kB |
210 B 67 B |
| react Positioning |
21.821 kB7.334 kB |
27.166 kB8.718 kB |
5.345 kB 1.384 kB |
| react PositioningContainer |
70.754 kB22.84 kB |
79.346 kB25.251 kB |
8.592 kB 2.411 kB |
| react ProgressIndicator |
37.498 kB12.906 kB |
45.214 kB15.005 kB |
7.716 kB 2.099 kB |
| react Rating |
78.989 kB25.18 kB |
87.667 kB27.555 kB |
8.678 kB 2.375 kB |
| react ScrollablePane |
53.538 kB17.113 kB |
61.178 kB19.338 kB |
7.64 kB 2.225 kB |
| react SearchBox |
182.982 kB55.1 kB |
192.884 kB57.722 kB |
9.902 kB 2.622 kB |
| react SelectedItemsList |
226.659 kB66.321 kB |
236.614 kB68.983 kB |
9.955 kB 2.662 kB |
| react Selection |
41.202 kB11.839 kB |
46.807 kB13.295 kB |
5.605 kB 1.456 kB |
| react Separator |
33.397 kB11.529 kB |
41.097 kB13.648 kB |
7.7 kB 2.119 kB |
| react Shimmer |
47.265 kB15.632 kB |
54.978 kB17.78 kB |
7.713 kB 2.148 kB |
| react ShimmeredDetailsList |
236.654 kB67.42 kB |
245.734 kB69.809 kB |
9.08 kB 2.389 kB |
| react Slider |
55.575 kB18.574 kB |
63.24 kB20.668 kB |
7.665 kB 2.094 kB |
| react SpinButton |
186.661 kB56.205 kB |
196.642 kB58.881 kB |
9.981 kB 2.676 kB |
| react Spinner |
39.691 kB13.815 kB |
47.406 kB15.945 kB |
7.715 kB 2.13 kB |
| react Stack |
40.761 kB13.931 kB |
46.093 kB15.331 kB |
5.332 kB 1.4 kB |
| react Sticky |
32.064 kB10.324 kB |
37.086 kB11.603 kB |
5.022 kB 1.279 kB |
| react Styling |
44.812 kB14.688 kB |
50.41 kB16.17 kB |
5.598 kB 1.482 kB |
| react SwatchColorPicker |
186.166 kB56.724 kB |
196.147 kB59.404 kB |
9.981 kB 2.68 kB |
| react TeachingBubble |
200.004 kB59.345 kB |
210.185 kB62.123 kB |
10.181 kB 2.778 kB |
| react Text |
35.931 kB12.486 kB |
41.267 kB13.915 kB |
5.336 kB 1.429 kB |
| react TextField |
78.587 kB24.642 kB |
86.485 kB26.83 kB |
7.898 kB 2.188 kB |
| react Theme |
42.456 kB13.773 kB |
47.882 kB15.221 kB |
5.426 kB 1.448 kB |
| react TimePicker |
235.197 kB68.29 kB |
245.443 kB71.054 kB |
10.246 kB 2.764 kB |
| react Toggle |
44.17 kB15.346 kB |
51.936 kB17.454 kB |
7.766 kB 2.108 kB |
| react Tooltip |
84.225 kB27.277 kB |
92.796 kB29.576 kB |
8.571 kB 2.299 kB |
| react Utilities |
71.851 kB21.843 kB |
82.232 kB24.831 kB |
10.381 kB 2.988 kB |
| react Viewport |
22.945 kB7.292 kB |
28.247 kB8.665 kB |
5.302 kB 1.373 kB |
| react WeeklyDayPicker |
98.762 kB30.828 kB |
107.567 kB33.347 kB |
8.805 kB 2.519 kB |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| react Autofill |
15.365 kB4.743 kB |
| react Color |
7.737 kB3.106 kB |
| react DateTimeUtilities |
5.244 kB1.849 kB |
| react DragDrop |
8.343 kB2.724 kB |
| react ResizeGroup |
13.286 kB4.365 kB |
| react ResponsiveMode |
8.078 kB2.95 kB |
| react SelectableOption |
724 B413 B |
| react ThemeGenerator |
12.34 kB4.106 kB |
| react WindowProvider |
1.059 kB541 B |
| react-northstar Accordion |
85.357 kB26.509 kB |
| react-northstar Alert |
87.425 kB26.91 kB |
| react-northstar Animation |
55.304 kB17.834 kB |
| react-northstar Attachment |
86.819 kB26.7 kB |
| react-northstar Avatar |
80.254 kB24.634 kB |
| react-northstar Box |
75.223 kB23.814 kB |
| react-northstar Breadcrumb |
79.889 kB24.707 kB |
| react-northstar Button |
83.135 kB25.957 kB |
| react-northstar Card |
82.674 kB25.027 kB |
| react-northstar Carousel |
105.15 kB31.882 kB |
| react-northstar Chat |
152.326 kB45.963 kB |
| react-northstar Checkbox |
79.782 kB25.085 kB |
| react-northstar Datepicker |
184.887 kB56.167 kB |
| react-northstar Debug |
8.801 kB3.594 kB |
| react-northstar Design |
36.564 kB12.07 kB |
| react-northstar Dialog |
112.02 kB33.638 kB |
| react-northstar Divider |
76.594 kB24.137 kB |
| react-northstar Dropdown |
196.43 kB59.442 kB |
| react-northstar Embed |
81.446 kB25.42 kB |
| react-northstar Flex |
47.702 kB15.45 kB |
| react-northstar Form |
92.492 kB28.881 kB |
| react-northstar Grid |
70.555 kB22.283 kB |
| react-northstar Header |
74.731 kB23.476 kB |
| react-northstar Image |
73.566 kB23.339 kB |
| react-northstar Input |
88.31 kB27.784 kB |
| react-northstar ItemLayout |
78.206 kB24.458 kB |
| react-northstar Label |
77.895 kB24.415 kB |
| react-northstar Layout |
75.368 kB23.806 kB |
| react-northstar List |
88.472 kB27.57 kB |
| react-northstar Loader |
78.591 kB24.745 kB |
| react-northstar Menu |
126.85 kB39.875 kB |
| react-northstar MenuButton |
161.254 kB48.881 kB |
| react-northstar Pill |
83.697 kB26.077 kB |
| react-northstar Popup |
133.56 kB41.486 kB |
| react-northstar Portal |
58.294 kB18.855 kB |
| react-northstar Provider |
93.114 kB29.626 kB |
| react-northstar RadioGroup |
83.25 kB26.056 kB |
| react-northstar Reaction |
77.255 kB24.138 kB |
| react-northstar Segment |
76.184 kB23.899 kB |
| react-northstar Skeleton |
77.74 kB24.21 kB |
| react-northstar Slider |
84.235 kB26.744 kB |
| react-northstar SplitButton |
176.487 kB52.632 kB |
| react-northstar Status |
76.247 kB24.059 kB |
| react-northstar SvgIcon |
36.819 kB11.744 kB |
| react-northstar Table |
80.765 kB25.159 kB |
| react-northstar Text |
74.089 kB23.522 kB |
| react-northstar TextArea |
74.223 kB23.501 kB |
| react-northstar Toolbar |
173.3 kB52.087 kB |
| react-northstar Tooltip |
108.23 kB34.491 kB |
| react-northstar Tree |
87.83 kB27.223 kB |
| react-northstar Video |
75.379 kB23.794 kB |
Asset size changes
| Project | Bundle | Baseline Size | New Size | Difference |
|---|---|---|---|---|
| office-ui-fabric-react | fluentui-react-Utilities | 71.577 kB | 81.634 kB |  10.057 kB |
| office-ui-fabric-react | fluentui-react-ComboBox | 244.457 kB | 254.34 kB | 9.883 kB |
| office-ui-fabric-react | fluentui-react-TimePicker | 234.654 kB | 244.537 kB | 9.883 kB |
| office-ui-fabric-react | fluentui-react-Pivot | 183.948 kB | 193.65 kB | 9.702 kB |
| office-ui-fabric-react | fluentui-react-DocumentCard | 210.578 kB | 220.222 kB | 9.644 kB |
| office-ui-fabric-react | fluentui-react-Pickers | 286.836 kB | 296.466 kB | 9.63 kB |
| office-ui-fabric-react | fluentui-react-Nav | 182.944 kB | 192.554 kB | 9.61 kB |
| office-ui-fabric-react | fluentui-react-SwatchColorPicker | 185.583 kB | 195.184 kB | 9.601 kB |
| office-ui-fabric-react | fluentui-react-SpinButton | 186.357 kB | 195.957 kB | 9.6 kB |
| office-ui-fabric-react | fluentui-react-SelectedItemsList | 226.132 kB | 235.724 kB | 9.592 kB |
| office-ui-fabric-react | fluentui-react-Dropdown | 226.786 kB | 236.37 kB | 9.584 kB |
| office-ui-fabric-react | fluentui-react-Breadcrumb | 195.576 kB | 205.155 kB | 9.579 kB |
| office-ui-fabric-react | fluentui-react-CommandBar | 196.674 kB | 206.227 kB | 9.553 kB |
| office-ui-fabric-react | fluentui-react-Button | 189.869 kB | 199.415 kB | 9.546 kB |
| office-ui-fabric-react | fluentui-react-Facepile | 205.488 kB | 215.031 kB | 9.543 kB |
| office-ui-fabric-react | fluentui-react-FloatingPicker | 235.726 kB | 245.265 kB | 9.539 kB |
| office-ui-fabric-react | fluentui-react-Panel | 194.052 kB | 203.583 kB | 9.531 kB |
| office-ui-fabric-react | fluentui-react-ButtonGrid | 175.614 kB | 185.137 kB | 9.523 kB |
| office-ui-fabric-react | fluentui-react-Grid | 175.614 kB | 185.137 kB | 9.523 kB |
| office-ui-fabric-react | fluentui-react-MessageBar | 184.303 kB | 193.826 kB | 9.523 kB |
| office-ui-fabric-react | fluentui-react-SearchBox | 182.678 kB | 192.201 kB | 9.523 kB |
| office-ui-fabric-react | fluentui-react-TeachingBubble | 199.639 kB | 209.118 kB | 9.479 kB |
| office-ui-fabric-react | fluentui-react-Dialog | 204.54 kB | 213.996 kB | 9.456 kB |
| office-ui-fabric-react | fluentui-react-ContextualMenu | 150.663 kB | 159.764 kB | 9.101 kB |
| office-ui-fabric-react | fluentui-react-DetailsList | 225.019 kB | 233.801 kB | 8.782 kB |
| office-ui-fabric-react | fluentui-react-ShimmeredDetailsList | 235.771 kB | 244.551 kB | 8.78 kB |
| office-ui-fabric-react | fluentui-react-ColorPicker | 129.297 kB | 137.995 kB | 8.698 kB |
| office-ui-fabric-react | fluentui-react-PositioningContainer | 70.292 kB | 78.95 kB | 8.658 kB |
| office-ui-fabric-react | fluentui-react-Keytip | 78.268 kB | 86.923 kB | 8.655 kB |
| office-ui-fabric-react | fluentui-react-Keytips | 102.46 kB | 111.085 kB | 8.625 kB |
| office-ui-fabric-react | fluentui-react-Tooltip | 83.732 kB | 92.346 kB | 8.614 kB |
| office-ui-fabric-react | fluentui-react-Persona | 111.212 kB | 119.821 kB | 8.609 kB |
| office-ui-fabric-react | fluentui-react-KeytipLayer | 99.704 kB | 108.313 kB | 8.609 kB |
| office-ui-fabric-react | fluentui-react-PersonaCoin | 111.212 kB | 119.821 kB | 8.609 kB |
| office-ui-fabric-react | fluentui-react-ActivityItem | 68.833 kB | 77.422 kB | 8.589 kB |
| office-ui-fabric-react | fluentui-react-DatePicker | 179.793 kB | 188.378 kB | 8.585 kB |
| office-ui-fabric-react | fluentui-react-Coachmark | 89.099 kB | 97.651 kB | 8.552 kB |
| office-ui-fabric-react | fluentui-react-Callout | 80.537 kB | 89.086 kB | 8.549 kB |
| office-ui-fabric-react | fluentui-react-HoverCard | 93.45 kB | 101.977 kB | 8.527 kB |
| office-ui-fabric-react | fluentui-react-Layer | 45.683 kB | 54.18 kB | 8.497 kB |
| office-ui-fabric-react | fluentui-react-WeeklyDayPicker | 98.664 kB | 107.097 kB | 8.433 kB |
| office-ui-fabric-react | fluentui-react-GroupedListV2 | 118.849 kB | 127.268 kB | 8.419 kB |
| office-ui-fabric-react | fluentui-react-GroupedList | 131.161 kB | 139.58 kB | 8.419 kB |
| office-ui-fabric-react | fluentui-react-Calendar | 118.659 kB | 127.007 kB | 8.348 kB |
| office-ui-fabric-react | fluentui-react-Modal | 89.92 kB | 98.254 kB | 8.334 kB |
| office-ui-fabric-react | fluentui-react-TextField | 78.587 kB | 86.905 kB | 8.318 kB |
| office-ui-fabric-react | fluentui-react-Rating | 78.892 kB | 87.201 kB | 8.309 kB |
| office-ui-fabric-react | fluentui-react-Checkbox | 57.791 kB | 66.09 kB | 8.299 kB |
| office-ui-fabric-react | fluentui-react-ChoiceGroup | 63.054 kB | 71.342 kB | 8.288 kB |
| office-ui-fabric-react | fluentui-react-ChoiceGroupOption | 56.601 kB | 64.879 kB | 8.278 kB |
| office-ui-fabric-react | fluentui-react-MarqueeSelection | 71.512 kB | 79.769 kB | 8.257 kB |
| office-ui-fabric-react | fluentui-react-Image | 44.79 kB | 53.047 kB | 8.257 kB |
| office-ui-fabric-react | fluentui-react-Overlay | 38.784 kB | 47.039 kB | 8.255 kB |
| office-ui-fabric-react | fluentui-react-Icon | 49.74 kB | 57.992 kB | 8.252 kB |
| office-ui-fabric-react | fluentui-react-PersonaPresence | 55.928 kB | 64.178 kB | 8.25 kB |
| office-ui-fabric-react | fluentui-react-Check | 51.062 kB | 59.312 kB | 8.25 kB |
| office-ui-fabric-react | fluentui-react-Toggle | 44.17 kB | 52.406 kB | 8.236 kB |
| office-ui-fabric-react | fluentui-react-Slider | 55.4 kB | 63.627 kB | 8.227 kB |
| office-ui-fabric-react | fluentui-react-Announced | 36.473 kB | 44.685 kB | 8.212 kB |
| office-ui-fabric-react | fluentui-react-Link | 37.673 kB | 45.883 kB | 8.21 kB |
| office-ui-fabric-react | fluentui-react-Spinner | 39.691 kB | 47.876 kB | 8.185 kB |
| office-ui-fabric-react | fluentui-react-ProgressIndicator | 37.498 kB | 45.682 kB | 8.184 kB |
| office-ui-fabric-react | fluentui-react-Shimmer | 47.265 kB | 55.449 kB | 8.184 kB |
| office-ui-fabric-react | fluentui-react-Fabric | 39.75 kB | 47.933 kB | 8.183 kB |
| office-ui-fabric-react | fluentui-react-OverflowSet | 30.791 kB | 38.973 kB | 8.182 kB |
| office-ui-fabric-react | fluentui-react-ScrollablePane | 53.331 kB | 61.512 kB | 8.181 kB |
| office-ui-fabric-react | fluentui-react-Label | 36.347 kB | 44.521 kB | 8.174 kB |
| office-ui-fabric-react | fluentui-react-Separator | 33.397 kB | 41.569 kB | 8.172 kB |
| office-ui-fabric-react | fluentui-react-Divider | 17.63 kB | 25.801 kB | 8.171 kB |
| office-ui-fabric-react | fluentui-react-Styling | 44.812 kB | 50.758 kB | 5.946 kB |
| office-ui-fabric-react | fluentui-react-Theme | 42.456 kB | 48.277 kB | 5.821 kB |
| office-ui-fabric-react | fluentui-react-Positioning | 21.658 kB | 27.363 kB | 5.705 kB |
| office-ui-fabric-react | fluentui-react-Stack | 40.761 kB | 46.456 kB | 5.695 kB |
| office-ui-fabric-react | fluentui-react-Text | 35.931 kB | 41.626 kB | 5.695 kB |
| office-ui-fabric-react | fluentui-react-Selection | 41.107 kB | 46.789 kB | 5.682 kB |
| office-ui-fabric-react | fluentui-react-ExtendedPicker | 94.788 kB | 100.47 kB | 5.682 kB |
| office-ui-fabric-react | fluentui-react-List | 37.758 kB | 43.437 kB | 5.679 kB |
| office-ui-fabric-react | fluentui-react-FocusZone | 53.163 kB | 58.839 kB | 5.676 kB |
| office-ui-fabric-react | fluentui-react-DraggableZone | 33.04 kB | 38.705 kB | 5.665 kB |
| office-ui-fabric-react | fluentui-react-Viewport | 22.933 kB | 28.589 kB | 5.656 kB |
| office-ui-fabric-react | fluentui-react-Icons | 65.829 kB | 71.283 kB | 5.454 kB |
| office-ui-fabric-react | fluentui-react-Sticky | 31.867 kB | 37.305 kB | 5.438 kB |
| office-ui-fabric-react | fluentui-react-FocusTrapZone | 15.643 kB | 21.079 kB | 5.436 kB |
| office-ui-fabric-react | fluentui-react-KeytipData | 13.522 kB | 18.94 kB | 5.418 kB |
Over Tolerance (1024 B) 
Over Baseline 
Below Baseline 
New 
Removed 1 kB = 1000 B
Baseline commit: 6f45409d63255b63f5a39d8b413b7beca6d6fe45 (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 | 611 | 623 | 5000 | |
| Breadcrumb | mount | 1662 | 1677 | 1000 | |
| Checkbox | mount | 1651 | 1761 | 5000 | |
| CheckboxBase | mount | 1486 | 1507 | 5000 | |
| ChoiceGroup | mount | 2923 | 3120 | 5000 | |
| ComboBox | mount | 649 | 682 | 1000 | |
| CommandBar | mount | 6147 | 6730 | 1000 | |
| ContextualMenu | mount | 13148 | 13016 | 1000 | |
| DefaultButton | mount | 720 | 827 | 5000 | |
| DetailsRow | mount | 2173 | 2335 | 5000 | |
| DetailsRowFast | mount | 2209 | 2306 | 5000 | |
| DetailsRowNoStyles | mount | 2012 | 2057 | 5000 | |
| Dialog | mount | 2652 | 2853 | 1000 | |
| DocumentCardTitle | mount | 234 | 233 | 1000 | |
| Dropdown | mount | 1940 | 2062 | 5000 | |
| FocusTrapZone | mount | 1144 | 1132 | 5000 | |
| FocusZone | mount | 1047 | 1091 | 5000 | |
| GroupedList | mount | 47420 | 47877 | 2 | |
| GroupedList | virtual-rerender | 19934 | 20557 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 50331 | 51652 | 2 | |
| GroupedListV2 | mount | 233 | 220 | 2 | |
| GroupedListV2 | virtual-rerender | 213 | 214 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 213 | 235 | 2 | |
| IconButton | mount | 1072 | 1149 | 5000 | |
| Label | mount | 333 | 361 | 5000 | |
| Layer | mount | 2721 | 2888 | 5000 | |
| Link | mount | 391 | 409 | 5000 | |
| MenuButton | mount | 917 | 1004 | 5000 | |
| MessageBar | mount | 21545 | 21567 | 5000 | |
| Nav | mount | 1909 | 2049 | 1000 | |
| OverflowSet | mount | 778 | 813 | 5000 | |
| Panel | mount | 1759 | 1824 | 1000 | |
| Persona | mount | 722 | 797 | 1000 | |
| Pivot | mount | 841 | 913 | 1000 | |
| PrimaryButton | mount | 836 | 968 | 5000 | |
| Rating | mount | 4588 | 4845 | 5000 | |
| SearchBox | mount | 926 | 972 | 5000 | |
| Shimmer | mount | 1861 | 2015 | 5000 | |
| Slider | mount | 1274 | 1429 | 5000 | |
| SpinButton | mount | 2826 | 3176 | 5000 | |
| Spinner | mount | 397 | 421 | 5000 | |
| SplitButton | mount | 1833 | 1866 | 5000 | |
| Stack | mount | 413 | 422 | 5000 | |
| StackWithIntrinsicChildren | mount | 851 | 854 | 5000 | |
| StackWithTextChildren | mount | 2576 | 2579 | 5000 | |
| SwatchColorPicker | mount | 6068 | 6449 | 5000 | |
| TagPicker | mount | 1443 | 1474 | 5000 | |
| Text | mount | 376 | 377 | 5000 | |
| TextField | mount | 925 | 992 | 5000 | |
| ThemeProvider | mount | 839 | 822 | 5000 | |
| ThemeProvider | virtual-rerender | 576 | 581 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1273 | 1273 | 5000 | |
| Toggle | mount | 613 | 628 | 5000 | |
| buttonNative | mount | 184 | 194 | 5000 |
![azure-pipelines[bot] avatar](https://avatars.githubusercontent.com/in/9426?v=4 "Published by a pub.dev verified publisher"){kind=small}