Skip to content

Conversation

@YuanboXue-Amber
Copy link
Contributor

Last step of #30198

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme mount 72 79 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 630 634 5000
Button mount 292 298 5000
Field mount 1099 1108 5000
FluentProvider mount 684 679 5000
FluentProviderWithTheme mount 72 79 10 Possible regression
FluentProviderWithTheme virtual-rerender 63 66 10
FluentProviderWithTheme virtual-rerender-with-unmount 71 79 10
MakeStyles mount 870 902 50000
Persona mount 1773 1699 5000
SpinButton mount 1377 1402 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 9, 2024

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 e6c3865:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
LoaderMinimalPerf.default 210 183 1.15:1
ChatWithPopoverPerf.default 196 175 1.12:1
LabelMinimalPerf.default 227 204 1.11:1
ButtonMinimalPerf.default 93 86 1.08:1
AvatarMinimalPerf.default 108 101 1.07:1
FlexMinimalPerf.default 161 151 1.07:1
AttachmentMinimalPerf.default 89 84 1.06:1
DividerMinimalPerf.default 206 194 1.06:1
TableMinimalPerf.default 240 226 1.06:1
AccordionMinimalPerf.default 81 78 1.04:1
ProviderMinimalPerf.default 203 195 1.04:1
SegmentMinimalPerf.default 195 188 1.04:1
TreeWith60ListItems.default 84 81 1.04:1
CardMinimalPerf.default 314 306 1.03:1
ChatMinimalPerf.default 440 427 1.03:1
ItemLayoutMinimalPerf.default 701 679 1.03:1
ListMinimalPerf.default 310 300 1.03:1
ListNestedPerf.default 326 315 1.03:1
PortalMinimalPerf.default 81 79 1.03:1
ProviderMergeThemesPerf.default 665 644 1.03:1
ReactionMinimalPerf.default 204 198 1.03:1
CarouselMinimalPerf.default 265 260 1.02:1
CheckboxMinimalPerf.default 1129 1106 1.02:1
SplitButtonMinimalPerf.default 2246 2196 1.02:1
TooltipMinimalPerf.default 1269 1246 1.02:1
BoxMinimalPerf.default 192 191 1.01:1
DatepickerMinimalPerf.default 3523 3502 1.01:1
GridMinimalPerf.default 190 188 1.01:1
HeaderMinimalPerf.default 208 206 1.01:1
RosterPerf.default 1621 1600 1.01:1
SkeletonMinimalPerf.default 193 192 1.01:1
StatusMinimalPerf.default 397 394 1.01:1
TextMinimalPerf.default 187 186 1.01:1
ToolbarMinimalPerf.default 532 529 1.01:1
TreeMinimalPerf.default 470 467 1.01:1
AttachmentSlotsPerf.default 638 638 1:1
ButtonOverridesMissPerf.default 650 651 1:1
ChatDuplicateMessagesPerf.default 151 151 1:1
DropdownMinimalPerf.default 1413 1411 1:1
CustomToolbarPrototype.default 1449 1450 1:1
VideoMinimalPerf.default 435 434 1:1
AlertMinimalPerf.default 148 149 0.99:1
AnimationMinimalPerf.default 290 292 0.99:1
DropdownManyItemsPerf.default 392 394 0.99:1
MenuMinimalPerf.default 489 496 0.99:1
MenuButtonMinimalPerf.default 952 960 0.99:1
PopupMinimalPerf.default 343 345 0.99:1
RefMinimalPerf.default 106 107 0.99:1
SliderMinimalPerf.default 746 757 0.99:1
TextAreaMinimalPerf.default 288 291 0.99:1
DialogMinimalPerf.default 435 444 0.98:1
FormMinimalPerf.default 208 213 0.98:1
TableManyItemsPerf.default 1075 1092 0.98:1
EmbedMinimalPerf.default 1840 1895 0.97:1
InputMinimalPerf.default 527 542 0.97:1
ImageMinimalPerf.default 220 230 0.96:1
LayoutMinimalPerf.default 195 204 0.96:1
ListCommonPerf.default 378 393 0.96:1
ListWith60ListItems.default 363 377 0.96:1
RadioGroupMinimalPerf.default 258 269 0.96:1
HeaderSlotsPerf.default 450 473 0.95:1
IconMinimalPerf.default 371 396 0.94:1
ButtonSlotsPerf.default 297 329 0.9:1

@fabricteam
Copy link
Collaborator

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
priority-overflow
createOverflowManager
4.447 kB
1.853 kB
react-accordion
Accordion (including children components)
93.891 kB
28.677 kB
react-alert
Alert
83.737 kB
23.474 kB
react-avatar
Avatar
50.175 kB
15.944 kB
react-avatar
AvatarGroup
19.704 kB
7.796 kB
react-avatar
AvatarGroupItem
64.831 kB
20.274 kB
react-badge
Badge
26.905 kB
8.729 kB
react-badge
CounterBadge
27.806 kB
9.024 kB
react-badge
PresenceBadge
25.311 kB
9.306 kB
react-button
Button
39.513 kB
11.169 kB
react-button
CompoundButton
46.874 kB
12.661 kB
react-button
MenuButton
44.292 kB
12.542 kB
react-button
SplitButton
52.306 kB
14.134 kB
react-button
ToggleButton
56.559 kB
13.068 kB
react-calendar-compat
Calendar Compat
142.165 kB
37.153 kB
react-card
Card - All
94.685 kB
27.248 kB
react-card
Card
89.509 kB
25.733 kB
react-card
CardFooter
13.064 kB
5.385 kB
react-card
CardHeader
15.307 kB
6.143 kB
react-card
CardPreview
14.015 kB
5.752 kB
react-checkbox
Checkbox
34.746 kB
11.902 kB
react-combobox
Combobox (including child components)
95.436 kB
30.792 kB
react-combobox
Dropdown (including child components)
94.022 kB
30.47 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.901 kB
20.261 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
210.164 kB
59.999 kB
react-components
react-components: FluentProvider & webLightTheme
42.388 kB
14.103 kB
react-datepicker-compat
DatePicker Compat
213.918 kB
60.021 kB
react-dialog
Dialog (including children components)
95.452 kB
28.456 kB
react-divider
Divider
20.82 kB
7.763 kB
react-field
Field
22.427 kB
8.573 kB
react-image
Image
15.736 kB
6.228 kB
react-infobutton
InfoButton
132.996 kB
41.838 kB
react-infobutton
InfoLabel
136.684 kB
42.979 kB
react-input
Input
26.887 kB
9.118 kB
react-jsx-runtime
Classic Pragma
1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime
3.783 kB
1.648 kB
react-jsx-runtime
JSX Runtime
4.377 kB
1.881 kB
react-label
Label
14.149 kB
5.759 kB
react-link
Link
17.082 kB
6.911 kB
react-menu
Menu (including children components)
142.349 kB
43.657 kB
react-menu
Menu (including selectable components)
145.035 kB
44.163 kB
react-message-bar
MessageBar (all components)
25.181 kB
9.039 kB
react-overflow
hooks only
12.837 kB
4.818 kB
react-persona
Persona
57.066 kB
17.821 kB
react-popover
Popover
121.19 kB
38.227 kB
react-portal
Portal
12.788 kB
4.67 kB
react-portal-compat
PortalCompatProvider
7.099 kB
2.385 kB
react-positioning
usePositioning
26.162 kB
9.465 kB
react-progress
ProgressBar
17.428 kB
6.898 kB
react-provider
FluentProvider
22.928 kB
8.472 kB
react-radio
Radio
32.042 kB
10.046 kB
react-radio
RadioGroup
15.345 kB
6.263 kB
react-select
Select
28.609 kB
10.205 kB
react-slider
Slider
39.15 kB
12.769 kB
react-spinbutton
SpinButton
36.774 kB
11.788 kB
react-spinner
Spinner
23.402 kB
8.467 kB
react-switch
Switch
34.23 kB
10.995 kB
react-table
DataGrid
156.347 kB
43.735 kB
react-table
Table (Primitives only)
43.899 kB
13.781 kB
react-table
Table as DataGrid
129.567 kB
35 kB
react-table
Table (Selection only)
74.744 kB
20.215 kB
react-table
Table (Sort only)
73.351 kB
19.806 kB
react-tags
InteractionTag
15.259 kB
6.058 kB
react-tags
Tag
29.982 kB
9.439 kB
react-tags
TagGroup
74.334 kB
22.284 kB
react-text
Text - Default
16.705 kB
6.569 kB
react-text
Text - Wrappers
19.878 kB
6.896 kB
react-textarea
Textarea
30.947 kB
10.476 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
34.616 kB
7.317 kB
react-theme
Teams: Light theme
19.287 kB
5.498 kB
react-timepicker-compat
TimePicker
97.272 kB
32.257 kB
react-toast
Toast (including Toaster)
93.203 kB
28.026 kB
react-tooltip
Tooltip
53.63 kB
18.924 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against 15894b3d816a981edbf0f44b19e298c0698009f3

@size-auditor
Copy link

size-auditor bot commented Jan 9, 2024

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 15894b3d816a981edbf0f44b19e298c0698009f3 (build)

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 630 612 5000
Breadcrumb mount 1686 1637 1000
Checkbox mount 1662 1658 5000
CheckboxBase mount 1458 1450 5000
ChoiceGroup mount 2903 2935 5000
ComboBox mount 654 674 1000
CommandBar mount 6259 6201 1000
ContextualMenu mount 12744 12737 1000
DefaultButton mount 743 741 5000
DetailsRow mount 2178 2183 5000
DetailsRowFast mount 2170 2128 5000
DetailsRowNoStyles mount 2010 1975 5000
Dialog mount 2754 2605 1000
DocumentCardTitle mount 215 229 1000
Dropdown mount 1985 1957 5000
FocusTrapZone mount 1152 1110 5000
FocusZone mount 1049 1060 5000
GroupedList mount 41900 41932 2
GroupedList virtual-rerender 17989 20094 2
GroupedList virtual-rerender-with-unmount 51116 50872 2
GroupedListV2 mount 237 234 2
GroupedListV2 virtual-rerender 207 212 2
GroupedListV2 virtual-rerender-with-unmount 227 227 2
IconButton mount 1068 1064 5000
Label mount 343 332 5000
Layer mount 2728 2734 5000
Link mount 384 390 5000
MenuButton mount 950 947 5000
MessageBar mount 21396 21364 5000
Nav mount 1961 1948 1000
OverflowSet mount 761 757 5000
Panel mount 1792 1798 1000
Persona mount 720 736 1000
Pivot mount 871 863 1000
PrimaryButton mount 840 842 5000
Rating mount 4683 4608 5000
SearchBox mount 908 896 5000
Shimmer mount 1817 1834 5000
Slider mount 1337 1302 5000
SpinButton mount 2828 2892 5000
Spinner mount 388 381 5000
SplitButton mount 1808 1833 5000
Stack mount 396 400 5000
StackWithIntrinsicChildren mount 857 834 5000
StackWithTextChildren mount 2642 2570 5000
SwatchColorPicker mount 6095 6058 5000
TagPicker mount 1492 1424 5000
Text mount 372 369 5000
TextField mount 926 952 5000
ThemeProvider mount 845 816 5000
ThemeProvider virtual-rerender 589 575 5000
ThemeProvider virtual-rerender-with-unmount 1264 1258 5000
Toggle mount 602 612 5000
buttonNative mount 198 186 5000

@YuanboXue-Amber YuanboXue-Amber marked this pull request as ready for review January 9, 2024 11:55
@YuanboXue-Amber YuanboXue-Amber merged commit b717fb3 into microsoft:master Jan 9, 2024
@YuanboXue-Amber YuanboXue-Amber deleted the removal branch January 9, 2024 13:19
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jan 10, 2024
* master: (166 commits)
  Remove v0 dependency from v0 compat package (microsoft#30276)
  applying package updates
  Disallow `window` and `document` access for `@fluentui/react` and related packages. (microsoft#30063)
  Update Rating api and stories (microsoft#30092)
  TeachingPopover: Minor style changes (microsoft#30270)
  feat(scripts-gulp): replace lerna with nx (microsoft#30266)
  ci: remove canary and nightly functionality from northstar (microsoft#30264)
  List: Re-initialize on mount in React 18. (microsoft#29881)
  feat(scripts-monorepo): replace lerna/utils with pure nx apis (microsoft#30178)
  chore: remove react-timepicker-compat-preview (microsoft#30263)
  applying package updates
  feat(TimePicker-compat): stable release  (microsoft#30217)
  feat: Implement onPositioningEnd callback (microsoft#30177)
  applying package updates
  v8 registerIcons compat (microsoft#30003)
  Adding Planner, ToDoItem and updated Project filetype icons. Updating FabricCDN url to latest datecode. (microsoft#30079)
  Scaffolds more Nav components (microsoft#30227)
  chore: migrate to nx 17.2 (microsoft#30187)
  applying package updates
  feat: Update position when target or container dimensions change (microsoft#30179)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants