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(Dialog): migrate to new motion APIs #31380

Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented May 15, 2024

Previous Behavior

Dialog uses react-transition-group for animations.

New Behavior

Dialog uses @fluentui/react-motions-preview for animations.

Related Issue(s)

Fixes #30041.
Fixes #30695.
Fixes #31369

@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone May 15, 2024
@layershifter layershifter force-pushed the chore/migrate-dialog-use-motion branch from 7186318 to da83358 Compare May 15, 2024 15:57
Copy link

codesandbox-ci bot commented May 15, 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 May 15, 2024

Perf Analysis (@fluentui/react-components)

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

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 627 643 5000
Button mount 321 315 5000
Field mount 1148 1138 5000
FluentProvider mount 717 718 5000
FluentProviderWithTheme mount 88 90 10
FluentProviderWithTheme virtual-rerender 30 39 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 71 74 10
MakeStyles mount 840 872 50000
Persona mount 1747 1733 5000
SpinButton mount 1379 1402 5000
SwatchPicker mount 1545 1541 5000

@fabricteam
Copy link
Collaborator

fabricteam commented May 15, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.121 MB
275.409 kB
1.123 MB
276.251 kB
2.06 kB
842 B
react-dialog
Dialog (including children components)
99.638 kB
29.951 kB
98.817 kB
29.825 kB
-821 B
-126 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
71.955 kB
20.772 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
215.9 kB
61.97 kB
react-components
react-components: FluentProvider & webLightTheme
44.442 kB
14.607 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
🤖 This report was generated against 92329052b8ed1f6b1574a1b02f841e463d4bbb1c

@layershifter layershifter force-pushed the chore/migrate-dialog-use-motion branch 3 times, most recently from 7118a08 to 99686f3 Compare May 16, 2024 08:19
@layershifter layershifter force-pushed the chore/migrate-dialog-use-motion branch 2 times, most recently from 248389f to fd4ddd9 Compare May 16, 2024 09:38
@layershifter layershifter marked this pull request as ready for review May 16, 2024 09:59
@layershifter layershifter requested a review from a team as a code owner May 16, 2024 09:59
Copy link
Contributor

@robertpenner robertpenner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The motion logic is so concise and easy to read now. 🥇

@layershifter layershifter force-pushed the chore/migrate-dialog-use-motion branch from a3a5f74 to 385b919 Compare May 22, 2024 19:29
@layershifter layershifter enabled auto-merge (squash) May 22, 2024 19:31
@layershifter layershifter merged commit 7a2367b into microsoft:master May 22, 2024
18 of 20 checks passed
@layershifter layershifter deleted the chore/migrate-dialog-use-motion branch May 22, 2024 19:56
@@ -0,0 +1,7 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵 fluentuiv9 Open the Visual Regressions report to inspect the affected screenshots

SwatchPicker Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
SwatchPicker Converged.spacing.default.chromium.png 0 Removed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
5 participants