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.

Sign up for GitHub

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

Jump to bottom

chore(react-motions): create a package #29822

Merged
merged 1 commit into from
Nov 13, 2023
Merged

chore(react-motions): create a package #29822

merged 1 commit into from
Nov 13, 2023

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Nov 13, 2023 •
edited
Loading

New Behavior

The PR creates a package for experiments on motion definitions and related APIs.

Why the experiment is not in contrib or somewhere else?

  • We need to test it with Fluent components
  • We need to test it with partners

Related Issue(s)

Related to #29821.

@layershifter layershifter marked this pull request as ready for review November 13, 2023 09:41
@fabricteam
Copy link
Collaborator

fabricteam commented Nov 13, 2023 •
edited
Loading

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext		 510 B
330 B
global-context
createContextSelector		 537 B
342 B
priority-overflow
createOverflowManager		 4.341 kB
1.81 kB
react-accordion
Accordion (including children components)		 92.983 kB
28.418 kB
react-alert
Alert		 84.293 kB
23.456 kB
react-avatar
Avatar		 50.534 kB
15.923 kB
react-avatar
AvatarGroup		 20.064 kB
7.894 kB
react-avatar
AvatarGroupItem		 65.19 kB
20.259 kB
react-badge
Badge		 27.264 kB
8.808 kB
react-badge
CounterBadge		 28.165 kB
9.101 kB
react-badge
PresenceBadge		 25.67 kB
9.313 kB
react-button
Button		 40.074 kB
11.292 kB
react-button
CompoundButton		 47.43 kB
12.787 kB
react-button
MenuButton		 44.848 kB
12.668 kB
react-button
SplitButton		 52.862 kB
14.254 kB
react-button
ToggleButton		 57.122 kB
13.194 kB
react-calendar-compat
Calendar Compat		 141.364 kB
36.841 kB
react-card
Card - All		 92.955 kB
26.977 kB
react-card
Card		 87.781 kB
25.462 kB
react-card
CardFooter		 13.423 kB
5.481 kB
react-card
CardHeader		 15.666 kB
6.235 kB
react-card
CardPreview		 14.374 kB
5.854 kB
react-checkbox
Checkbox		 37.505 kB
12.327 kB
react-combobox
Combobox (including child components)		 92.195 kB
30.069 kB
react-combobox
Dropdown (including child components)		 90.605 kB
29.726 kB
react-components
react-components: Button, FluentProvider & webLightTheme		 70.013 kB
20.17 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 207.755 kB
59.416 kB
react-components
react-components: FluentProvider & webLightTheme		 42.297 kB
14.008 kB
react-datepicker-compat
DatePicker Compat		 212.982 kB
59.467 kB
react-dialog
Dialog (including children components)		 94.473 kB
28.28 kB
react-divider
Divider		 21.179 kB
7.839 kB
react-field
Field		 22.788 kB
8.639 kB
react-image
Image		 16.096 kB
6.317 kB
react-infobutton
InfoButton		 131.061 kB
41.305 kB
react-infobutton
InfoLabel		 134.745 kB
42.459 kB
react-input
Input		 27.247 kB
9.194 kB
react-jsx-runtime
Classic Pragma		 1.049 kB
531 B
react-jsx-runtime
JSX Dev Runtime		 4.14 kB
1.741 kB
react-jsx-runtime
JSX Runtime		 4.734 kB
1.983 kB
react-label
Label		 14.508 kB
5.857 kB
react-link
Link		 17.4 kB
6.977 kB
react-menu
Menu (including children components)		 140.508 kB
43.108 kB
react-menu
Menu (including selectable components)		 143.194 kB
43.615 kB
react-message-bar
MessageBar (all components)		 25.54 kB
9.102 kB
react-overflow
hooks only		 12.598 kB
4.754 kB
react-persona
Persona		 57.425 kB
17.798 kB
react-popover
Popover		 119.792 kB
37.816 kB
react-portal
Portal		 12.4 kB
4.541 kB
react-portal-compat
PortalCompatProvider		 6.651 kB
2.252 kB
react-positioning
usePositioning		 25.637 kB
9.263 kB
react-progress
ProgressBar		 17.788 kB
6.986 kB
react-provider
FluentProvider		 22.837 kB
8.434 kB
react-radio
Radio		 31.266 kB
10.267 kB
react-radio
RadioGroup		 15.704 kB
6.35 kB
react-select
Select		 28.968 kB
10.269 kB
react-slider
Slider		 38.349 kB
12.595 kB
react-spinbutton
SpinButton		 37.133 kB
11.856 kB
react-spinner
Spinner		 23.762 kB
8.556 kB
react-switch
Switch		 33.731 kB
10.899 kB
react-table
DataGrid		 157.084 kB
43.906 kB
react-table
Table (Primitives only)		 43.941 kB
13.76 kB
react-table
Table as DataGrid		 130.165 kB
35.174 kB
react-table
Table (Selection only)		 75.777 kB
20.477 kB
react-table
Table (Sort only)		 74.384 kB
20.075 kB
react-tags
InteractionTag		 15.618 kB
6.152 kB
react-tags
Tag		 30.341 kB
9.505 kB
react-tags
TagGroup		 73.816 kB
22.097 kB
react-text
Text - Default		 17.065 kB
6.645 kB
react-text
Text - Wrappers		 20.237 kB
6.965 kB
react-textarea
Textarea		 31.306 kB
10.549 kB
react-theme
Single theme token import		 69 B
89 B
react-theme
Teams: all themes		 34.616 kB
7.299 kB
react-theme
Teams: Light theme		 19.287 kB
5.49 kB
react-timepicker-compat-preview
TimePicker		 93.593 kB
31.35 kB
react-toast
Toast (including Toaster)		 92.725 kB
27.876 kB
react-tooltip
Tooltip		 52.798 kB
18.569 kB
react-utilities
SSRProvider		 180 B
159 B
🤖 This report was generated against 38f6d474a41cfc229854d84d280cf7bb89f1fbe7

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 13, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender-with-unmount 73 76 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 641 619 5000
Button mount 321 312 5000
Field mount 1147 1148 5000
FluentProvider mount 701 707 5000
FluentProviderWithTheme mount 92 89 10
FluentProviderWithTheme virtual-rerender 68 69 10
FluentProviderWithTheme virtual-rerender-with-unmount 73 76 10 Possible regression
MakeStyles mount 842 864 50000
Persona mount 1754 1708 5000
SpinButton mount 1394 1348 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 13, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
CarouselMinimalPerf.default 273 240 1.14:1
RefMinimalPerf.default 116 104 1.12:1
AvatarMinimalPerf.default 109 102 1.07:1
ChatWithPopoverPerf.default 203 192 1.06:1
FormMinimalPerf.default 228 216 1.06:1
ImageMinimalPerf.default 233 220 1.06:1
InputMinimalPerf.default 556 532 1.05:1
LabelMinimalPerf.default 224 213 1.05:1
ProviderMinimalPerf.default 216 205 1.05:1
TreeWith60ListItems.default 87 83 1.05:1
ButtonSlotsPerf.default 316 303 1.04:1
EmbedMinimalPerf.default 1888 1813 1.04:1
PortalMinimalPerf.default 86 83 1.04:1
IconMinimalPerf.default 391 377 1.04:1
BoxMinimalPerf.default 197 192 1.03:1
ChatDuplicateMessagesPerf.default 152 147 1.03:1
DividerMinimalPerf.default 210 204 1.03:1
MenuMinimalPerf.default 495 482 1.03:1
TableMinimalPerf.default 237 230 1.03:1
CardMinimalPerf.default 314 308 1.02:1
ChatMinimalPerf.default 428 419 1.02:1
CheckboxMinimalPerf.default 1154 1136 1.02:1
DialogMinimalPerf.default 442 435 1.02:1
HeaderMinimalPerf.default 212 208 1.02:1
ListWith60ListItems.default 364 357 1.02:1
LoaderMinimalPerf.default 196 192 1.02:1
SkeletonMinimalPerf.default 206 202 1.02:1
SplitButtonMinimalPerf.default 2284 2238 1.02:1
TableManyItemsPerf.default 1117 1099 1.02:1
AccordionMinimalPerf.default 84 83 1.01:1
AnimationMinimalPerf.default 299 295 1.01:1
ButtonMinimalPerf.default 86 85 1.01:1
DatepickerMinimalPerf.default 3540 3510 1.01:1
HeaderSlotsPerf.default 461 455 1.01:1
ItemLayoutMinimalPerf.default 712 704 1.01:1
ListNestedPerf.default 335 331 1.01:1
PopupMinimalPerf.default 353 348 1.01:1
SegmentMinimalPerf.default 199 198 1.01:1
TextMinimalPerf.default 192 190 1.01:1
VideoMinimalPerf.default 462 459 1.01:1
AlertMinimalPerf.default 162 162 1:1
AttachmentMinimalPerf.default 76 76 1:1
DropdownMinimalPerf.default 1424 1427 1:1
GridMinimalPerf.default 189 189 1:1
MenuButtonMinimalPerf.default 951 952 1:1
ProviderMergeThemesPerf.default 643 646 1:1
CustomToolbarPrototype.default 1456 1451 1:1
TreeMinimalPerf.default 480 481 1:1
ButtonOverridesMissPerf.default 650 654 0.99:1
DropdownManyItemsPerf.default 388 390 0.99:1
FlexMinimalPerf.default 151 153 0.99:1
ListCommonPerf.default 380 385 0.99:1
ReactionMinimalPerf.default 209 212 0.99:1
ToolbarMinimalPerf.default 528 532 0.99:1
TooltipMinimalPerf.default 1276 1291 0.99:1
AttachmentSlotsPerf.default 652 665 0.98:1
LayoutMinimalPerf.default 204 208 0.98:1
StatusMinimalPerf.default 394 406 0.97:1
RosterPerf.default 1572 1630 0.96:1
RadioGroupMinimalPerf.default 263 274 0.96:1
ListMinimalPerf.default 287 303 0.95:1
SliderMinimalPerf.default 723 758 0.95:1
TextAreaMinimalPerf.default 271 285 0.95:1

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 13, 2023 •
edited
Loading

🕵 fluentuiv8 No visual regressions between this PR and main

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented Nov 13, 2023 •
edited
Loading

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 37cd363:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 13, 2023 •
edited
Loading

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 13, 2023 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 655 626 5000
Breadcrumb mount 1691 1661 1000
Checkbox mount 1681 1690 5000
CheckboxBase mount 1499 1456 5000
ChoiceGroup mount 2948 2905 5000
ComboBox mount 668 655 1000
CommandBar mount 6258 6235 1000
ContextualMenu mount 12323 12318 1000
DefaultButton mount 760 746 5000
DetailsRow mount 2213 2219 5000
DetailsRowFast mount 2206 2226 5000
DetailsRowNoStyles mount 2035 2051 5000
Dialog mount 2825 2637 1000
DocumentCardTitle mount 227 227 1000
Dropdown mount 1980 2001 5000
FocusTrapZone mount 1116 1129 5000
FocusZone mount 1075 1064 5000
GroupedList mount 41842 41963 2
GroupedList virtual-rerender 17956 19920 2
GroupedList virtual-rerender-with-unmount 50716 50778 2
GroupedListV2 mount 225 222 2
GroupedListV2 virtual-rerender 218 215 2
GroupedListV2 virtual-rerender-with-unmount 224 234 2
IconButton mount 1116 1110 5000
Label mount 349 343 5000
Layer mount 2751 2717 5000
Link mount 386 402 5000
MenuButton mount 942 929 5000
MessageBar mount 21243 21312 5000
Nav mount 1950 1945 1000
OverflowSet mount 778 778 5000
Panel mount 1804 1830 1000
Persona mount 731 737 1000
Pivot mount 865 884 1000
PrimaryButton mount 852 863 5000
Rating mount 4632 4643 5000
SearchBox mount 895 915 5000
Shimmer mount 1921 1865 5000
Slider mount 1357 1331 5000
SpinButton mount 2846 2848 5000
Spinner mount 386 401 5000
SplitButton mount 1837 1842 5000
Stack mount 409 405 5000
StackWithIntrinsicChildren mount 853 860 5000
StackWithTextChildren mount 2615 2623 5000
SwatchColorPicker mount 6125 6103 5000
TagPicker mount 1450 1477 5000
Text mount 372 379 5000
TextField mount 945 955 5000
ThemeProvider mount 841 824 5000
ThemeProvider virtual-rerender 594 582 5000
ThemeProvider virtual-rerender-with-unmount 1252 1248 5000
Toggle mount 608 605 5000
buttonNative mount 195 198 5000

@size-auditor Size Auditor
Copy link

size-auditor bot commented Nov 13, 2023

Asset size changes

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

Baseline commit: 38f6d474a41cfc229854d84d280cf7bb89f1fbe7 (build)

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@layershifter layershifter merged commit c76375b into microsoft:master Nov 13, 2023
26 checks passed
@layershifter layershifter deleted the chore/create-motions branch November 13, 2023 11:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ling1726 ling1726 ling1726 approved these changes

@JustSlone JustSlone Awaiting requested review from JustSlone JustSlone is a code owner

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar jurokapsiar is a code owner

@tudorpopams tudorpopams Awaiting requested review from tudorpopams tudorpopams is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
November Project Cycle Q1 2023
Development

Successfully merging this pull request may close these issues.
3 participants
@layershifter @fabricteam @ling1726