Skip to content

feat: Add context to configure motion behaviour#32316

Merged
ling1726 merged 11 commits intomicrosoft:masterfrom
ling1726:react-motion/feat/disable-motion
Aug 16, 2024
Merged

feat: Add context to configure motion behaviour#32316
ling1726 merged 11 commits intomicrosoft:masterfrom
ling1726:react-motion/feat/disable-motion

Conversation

@ling1726
Copy link
Contributor

@ling1726 ling1726 commented Aug 15, 2024

Adds a context with a new skip behaviour for motions. This behaviour will immediately complete the motion and apply final motion styles.

ℹ️ Note that onMotionStart onMotionFinish will still be called

Fixes #32046

Adds a context that will disable motions by calling `finish` on
animations which will apply finished animation styles directly to motion
children
@ling1726 ling1726 requested a review from a team as a code owner August 15, 2024 15:46
@github-actions github-actions bot added this to the August Project Cycle Q3 2024 milestone Aug 15, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 15, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-accordion
Accordion (including children components)
104.332 kB
32.038 kB
104.529 kB
32.097 kB
197 B
59 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
218 kB
63.151 kB
218.197 kB
63.203 kB
197 B
52 B
react-components
react-components: entire library
1.097 MB
270.919 kB
1.097 MB
271.028 kB
300 B
109 B
react-dialog
Dialog (including children components)
99.541 kB
29.849 kB
99.724 kB
29.912 kB
183 B
63 B
react-motion
@fluentui/react-motion - createMotionComponent()
4.097 kB
1.832 kB
4.303 kB
1.899 kB
206 B
67 B
react-motion
@fluentui/react-motion - createPresenceComponent()
4.858 kB
2.164 kB
5.038 kB
2.229 kB
180 B
65 B
react-toast
Toast (including Toaster)
97.633 kB
29.377 kB
97.816 kB
29.438 kB
183 B
61 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.14 kB
20.137 kB
react-components
react-components: FluentProvider & webLightTheme
44.447 kB
14.59 kB
react-motion
@fluentui/react-motion - PresenceGroup
1.714 kB
819 B
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-timepicker-compat
TimePicker
107.387 kB
35.758 kB
🤖 This report was generated against 60e80c1f7b34a4311ba61022cc87c76e30eace20

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 15, 2024

Perf Analysis (@fluentui/react-components)

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

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 628 640 5000
Button mount 297 309 5000
Field mount 1131 1150 5000
FluentProvider mount 699 722 5000
FluentProviderWithTheme mount 75 84 10
FluentProviderWithTheme virtual-rerender 36 32 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 86 78 10
MakeStyles mount 877 856 50000
Persona mount 1779 1720 5000
SpinButton mount 1423 1447 5000
SwatchPicker mount 1609 1642 5000

@ling1726 ling1726 changed the title feat: Add context to disable motions feat: Add context to configure motion behaviour Aug 15, 2024
@ling1726 ling1726 requested a review from layershifter August 15, 2024 18:24
@ling1726 ling1726 requested a review from layershifter August 15, 2024 19:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: a React provider to disable motions

3 participants