fluentui
fluentui copied to clipboard
Published
20 hours ago •
microsoft
microsoft
List - initial implementation and preview
📊 Bundle size report
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| global-context createContext |
510 B328 B |
| global-context createContextSelector |
537 B339 B |
| react-accordion Accordion (including children components) |
100.125 kB30.423 kB |
| react-alert Alert |
83.737 kB23.475 kB |
| react-avatar Avatar |
50.175 kB15.944 kB |
| react-avatar AvatarGroup |
19.702 kB7.794 kB |
| react-avatar AvatarGroupItem |
64.829 kB20.272 kB |
| react-badge Badge |
26.905 kB8.73 kB |
| react-badge CounterBadge |
27.806 kB9.025 kB |
| react-badge PresenceBadge |
25.311 kB9.307 kB |
| react-breadcrumb @fluentui/react-breadcrumb - package |
115.48 kB31.843 kB |
| react-button Button |
39.513 kB11.17 kB |
| react-button CompoundButton |
46.874 kB12.662 kB |
| react-button MenuButton |
44.292 kB12.544 kB |
| react-button SplitButton |
52.306 kB14.135 kB |
| react-button ToggleButton |
56.558 kB13.068 kB |
| react-calendar-compat Calendar Compat |
152.073 kB39.83 kB |
| react-card Card - All |
101.557 kB28.932 kB |
| react-card Card |
96.382 kB27.401 kB |
| react-card CardFooter |
13.064 kB5.386 kB |
| react-card CardHeader |
15.307 kB6.144 kB |
| react-card CardPreview |
14.015 kB5.752 kB |
| react-checkbox Checkbox |
35.656 kB12.07 kB |
| react-combobox Combobox (including child components) |
102.735 kB33.197 kB |
| react-combobox Dropdown (including child components) |
104.06 kB33.101 kB |
| react-components react-components: Button, FluentProvider & webLightTheme |
71.098 kB20.515 kB |
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
220.047 kB62.171 kB |
| react-components react-components: FluentProvider & webLightTheme |
43.585 kB14.352 kB |
| react-datepicker-compat DatePicker Compat |
225.754 kB63.183 kB |
| react-dialog Dialog (including children components) |
100.928 kB29.921 kB |
| react-divider Divider |
20.922 kB7.791 kB |
| react-field Field |
22.976 kB8.722 kB |
| react-image Image |
15.745 kB6.231 kB |
| react-infobutton InfoButton |
138.694 kB43.395 kB |
| react-infobutton InfoLabel |
142.495 kB44.625 kB |
| react-input Input |
28.122 kB9.36 kB |
| react-jsx-runtime Classic Pragma |
1.057 kB530 B |
| react-jsx-runtime JSX Dev Runtime |
3.781 kB1.646 kB |
| react-jsx-runtime JSX Runtime |
4.377 kB1.881 kB |
| react-label Label |
14.266 kB5.829 kB |
| react-link Link |
17.082 kB6.911 kB |
| react-menu Menu (including children components) |
152.268 kB45.708 kB |
| react-menu Menu (including selectable components) |
154.954 kB46.274 kB |
| react-message-bar MessageBar (all components) |
25.566 kB9.13 kB |
| react-overflow hooks only |
12.86 kB4.825 kB |
| react-persona Persona |
57.066 kB17.821 kB |
| react-popover Popover |
126.884 kB39.803 kB |
| react-portal Portal |
13.633 kB4.869 kB |
| react-portal-compat PortalCompatProvider |
7.944 kB2.588 kB |
| react-positioning usePositioning |
26.398 kB9.539 kB |
| react-progress ProgressBar |
17.428 kB6.899 kB |
| react-provider FluentProvider |
23.759 kB8.657 kB |
| react-radio Radio |
32.95 kB10.252 kB |
| react-radio RadioGroup |
15.354 kB6.265 kB |
| react-select Select |
28.609 kB10.204 kB |
| react-slider Slider |
39.949 kB12.968 kB |
| react-spinbutton SpinButton |
36.774 kB11.789 kB |
| react-spinner Spinner |
24.696 kB8.342 kB |
| react-switch Switch |
35.14 kB11.199 kB |
| react-table DataGrid |
165.441 kB45.976 kB |
| react-table Table (Primitives only) |
45.324 kB14.116 kB |
| react-table Table as DataGrid |
136.573 kB36.817 kB |
| react-table Table (Selection only) |
76.334 kB20.553 kB |
| react-table Table (Sort only) |
74.977 kB20.155 kB |
| react-tags InteractionTag |
15.284 kB6.07 kB |
| react-tags Tag |
30.029 kB9.461 kB |
| react-tags TagGroup |
80.68 kB24.073 kB |
| react-text Text - Default |
16.705 kB6.57 kB |
| react-text Text - Wrappers |
19.878 kB6.897 kB |
| react-textarea Textarea |
30.947 kB10.477 kB |
| react-timepicker-compat TimePicker |
104.756 kB34.581 kB |
| react-toast Toast (including Toaster) |
100.198 kB29.761 kB |
| react-tooltip Tooltip |
54.58 kB19.188 kB |
| react-utilities SSRProvider |
180 B160 B |
Perf Analysis (@fluentui/react-components)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 646 | 602 | 5000 | |
| Button | mount | 294 | 305 | 5000 | |
| Field | mount | 1124 | 1136 | 5000 | |
| FluentProvider | mount | 698 | 711 | 5000 | |
| FluentProviderWithTheme | mount | 86 | 86 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 69 | 62 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 71 | 87 | 10 | |
| MakeStyles | mount | 864 | 845 | 50000 | |
| Persona | mount | 1753 | 1698 | 5000 | |
| SpinButton | mount | 1355 | 1381 | 5000 |
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 |
|---|---|---|---|---|
| AttachmentMinimalPerf.default | 93 | 77 | 1.21:1 | analysis |
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| TreeWith60ListItems.default | 96 | 81 | 1.19:1 |
| HeaderMinimalPerf.default | 221 | 197 | 1.12:1 |
| ButtonMinimalPerf.default | 101 | 92 | 1.1:1 |
| LoaderMinimalPerf.default | 209 | 191 | 1.09:1 |
| CarouselMinimalPerf.default | 268 | 249 | 1.08:1 |
| LayoutMinimalPerf.default | 210 | 195 | 1.08:1 |
| ListNestedPerf.default | 347 | 321 | 1.08:1 |
| SegmentMinimalPerf.default | 206 | 191 | 1.08:1 |
| ButtonSlotsPerf.default | 320 | 300 | 1.07:1 |
| RadioGroupMinimalPerf.default | 265 | 247 | 1.07:1 |
| BoxMinimalPerf.default | 200 | 188 | 1.06:1 |
| FlexMinimalPerf.default | 165 | 156 | 1.06:1 |
| VideoMinimalPerf.default | 450 | 424 | 1.06:1 |
| CardMinimalPerf.default | 318 | 304 | 1.05:1 |
| PortalMinimalPerf.default | 87 | 83 | 1.05:1 |
| RefMinimalPerf.default | 114 | 109 | 1.05:1 |
| StatusMinimalPerf.default | 412 | 392 | 1.05:1 |
| SplitButtonMinimalPerf.default | 2306 | 2223 | 1.04:1 |
| TableMinimalPerf.default | 233 | 223 | 1.04:1 |
| ChatWithPopoverPerf.default | 199 | 193 | 1.03:1 |
| DropdownManyItemsPerf.default | 390 | 380 | 1.03:1 |
| MenuButtonMinimalPerf.default | 988 | 956 | 1.03:1 |
| ToolbarMinimalPerf.default | 548 | 534 | 1.03:1 |
| CheckboxMinimalPerf.default | 1157 | 1133 | 1.02:1 |
| DropdownMinimalPerf.default | 1470 | 1435 | 1.02:1 |
| FormMinimalPerf.default | 224 | 220 | 1.02:1 |
| ProviderMinimalPerf.default | 197 | 194 | 1.02:1 |
| ReactionMinimalPerf.default | 210 | 205 | 1.02:1 |
| TextAreaMinimalPerf.default | 286 | 280 | 1.02:1 |
| AnimationMinimalPerf.default | 297 | 293 | 1.01:1 |
| AttachmentSlotsPerf.default | 643 | 638 | 1.01:1 |
| DividerMinimalPerf.default | 198 | 197 | 1.01:1 |
| HeaderSlotsPerf.default | 452 | 447 | 1.01:1 |
| ImageMinimalPerf.default | 228 | 225 | 1.01:1 |
| ItemLayoutMinimalPerf.default | 703 | 694 | 1.01:1 |
| ListMinimalPerf.default | 314 | 310 | 1.01:1 |
| ListWith60ListItems.default | 369 | 366 | 1.01:1 |
| TooltipMinimalPerf.default | 1267 | 1256 | 1.01:1 |
| TreeMinimalPerf.default | 490 | 483 | 1.01:1 |
| AccordionMinimalPerf.default | 80 | 80 | 1:1 |
| AlertMinimalPerf.default | 160 | 160 | 1:1 |
| DatepickerMinimalPerf.default | 3538 | 3546 | 1:1 |
| EmbedMinimalPerf.default | 1890 | 1885 | 1:1 |
| InputMinimalPerf.default | 538 | 536 | 1:1 |
| LabelMinimalPerf.default | 221 | 222 | 1:1 |
| TableManyItemsPerf.default | 1095 | 1097 | 1:1 |
| CustomToolbarPrototype.default | 1462 | 1468 | 1:1 |
| ButtonOverridesMissPerf.default | 645 | 649 | 0.99:1 |
| ChatMinimalPerf.default | 433 | 438 | 0.99:1 |
| GridMinimalPerf.default | 187 | 188 | 0.99:1 |
| PopupMinimalPerf.default | 347 | 349 | 0.99:1 |
| SkeletonMinimalPerf.default | 201 | 203 | 0.99:1 |
| TextMinimalPerf.default | 194 | 195 | 0.99:1 |
| MenuMinimalPerf.default | 498 | 507 | 0.98:1 |
| RosterPerf.default | 1546 | 1570 | 0.98:1 |
| DialogMinimalPerf.default | 433 | 448 | 0.97:1 |
| SliderMinimalPerf.default | 723 | 746 | 0.97:1 |
| IconMinimalPerf.default | 366 | 376 | 0.97:1 |
| ListCommonPerf.default | 381 | 397 | 0.96:1 |
| ProviderMergeThemesPerf.default | 646 | 670 | 0.96:1 |
| AvatarMinimalPerf.default | 99 | 105 | 0.94:1 |
| ChatDuplicateMessagesPerf.default | 139 | 150 | 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 | 627 | 630 | 5000 | |
| Breadcrumb | mount | 1715 | 1715 | 1000 | |
| Checkbox | mount | 1668 | 1701 | 5000 | |
| CheckboxBase | mount | 1463 | 1477 | 5000 | |
| ChoiceGroup | mount | 2992 | 2949 | 5000 | |
| ComboBox | mount | 659 | 661 | 1000 | |
| CommandBar | mount | 6335 | 6362 | 1000 | |
| ContextualMenu | mount | 14409 | 14189 | 1000 | |
| DefaultButton | mount | 751 | 786 | 5000 | |
| DetailsRow | mount | 2221 | 2157 | 5000 | |
| DetailsRowFast | mount | 2221 | 2219 | 5000 | |
| DetailsRowNoStyles | mount | 2065 | 2019 | 5000 | |
| Dialog | mount | 2800 | 2778 | 1000 | |
| DocumentCardTitle | mount | 237 | 227 | 1000 | |
| Dropdown | mount | 1976 | 1971 | 5000 | |
| FocusTrapZone | mount | 1167 | 1153 | 5000 | |
| FocusZone | mount | 1099 | 1073 | 5000 | |
| GroupedList | mount | 41988 | 42314 | 2 | |
| GroupedList | virtual-rerender | 20164 | 20266 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 51124 | 51045 | 2 | |
| GroupedListV2 | mount | 240 | 228 | 2 | |
| GroupedListV2 | virtual-rerender | 229 | 207 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 220 | 231 | 2 | |
| IconButton | mount | 1087 | 1086 | 5000 | |
| Label | mount | 322 | 332 | 5000 | |
| Layer | mount | 2696 | 2731 | 5000 | |
| Link | mount | 376 | 390 | 5000 | |
| MenuButton | mount | 972 | 936 | 5000 | |
| MessageBar | mount | 21552 | 21421 | 5000 | |
| Nav | mount | 1970 | 1934 | 1000 | |
| OverflowSet | mount | 789 | 786 | 5000 | |
| Panel | mount | 1781 | 1756 | 1000 | |
| Persona | mount | 748 | 724 | 1000 | |
| Pivot | mount | 877 | 865 | 1000 | |
| PrimaryButton | mount | 843 | 853 | 5000 | |
| Rating | mount | 4636 | 4612 | 5000 | |
| SearchBox | mount | 943 | 888 | 5000 | |
| Shimmer | mount | 1845 | 1891 | 5000 | |
| Slider | mount | 1330 | 1340 | 5000 | |
| SpinButton | mount | 2877 | 2902 | 5000 | |
| Spinner | mount | 378 | 399 | 5000 | |
| SplitButton | mount | 1823 | 1831 | 5000 | |
| Stack | mount | 402 | 407 | 5000 | |
| StackWithIntrinsicChildren | mount | 849 | 838 | 5000 | |
| StackWithTextChildren | mount | 2581 | 2559 | 5000 | |
| SwatchColorPicker | mount | 6222 | 6148 | 5000 | |
| TagPicker | mount | 1420 | 1465 | 5000 | |
| Text | mount | 374 | 391 | 5000 | |
| TextField | mount | 945 | 927 | 5000 | |
| ThemeProvider | mount | 826 | 839 | 5000 | |
| ThemeProvider | virtual-rerender | 590 | 579 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1295 | 1277 | 5000 | |
| Toggle | mount | 622 | 625 | 5000 | |
| buttonNative | mount | 188 | 197 | 5000 |
Can you please create a separate PR that adds boilterplate only (i.e. package generation)?
@layershifter yup, here it is: https://github.com/microsoft/fluentui/pull/29771
Please also remove packages/react-components/react-list-preview/stories/.gitkeep.
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}
Asset size changes
Size Auditor did not detect a change in bundle size for any component!
Baseline commit: 69b1d233ce0fe10bd4d15a59ffdac6466d928e7d (build)
![size-auditor[bot] avatar](https://avatars.githubusercontent.com/in/13711?v=4 "Published by a pub.dev verified publisher"){kind=small}