fluentui
fluentui copied to clipboard
Published
20 hours ago •
microsoft
microsoft
People picker prototype
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}
📊 Bundle size report
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| global-context createContext |
510 B328 B |
| global-context createContextSelector |
537 B339 B |
| keyboard-key keyboard-key package |
3.746 kB1.928 kB |
| priority-overflow createOverflowManager |
4.447 kB1.853 kB |
| react-accordion Accordion (including children components) |
100.12 kB30.422 kB |
| react-alert Alert |
83.737 kB23.474 kB |
| react-avatar Avatar |
50.175 kB15.944 kB |
| react-avatar AvatarGroup |
19.704 kB7.796 kB |
| react-avatar AvatarGroupItem |
64.831 kB20.274 kB |
| react-badge Badge |
26.905 kB8.729 kB |
| react-badge CounterBadge |
27.806 kB9.024 kB |
| react-badge PresenceBadge |
25.311 kB9.306 kB |
| react-breadcrumb @fluentui/react-breadcrumb - package |
115.465 kB31.832 kB |
| react-button Button |
39.513 kB11.169 kB |
| react-button CompoundButton |
46.874 kB12.661 kB |
| react-button MenuButton |
44.292 kB12.542 kB |
| react-button SplitButton |
52.306 kB14.134 kB |
| react-button ToggleButton |
56.559 kB13.068 kB |
| react-calendar-compat Calendar Compat |
152.067 kB39.826 kB |
| react-card Card - All |
101.55 kB28.92 kB |
| react-card Card |
96.373 kB27.403 kB |
| react-card CardFooter |
13.064 kB5.385 kB |
| react-card CardHeader |
15.307 kB6.143 kB |
| react-card CardPreview |
14.015 kB5.752 kB |
| react-checkbox Checkbox |
35.65 kB12.076 kB |
| react-combobox Combobox (including child components) |
102.446 kB33.094 kB |
| react-combobox Dropdown (including child components) |
103.825 kB33.037 kB |
| react-datepicker-compat DatePicker Compat |
224.513 kB62.955 kB |
| react-dialog Dialog (including children components) |
100.923 kB29.928 kB |
| react-divider Divider |
20.82 kB7.763 kB |
| react-field Field |
22.544 kB8.61 kB |
| react-image Image |
15.745 kB6.23 kB |
| react-infobutton InfoButton |
138.69 kB43.394 kB |
| react-infobutton InfoLabel |
142.491 kB44.625 kB |
| react-input Input |
26.887 kB9.118 kB |
| react-jsx-runtime Classic Pragma |
1.057 kB530 B |
| react-jsx-runtime JSX Dev Runtime |
3.783 kB1.648 kB |
| react-jsx-runtime JSX Runtime |
4.377 kB1.881 kB |
| react-label Label |
14.266 kB5.828 kB |
| react-link Link |
17.082 kB6.911 kB |
| react-menu Menu (including children components) |
149.422 kB45.506 kB |
| react-menu Menu (including selectable components) |
152.108 kB46.016 kB |
| react-message-bar MessageBar (all components) |
25.566 kB9.131 kB |
| react-overflow hooks only |
12.862 kB4.827 kB |
| react-persona Persona |
57.066 kB17.821 kB |
| react-popover Popover |
126.88 kB39.806 kB |
| react-portal Portal |
13.629 kB4.875 kB |
| react-positioning usePositioning |
26.398 kB9.539 kB |
| react-progress ProgressBar |
17.428 kB6.898 kB |
| react-provider FluentProvider |
23.751 kB8.66 kB |
| react-radio Radio |
32.946 kB10.252 kB |
| react-radio RadioGroup |
15.354 kB6.265 kB |
| react-select Select |
28.609 kB10.205 kB |
| react-slider Slider |
39.943 kB12.969 kB |
| react-spinbutton SpinButton |
36.774 kB11.788 kB |
| react-spinner Spinner |
23.517 kB8.512 kB |
| react-switch Switch |
35.134 kB11.198 kB |
| react-tags InteractionTag |
15.259 kB6.058 kB |
| react-tags Tag |
29.982 kB9.439 kB |
| react-tags TagGroup |
80.55 kB24.027 kB |
| react-text Text - Default |
16.705 kB6.569 kB |
| react-text Text - Wrappers |
19.878 kB6.896 kB |
| react-textarea Textarea |
30.947 kB10.476 kB |
| react-theme Single theme token import |
69 B89 B |
| react-theme Teams: all themes |
34.616 kB7.317 kB |
| react-theme Teams: Light theme |
19.287 kB5.498 kB |
| react-timepicker-compat TimePicker |
104.476 kB34.491 kB |
| react-toast Toast (including Toaster) |
100.192 kB29.763 kB |
| react-tooltip Tooltip |
54.576 kB19.192 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 | 640 | 605 | 5000 | |
| Button | mount | 299 | 295 | 5000 | |
| Field | mount | 1166 | 1144 | 5000 | |
| FluentProvider | mount | 688 | 713 | 5000 | |
| FluentProviderWithTheme | mount | 82 | 79 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 62 | 65 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 71 | 78 | 10 | |
| MakeStyles | mount | 834 | 870 | 50000 | |
| Persona | mount | 1750 | 1750 | 5000 | |
| SpinButton | mount | 1381 | 1378 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| RefMinimalPerf.default | 120 | 107 | 1.12:1 |
| AccordionMinimalPerf.default | 89 | 80 | 1.11:1 |
| AttachmentMinimalPerf.default | 89 | 80 | 1.11:1 |
| HeaderMinimalPerf.default | 224 | 202 | 1.11:1 |
| TreeWith60ListItems.default | 91 | 82 | 1.11:1 |
| ChatDuplicateMessagesPerf.default | 169 | 153 | 1.1:1 |
| AlertMinimalPerf.default | 162 | 152 | 1.07:1 |
| FlexMinimalPerf.default | 162 | 151 | 1.07:1 |
| TextAreaMinimalPerf.default | 304 | 284 | 1.07:1 |
| RadioGroupMinimalPerf.default | 261 | 247 | 1.06:1 |
| TableMinimalPerf.default | 236 | 222 | 1.06:1 |
| FormMinimalPerf.default | 227 | 216 | 1.05:1 |
| GridMinimalPerf.default | 195 | 185 | 1.05:1 |
| ItemLayoutMinimalPerf.default | 739 | 707 | 1.05:1 |
| MenuMinimalPerf.default | 519 | 493 | 1.05:1 |
| AnimationMinimalPerf.default | 305 | 292 | 1.04:1 |
| ButtonSlotsPerf.default | 315 | 304 | 1.04:1 |
| DividerMinimalPerf.default | 221 | 213 | 1.04:1 |
| ListMinimalPerf.default | 316 | 304 | 1.04:1 |
| ListNestedPerf.default | 338 | 326 | 1.04:1 |
| BoxMinimalPerf.default | 197 | 191 | 1.03:1 |
| ChatMinimalPerf.default | 442 | 431 | 1.03:1 |
| ProviderMinimalPerf.default | 202 | 197 | 1.03:1 |
| ReactionMinimalPerf.default | 209 | 203 | 1.03:1 |
| AvatarMinimalPerf.default | 111 | 109 | 1.02:1 |
| ButtonOverridesMissPerf.default | 669 | 658 | 1.02:1 |
| CheckboxMinimalPerf.default | 1195 | 1175 | 1.02:1 |
| DatepickerMinimalPerf.default | 3668 | 3606 | 1.02:1 |
| DialogMinimalPerf.default | 455 | 448 | 1.02:1 |
| DropdownMinimalPerf.default | 1467 | 1445 | 1.02:1 |
| InputMinimalPerf.default | 549 | 539 | 1.02:1 |
| LabelMinimalPerf.default | 223 | 219 | 1.02:1 |
| TableManyItemsPerf.default | 1138 | 1116 | 1.02:1 |
| TextMinimalPerf.default | 198 | 194 | 1.02:1 |
| ToolbarMinimalPerf.default | 540 | 530 | 1.02:1 |
| TreeMinimalPerf.default | 487 | 479 | 1.02:1 |
| ButtonMinimalPerf.default | 93 | 92 | 1.01:1 |
| EmbedMinimalPerf.default | 1919 | 1905 | 1.01:1 |
| ImageMinimalPerf.default | 225 | 222 | 1.01:1 |
| SegmentMinimalPerf.default | 195 | 194 | 1.01:1 |
| SliderMinimalPerf.default | 781 | 774 | 1.01:1 |
| CustomToolbarPrototype.default | 1494 | 1476 | 1.01:1 |
| VideoMinimalPerf.default | 436 | 431 | 1.01:1 |
| AttachmentSlotsPerf.default | 665 | 667 | 1:1 |
| DropdownManyItemsPerf.default | 392 | 391 | 1:1 |
| MenuButtonMinimalPerf.default | 950 | 954 | 1:1 |
| PortalMinimalPerf.default | 86 | 86 | 1:1 |
| ProviderMergeThemesPerf.default | 630 | 629 | 1:1 |
| SkeletonMinimalPerf.default | 198 | 198 | 1:1 |
| SplitButtonMinimalPerf.default | 2273 | 2274 | 1:1 |
| StatusMinimalPerf.default | 396 | 397 | 1:1 |
| IconMinimalPerf.default | 398 | 399 | 1:1 |
| CardMinimalPerf.default | 305 | 307 | 0.99:1 |
| RosterPerf.default | 1532 | 1550 | 0.99:1 |
| TooltipMinimalPerf.default | 1273 | 1281 | 0.99:1 |
| CarouselMinimalPerf.default | 256 | 262 | 0.98:1 |
| ListWith60ListItems.default | 366 | 374 | 0.98:1 |
| LoaderMinimalPerf.default | 189 | 193 | 0.98:1 |
| PopupMinimalPerf.default | 353 | 360 | 0.98:1 |
| HeaderSlotsPerf.default | 472 | 488 | 0.97:1 |
| ChatWithPopoverPerf.default | 187 | 194 | 0.96:1 |
| ListCommonPerf.default | 377 | 392 | 0.96:1 |
| LayoutMinimalPerf.default | 191 | 202 | 0.95:1 |
Perf Analysis (@fluentui/react)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 632 | 611 | 5000 | |
| Breadcrumb | mount | 1672 | 1690 | 1000 | |
| Checkbox | mount | 1686 | 1687 | 5000 | |
| CheckboxBase | mount | 1472 | 1463 | 5000 | |
| ChoiceGroup | mount | 3010 | 2987 | 5000 | |
| ComboBox | mount | 643 | 657 | 1000 | |
| CommandBar | mount | 6226 | 6202 | 1000 | |
| ContextualMenu | mount | 12026 | 12049 | 1000 | |
| DefaultButton | mount | 758 | 747 | 5000 | |
| DetailsRow | mount | 2192 | 2180 | 5000 | |
| DetailsRowFast | mount | 2173 | 2141 | 5000 | |
| DetailsRowNoStyles | mount | 2058 | 2011 | 5000 | |
| Dialog | mount | 2837 | 2633 | 1000 | |
| DocumentCardTitle | mount | 228 | 208 | 1000 | |
| Dropdown | mount | 1964 | 1968 | 5000 | |
| FocusTrapZone | mount | 1145 | 1141 | 5000 | |
| FocusZone | mount | 1067 | 1104 | 5000 | |
| GroupedList | mount | 41388 | 41454 | 2 | |
| GroupedList | virtual-rerender | 19982 | 19913 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 50567 | 50540 | 2 | |
| GroupedListV2 | mount | 234 | 228 | 2 | |
| GroupedListV2 | virtual-rerender | 217 | 195 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 222 | 231 | 2 | |
| IconButton | mount | 1086 | 1071 | 5000 | |
| Label | mount | 339 | 332 | 5000 | |
| Layer | mount | 2690 | 2717 | 5000 | |
| Link | mount | 388 | 384 | 5000 | |
| MenuButton | mount | 962 | 939 | 5000 | |
| MessageBar | mount | 21510 | 21692 | 5000 | |
| Nav | mount | 1977 | 1943 | 1000 | |
| OverflowSet | mount | 769 | 772 | 5000 | |
| Panel | mount | 2044 | 1768 | 1000 | |
| Persona | mount | 747 | 765 | 1000 | |
| Pivot | mount | 874 | 850 | 1000 | |
| PrimaryButton | mount | 852 | 856 | 5000 | |
| Rating | mount | 4601 | 4538 | 5000 | |
| SearchBox | mount | 911 | 909 | 5000 | |
| Shimmer | mount | 1888 | 1801 | 5000 | |
| Slider | mount | 1299 | 1300 | 5000 | |
| SpinButton | mount | 2812 | 2908 | 5000 | |
| Spinner | mount | 380 | 385 | 5000 | |
| SplitButton | mount | 1823 | 1845 | 5000 | |
| Stack | mount | 421 | 410 | 5000 | |
| StackWithIntrinsicChildren | mount | 840 | 837 | 5000 | |
| StackWithTextChildren | mount | 2576 | 2566 | 5000 | |
| SwatchColorPicker | mount | 6072 | 6117 | 5000 | |
| TagPicker | mount | 1452 | 1469 | 5000 | |
| Text | mount | 388 | 366 | 5000 | |
| TextField | mount | 931 | 912 | 5000 | |
| ThemeProvider | mount | 830 | 836 | 5000 | |
| ThemeProvider | virtual-rerender | 581 | 568 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1259 | 1250 | 5000 | |
| Toggle | mount | 621 | 603 | 5000 | |
| buttonNative | mount | 198 | 188 | 5000 |
