-
Notifications
You must be signed in to change notification settings - Fork 2.7k
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
chore(Dialog): migrate to new motion APIs #31380
Conversation
7186318
to
da83358
Compare
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. |
Perf Analysis (
|
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 |
📊 Bundle size reportUnchanged fixtures
|
7118a08
to
99686f3
Compare
packages/react-components/react-dialog/src/contexts/dialogTransitionContext.ts
Outdated
Show resolved
Hide resolved
248389f
to
fd4ddd9
Compare
There was a problem hiding this 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. 🥇
packages/react-components/react-dialog/src/components/Dialog/renderDialog.tsx
Show resolved
Hide resolved
packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts
Show resolved
Hide resolved
…enderDialog.tsx Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
a3a5f74
to
385b919
Compare
@@ -0,0 +1,7 @@ | |||
{ |
There was a problem hiding this comment.
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 |
Previous Behavior
Dialog
usesreact-transition-group
for animations.New Behavior
Dialog
uses@fluentui/react-motions-preview
for animations.Related Issue(s)
Fixes #30041.
Fixes #30695.
Fixes #31369