Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: move @fluentui/react-motions-preview to stable #31574

Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Jun 5, 2024

Previous Behavior

@fluentui/react-motions-preview is unstable.

New Behavior

@fluentui/react-motions-preview is moved to stable as @fluentui/react-motion.

Note: we lost "s" in the package name based on UXE feedback (/cc @robertpenner).

Notes

  • Updates PresenceGroup to not use #private modifiers as it's out of our TS min bar.

@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone Jun 5, 2024
@layershifter layershifter marked this pull request as ready for review June 5, 2024 08:29
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 5, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.092 MB
269.647 kB
1.094 MB
270.546 kB
2.063 kB
899 B
react-dialog
Dialog (including children components)
99.313 kB
29.997 kB
99.312 kB
29.995 kB
-1 B
-2 B
react-toast
Toast (including Toaster)
97.868 kB
29.513 kB
97.867 kB
29.51 kB
-1 B
-3 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
keyboard-key
keyboard-key package
3.746 kB
1.928 kB
priority-overflow
createOverflowManager
4.457 kB
1.856 kB
react
ActivityItem
71.019 kB
23.288 kB
react
Announced
38.291 kB
13.239 kB
react
Autofill
15.365 kB
4.743 kB
react
Breadcrumb
201.877 kB
60.317 kB
react
Button
195.341 kB
56.521 kB
react
ButtonGrid
180.288 kB
54.565 kB
react
Calendar
121.542 kB
36.943 kB
react
Callout
84.108 kB
27.552 kB
react
Check
52.963 kB
17.773 kB
react
Checkbox
59.751 kB
19.806 kB
react
ChoiceGroup
65.276 kB
21.438 kB
react
ChoiceGroupOption
58.531 kB
19.309 kB
react
Coachmark
92.937 kB
29.356 kB
react
Color
7.737 kB
3.106 kB
react
ColorPicker
132.985 kB
41.502 kB
react
ComboBox
251.642 kB
72.135 kB
react
CommandBar
202.91 kB
60.025 kB
react
ContextualMenu
154.87 kB
48.119 kB
react
DatePicker
183.939 kB
56.079 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
229.317 kB
65.63 kB
react
Dialog
211.201 kB
63.036 kB
react
Divider
19.399 kB
6.798 kB
react
DocumentCard
216.886 kB
64.32 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.109 kB
11.448 kB
react
Dropdown
233.807 kB
68.507 kB
react
ExtendedPicker
96.565 kB
27.809 kB
react
Fabric
41.537 kB
14.283 kB
react
Facepile
210.458 kB
63.087 kB
react
FloatingPicker
241.932 kB
68.878 kB
react
FocusTrapZone
16.975 kB
5.917 kB
react
FocusZone
54.844 kB
17.402 kB
react
Grid
180.288 kB
54.565 kB
react
GroupedList
134.634 kB
40.596 kB
react
GroupedListV2
122.251 kB
37.703 kB
react
HoverCard
96.969 kB
30.741 kB
react
Icon
51.644 kB
17.197 kB
react
Icons
66.305 kB
24.379 kB
react
Image
46.701 kB
15.646 kB
react
Keytip
81.482 kB
26.712 kB
react
KeytipData
13.969 kB
4.57 kB
react
KeytipLayer
103.278 kB
31.961 kB
react
Keytips
106.046 kB
32.966 kB
react
Label
38.134 kB
13.207 kB
react
Layer
47.887 kB
16.295 kB
react
Link
39.488 kB
13.614 kB
react
List
39.176 kB
12.384 kB
react
MarqueeSelection
74.321 kB
22.385 kB
react
MessageBar
190.392 kB
56.991 kB
react
Modal
93.44 kB
30.18 kB
react
Nav
187.87 kB
56.43 kB
react
OverflowSet
33.191 kB
11.252 kB
react
Overlay
40.694 kB
14.023 kB
react
Panel
200.912 kB
59.92 kB
react
Persona
114.617 kB
36.442 kB
react
PersonaCoin
114.617 kB
36.442 kB
react
PersonaPresence
57.833 kB
19.303 kB
react
Pickers
293.618 kB
82.223 kB
react
Pivot
188.784 kB
57.162 kB
react
Popup
12.242 kB
4.181 kB
react
Positioning
22.608 kB
7.63 kB
react
PositioningContainer
73.643 kB
23.706 kB
react
ProgressIndicator
39.286 kB
13.482 kB
react
Rating
81.762 kB
26.057 kB
react
Fluent UI React (entire library)
1.013 MB
281.343 kB
react
ResizeGroup
13.286 kB
4.365 kB
react
ResponsiveMode
8.078 kB
2.95 kB
react
ScrollablePane
55.325 kB
17.669 kB
react
SearchBox
188.667 kB
56.595 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
232.427 kB
67.829 kB
react
Selection
42.252 kB
12.203 kB
react
Separator
35.183 kB
12.088 kB
react
Shimmer
49.049 kB
16.206 kB
react
ShimmeredDetailsList
240.092 kB
68.397 kB
react
Slider
57.449 kB
19.143 kB
react
SpinButton
192.395 kB
57.716 kB
react
Spinner
41.481 kB
14.412 kB
react
Stack
41.547 kB
14.233 kB
react
Sticky
32.541 kB
10.49 kB
react
Styling
45.853 kB
15.082 kB
react
SwatchColorPicker
190.614 kB
58.051 kB
react
TeachingBubble
205.667 kB
60.945 kB
react
Text
36.723 kB
12.763 kB
react
TextField
80.555 kB
25.262 kB
react
Theme
43.321 kB
14.129 kB
react
ThemeGenerator
12.34 kB
4.106 kB
react
TimePicker
241.446 kB
69.904 kB
react
Toggle
46.02 kB
15.903 kB
react
Tooltip
87.136 kB
28.164 kB
react
Utilities
82.495 kB
25.047 kB
react
Viewport
23.703 kB
7.589 kB
react
WeeklyDayPicker
101.682 kB
31.738 kB
react
WindowProvider
1.059 kB
541 B
react-accordion
Accordion (including children components)
100.008 kB
30.527 kB
react-alert
Alert
78.817 kB
22.543 kB
react-avatar
Avatar
49.299 kB
15.837 kB
react-avatar
AvatarGroup
20.107 kB
7.973 kB
react-avatar
AvatarGroupItem
63.316 kB
20.017 kB
react-badge
Badge
25.95 kB
8.612 kB
react-badge
CounterBadge
26.729 kB
8.886 kB
react-badge
PresenceBadge
25.717 kB
9.483 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
114.488 kB
31.824 kB
react-button
Button
37.103 kB
10.784 kB
react-button
CompoundButton
43.514 kB
12.074 kB
react-button
MenuButton
41.884 kB
12.132 kB
react-button
SplitButton
49.896 kB
13.724 kB
react-button
ToggleButton
53.03 kB
12.543 kB
react-calendar-compat
Calendar Compat
150.314 kB
40.099 kB
react-card
Card - All
101.186 kB
29.052 kB
react-card
Card
94.22 kB
27.336 kB
react-card
CardFooter
14.356 kB
5.798 kB
react-card
CardHeader
16.62 kB
6.558 kB
react-card
CardPreview
14.42 kB
5.934 kB
react-checkbox
Checkbox
35.103 kB
12.11 kB
react-combobox
Combobox (including child components)
100.496 kB
33.156 kB
react-combobox
Dropdown (including child components)
101.129 kB
33.096 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.141 kB
20.157 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
212.636 kB
61.23 kB
react-components
react-components: FluentProvider & webLightTheme
44.442 kB
14.607 kB
react-datepicker-compat
DatePicker Compat
223.895 kB
63.417 kB
react-divider
Divider
21.326 kB
7.963 kB
react-field
Field
23.382 kB
8.901 kB
react-image
Image
15.362 kB
6.248 kB
react-input
Input
27.985 kB
9.444 kB
react-jsx-runtime
Classic Pragma
1.057 kB
530 B
react-jsx-runtime
JSX Dev Runtime
3.781 kB
1.646 kB
react-jsx-runtime
JSX Runtime
4.377 kB
1.881 kB
react-label
Label
14.67 kB
6 kB
react-link
Link
17.191 kB
6.991 kB
react-menu
Menu (including children components)
152.023 kB
45.98 kB
react-menu
Menu (including selectable components)
154.709 kB
46.477 kB
react-message-bar
MessageBar (all components)
24.411 kB
9.114 kB
react-northstar
Accordion
85.392 kB
26.518 kB
react-northstar
Alert
87.45 kB
26.902 kB
react-northstar
Animation
55.34 kB
17.829 kB
react-northstar
Attachment
86.844 kB
26.692 kB
react-northstar
Avatar
80.279 kB
24.629 kB
react-northstar
Box
75.248 kB
23.806 kB
react-northstar
Breadcrumb
79.92 kB
24.709 kB
react-northstar
Button
83.16 kB
25.947 kB
react-northstar
Card
82.705 kB
25.023 kB
react-northstar
Carousel
105.182 kB
31.871 kB
react-northstar
Chat
154.09 kB
46.847 kB
react-northstar
Checkbox
79.807 kB
25.078 kB
react-northstar
Datepicker
186.651 kB
56.973 kB
react-northstar
Debug
8.801 kB
3.594 kB
react-northstar
Design
36.589 kB
12.067 kB
react-northstar
Dialog
112.058 kB
33.615 kB
react-northstar
Divider
76.619 kB
24.129 kB
react-northstar
Dropdown
198.211 kB
60.214 kB
react-northstar
Embed
81.477 kB
25.417 kB
react-northstar
Flex
47.728 kB
15.438 kB
react-northstar
Form
92.527 kB
28.879 kB
react-northstar
Grid
70.584 kB
22.278 kB
react-northstar
Header
74.756 kB
23.461 kB
react-northstar
Image
73.591 kB
23.329 kB
react-northstar
Input
88.346 kB
27.78 kB
react-northstar
ItemLayout
78.231 kB
24.454 kB
react-northstar
Label
77.92 kB
24.41 kB
react-northstar
Layout
75.393 kB
23.798 kB
react-northstar
List
88.493 kB
27.547 kB
react-northstar
Loader
78.616 kB
24.729 kB
react-northstar
Menu
128.602 kB
40.717 kB
react-northstar
MenuButton
163.008 kB
49.606 kB
react-northstar
Pill
83.722 kB
26.069 kB
react-northstar
Popup
135.316 kB
42.242 kB
react-northstar
Portal
58.338 kB
18.852 kB
react-northstar
Provider
93.138 kB
29.63 kB
react-northstar
RadioGroup
83.282 kB
26.053 kB
react-northstar
Reaction
77.28 kB
24.122 kB
react-northstar
Segment
76.209 kB
23.892 kB
react-northstar
Skeleton
77.765 kB
24.2 kB
react-northstar
Slider
84.27 kB
26.737 kB
react-northstar
SplitButton
178.246 kB
53.42 kB
react-northstar
Status
76.272 kB
24.05 kB
react-northstar
SvgIcon
36.823 kB
11.743 kB
react-northstar
Table
80.796 kB
25.154 kB
react-northstar
Text
74.114 kB
23.507 kB
react-northstar
TextArea
74.248 kB
23.492 kB
react-northstar
Toolbar
175.057 kB
52.832 kB
react-northstar
Tooltip
109.973 kB
35.227 kB
react-northstar
Tree
87.855 kB
27.217 kB
react-northstar
Video
75.411 kB
23.799 kB
react-overflow
hooks only
12.87 kB
4.83 kB
react-persona
Persona
56.19 kB
17.726 kB
react-popover
Popover
127.766 kB
40.096 kB
react-portal
Portal
14.563 kB
5.118 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-positioning
usePositioning
26.489 kB
9.552 kB
react-progress
ProgressBar
17.084 kB
6.904 kB
react-provider
FluentProvider
24.616 kB
8.903 kB
react-radio
Radio
32.671 kB
10.348 kB
react-radio
RadioGroup
15.758 kB
6.431 kB
react-select
Select
27.636 kB
10.106 kB
react-slider
Slider
37.168 kB
12.543 kB
react-spinbutton
SpinButton
36.047 kB
11.833 kB
react-spinner
Spinner
25.244 kB
8.552 kB
react-swatch-picker
@fluentui/react-swatch-picker - package
104.378 kB
30.357 kB
react-switch
Switch
35.299 kB
11.345 kB
react-table
DataGrid
162.843 kB
46.317 kB
react-table
Table (Primitives only)
42.48 kB
13.866 kB
react-table
Table as DataGrid
131.934 kB
36.682 kB
react-table
Table (Selection only)
70.334 kB
20.026 kB
react-table
Table (Sort only)
68.977 kB
19.63 kB
react-tag-picker
@fluentui/react-tag-picker - package
181.063 kB
54.547 kB
react-tags
InteractionTag
15.165 kB
6.134 kB
react-tags
Tag
28.994 kB
9.518 kB
react-tags
TagGroup
82.911 kB
24.642 kB
react-text
Text - Default
17.063 kB
6.733 kB
react-text
Text - Wrappers
20.235 kB
7.064 kB
react-textarea
Textarea
26.519 kB
9.739 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
35.666 kB
7.453 kB
react-theme
Teams: Light theme
19.642 kB
5.549 kB
react-timepicker-compat
TimePicker
103.487 kB
34.632 kB
react-tooltip
Tooltip
54.556 kB
19.226 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against 02f620c6b5f01790b5e3d3ff22723210def30970

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 5, 2024

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 36 38 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 636 637 5000
Button mount 320 296 5000
Field mount 1149 1157 5000
FluentProvider mount 700 703 5000
FluentProviderWithTheme mount 83 87 10
FluentProviderWithTheme virtual-rerender 36 38 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 75 74 10
MakeStyles mount 869 876 50000
Persona mount 1745 1694 5000
SpinButton mount 1402 1409 5000
SwatchPicker mount 1562 1594 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 5, 2024

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
AlertMinimalPerf.default 164 165 0.99:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
BoxMinimalPerf.default 210 183 1.15:1
HeaderMinimalPerf.default 216 199 1.09:1
DividerMinimalPerf.default 203 188 1.08:1
ButtonMinimalPerf.default 90 84 1.07:1
CardMinimalPerf.default 332 309 1.07:1
CarouselMinimalPerf.default 261 244 1.07:1
PortalMinimalPerf.default 90 84 1.07:1
ImageMinimalPerf.default 231 218 1.06:1
RosterPerf.default 1610 1525 1.06:1
SliderMinimalPerf.default 768 727 1.06:1
GridMinimalPerf.default 198 188 1.05:1
ListWith60ListItems.default 385 368 1.05:1
VideoMinimalPerf.default 468 447 1.05:1
AttachmentSlotsPerf.default 650 624 1.04:1
ButtonOverridesMissPerf.default 669 642 1.04:1
ReactionMinimalPerf.default 212 204 1.04:1
ChatWithPopoverPerf.default 190 185 1.03:1
DatepickerMinimalPerf.default 3747 3633 1.03:1
FlexMinimalPerf.default 163 159 1.03:1
MenuButtonMinimalPerf.default 958 931 1.03:1
ProviderMergeThemesPerf.default 655 638 1.03:1
RefMinimalPerf.default 115 112 1.03:1
SkeletonMinimalPerf.default 205 199 1.03:1
AvatarMinimalPerf.default 114 112 1.02:1
DropdownManyItemsPerf.default 385 379 1.02:1
InputMinimalPerf.default 548 535 1.02:1
ItemLayoutMinimalPerf.default 726 710 1.02:1
TableMinimalPerf.default 235 231 1.02:1
ToolbarMinimalPerf.default 541 529 1.02:1
AttachmentMinimalPerf.default 80 79 1.01:1
ChatMinimalPerf.default 442 437 1.01:1
CheckboxMinimalPerf.default 1143 1134 1.01:1
DropdownMinimalPerf.default 1420 1403 1.01:1
EmbedMinimalPerf.default 1901 1873 1.01:1
FormMinimalPerf.default 226 224 1.01:1
ListCommonPerf.default 387 384 1.01:1
ListMinimalPerf.default 313 309 1.01:1
ListNestedPerf.default 336 332 1.01:1
MenuMinimalPerf.default 505 499 1.01:1
StatusMinimalPerf.default 393 391 1.01:1
TableManyItemsPerf.default 1137 1124 1.01:1
TreeMinimalPerf.default 479 474 1.01:1
AnimationMinimalPerf.default 293 292 1:1
PopupMinimalPerf.default 350 350 1:1
RadioGroupMinimalPerf.default 259 258 1:1
SplitButtonMinimalPerf.default 2269 2266 1:1
CustomToolbarPrototype.default 1451 1454 1:1
AccordionMinimalPerf.default 82 84 0.98:1
ButtonSlotsPerf.default 299 304 0.98:1
DialogMinimalPerf.default 434 441 0.98:1
LabelMinimalPerf.default 212 216 0.98:1
ProviderMinimalPerf.default 198 203 0.98:1
TextAreaMinimalPerf.default 292 298 0.98:1
TooltipMinimalPerf.default 1259 1280 0.98:1
HeaderSlotsPerf.default 461 477 0.97:1
IconMinimalPerf.default 390 402 0.97:1
LayoutMinimalPerf.default 188 195 0.96:1
SegmentMinimalPerf.default 191 198 0.96:1
TextMinimalPerf.default 188 195 0.96:1
ChatDuplicateMessagesPerf.default 140 149 0.94:1
TreeWith60ListItems.default 85 92 0.92:1
LoaderMinimalPerf.default 179 196 0.91:1

Copy link

codesandbox-ci bot commented Jun 5, 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.

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 5, 2024

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 5, 2024

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 628 634 5000
Breadcrumb mount 1691 1688 1000
Checkbox mount 1696 1705 5000
CheckboxBase mount 1475 1474 5000
ChoiceGroup mount 2946 2957 5000
ComboBox mount 676 725 1000
CommandBar mount 6464 6510 1000
ContextualMenu mount 12492 12913 1000
DefaultButton mount 805 817 5000
DetailsRow mount 2194 2285 5000
DetailsRowFast mount 2220 2234 5000
DetailsRowNoStyles mount 2034 2009 5000
Dialog mount 2677 2800 1000
DocumentCardTitle mount 233 237 1000
Dropdown mount 1975 2034 5000
FocusTrapZone mount 1136 1147 5000
FocusZone mount 1086 1078 5000
GroupedList mount 42178 41852 2
GroupedList virtual-rerender 20099 20237 2
GroupedList virtual-rerender-with-unmount 50731 51074 2
GroupedListV2 mount 227 231 2
GroupedListV2 virtual-rerender 213 215 2
GroupedListV2 virtual-rerender-with-unmount 229 214 2
IconButton mount 1139 1169 5000
Label mount 348 353 5000
Layer mount 2723 2749 5000
Link mount 395 389 5000
MenuButton mount 981 997 5000
MessageBar mount 21571 21556 5000
Nav mount 2037 2028 1000
OverflowSet mount 768 785 5000
Panel mount 1837 1793 1000
Persona mount 744 794 1000
Pivot mount 911 896 1000
PrimaryButton mount 919 935 5000
Rating mount 4672 4635 5000
SearchBox mount 908 942 5000
Shimmer mount 1900 1883 5000
Slider mount 1337 1329 5000
SpinButton mount 3020 2969 5000
Spinner mount 393 393 5000
SplitButton mount 1888 1904 5000
Stack mount 419 412 5000
StackWithIntrinsicChildren mount 861 845 5000
StackWithTextChildren mount 2628 2676 5000
SwatchColorPicker mount 6329 6396 5000
TagPicker mount 1474 1484 5000
Text mount 376 381 5000
TextField mount 937 941 5000
ThemeProvider mount 843 849 5000
ThemeProvider virtual-rerender 590 580 5000
ThemeProvider virtual-rerender-with-unmount 1298 1300 5000
Toggle mount 622 611 5000
buttonNative mount 202 183 5000

@Hotell Hotell self-requested a review June 5, 2024 12:03
Copy link

codesandbox-ci bot commented Jun 5, 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.

Copy link

codesandbox-ci bot commented Jun 5, 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.

@layershifter
Copy link
Member Author

/azp run

Copy link

Azure Pipelines successfully started running 4 pipeline(s).

Copy link

codesandbox-ci bot commented Jun 6, 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.

@layershifter layershifter merged commit fcdd01e into microsoft:master Jun 6, 2024
21 of 22 checks passed
@layershifter layershifter deleted the chore/move-motions-stable branch June 6, 2024 12:25
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024
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.

6 participants