feat(react-dialog): adds motion to `DialogSurface` by bsunderhus · Pull Request #29391 · microsoft/fluentui

bsunderhus · 2023-10-04T11:58:40Z

New Behavior

Introduces animations to Dialog component using react-transition-group

Related Issue(s)

Fixes [Feature]: Motion request in fluent dialog #28610

fabricteam · 2023-10-04T12:08:39Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	624	620	5000
Button	mount	320	317	5000
Field	mount	1112	1107	5000
FluentProvider	mount	818	714	5000
FluentProviderWithTheme	mount	77	87	10
FluentProviderWithTheme	virtual-rerender	66	57	10
FluentProviderWithTheme	virtual-rerender-with-unmount	70	72	10
InfoButton	mount	16	13	5000
MakeStyles	mount	853	840	50000
Persona	mount	1712	1696	5000
SpinButton	mount	1345	1336	5000

codesandbox-ci · 2023-10-04T12:10:53Z

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 d773dc7:

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

fabricteam · 2023-10-04T12:12:22Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-dialog` Dialog (including children components)	`90.18 kB` `26.891 kB`	`94.473 kB` `28.28 kB`	`4.293 kB` `1.389 kB`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`70.002 kB` `20.161 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.417 kB` `59.289 kB`
`react-components` react-components: FluentProvider & webLightTheme	`42.286 kB` `14 kB`
`react-portal-compat` PortalCompatProvider	`6.651 kB` `2.252 kB`

_{🤖 This report was generated against 8f2eb85fcde38ad239b1defcb0914263d01c2534}

size-auditor · 2023-10-04T12:19:49Z

Asset size changes

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

Baseline commit: 8f2eb85fcde38ad239b1defcb0914263d01c2534 (build)

packages/react-components/react-dialog/src/contexts/dialogContext.ts

.../react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts

bsunderhus · 2023-10-05T09:12:23Z

blocked by #29394

packages/react-components/react-dialog/etc/react-dialog.api.md

packages/react-components/react-dialog/src/contexts/dialogContext.ts

.../react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts

fabricteam · 2023-10-18T13:40:38Z

🕵 fluentuiv9 No visual regressions between this PR and main

packages/react-components/react-dialog/src/components/Dialog/renderDialog.tsx

TristanWatanabe · 2023-10-19T14:45:25Z

/azp run Visual Regression Tool - PR

azure-pipelines · 2023-10-19T14:45:37Z

Azure Pipelines successfully started running 1 pipeline(s).

This reverts commit 4ac68a6.

* master: (48 commits) fix(react-drawer): regression with mountNode prop not available after refactoring (microsoft#29524) feat(react-storybook-addon-codesandbox): support various providers for "export to" functionality (microsoft#29536) feat(TimePicker-compat): call onTimeSelect on blur (microsoft#29597) feat: (breadcrumb) Removed appearance prop (microsoft#29554) chore(deps): bump fsevents from 1.2.9 to 1.2.13 (microsoft#29476) Adding comment in Hovercard that we support cumulative area chart currently (microsoft#29395) applying package updates applying package updates chore(vr-tests-react-components, perf-tests-app): Remove infobutton from vr-tests and perf test app (microsoft#29603) docs: Add guidance for modifying textarea's height. (microsoft#29601) fix(react-calendar-compat): Classnames removed and added to day cells need to be split instead of providing a string with spaces (microsoft#29611) [Part 2] Changes to onboard charting to fluent docsite (microsoft#29608) chore: bump jest to 29.7.0 (microsoft#29298) applying package updates feat(react-infolabel, react-components): Release InfoLabel to stable (microsoft#29585) feat(react-datepicker-compat): Update DatePicker to use react-calendar-compat (microsoft#29587) feat: adds motion to DialogSurface (microsoft#29391) fix: Use correct target windows for ResizeObserver (microsoft#29551) chg (microsoft#29592) Fix missing x callout custom callout (microsoft#29547) ...

bsunderhus added Component: Dialog Fluent UI react-components (v9) labels Oct 4, 2023

bsunderhus self-assigned this Oct 4, 2023

github-actions bot added this to the October Project Cycle Q4 2023 milestone Oct 4, 2023

bsunderhus force-pushed the react-dialog/feature--adds-motion-to-dialog branch 2 times, most recently from 47c4cad to a920460 Compare October 4, 2023 17:35

miroslavstastny reviewed Oct 4, 2023

View reviewed changes

packages/react-components/react-dialog/src/contexts/dialogContext.ts Outdated Show resolved Hide resolved

.../react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts Outdated Show resolved Hide resolved

bsunderhus force-pushed the react-dialog/feature--adds-motion-to-dialog branch 2 times, most recently from 016b85f to 8fac463 Compare October 5, 2023 08:31

bsunderhus added the Status: Blocked Resolution blocked by another issue label Oct 5, 2023

bsunderhus requested a review from miroslavstastny October 5, 2023 10:39

bsunderhus removed the Status: Blocked Resolution blocked by another issue label Oct 10, 2023

bsunderhus force-pushed the react-dialog/feature--adds-motion-to-dialog branch 2 times, most recently from e1f7056 to b70dd97 Compare October 10, 2023 12:24

bsunderhus marked this pull request as ready for review October 10, 2023 13:39

bsunderhus requested a review from a team as a code owner October 10, 2023 13:39

ling1726 reviewed Oct 10, 2023

View reviewed changes

packages/react-components/react-dialog/etc/react-dialog.api.md Outdated Show resolved Hide resolved

ling1726 reviewed Oct 10, 2023

View reviewed changes

packages/react-components/react-dialog/src/contexts/dialogContext.ts Outdated Show resolved Hide resolved

miroslavstastny reviewed Oct 10, 2023

View reviewed changes

.../react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts Outdated Show resolved Hide resolved

bsunderhus marked this pull request as draft October 11, 2023 11:29

bsunderhus force-pushed the react-dialog/feature--adds-motion-to-dialog branch 5 times, most recently from eaeeaae to 7ee83c4 Compare October 12, 2023 17:02

bsunderhus force-pushed the react-dialog/feature--adds-motion-to-dialog branch from 7ee83c4 to 0420705 Compare October 12, 2023 17:42

layershifter mentioned this pull request Oct 13, 2023

[Bug]: useMotion() violates rules of hooks #29527

Closed

2 tasks

bsunderhus requested review from ling1726 and miroslavstastny October 16, 2023 11:30

bsunderhus marked this pull request as ready for review October 16, 2023 14:30

bsunderhus marked this pull request as draft October 16, 2023 20:54

bsunderhus force-pushed the react-dialog/feature--adds-motion-to-dialog branch from 0420705 to 0e45c89 Compare October 17, 2023 15:42

bsunderhus marked this pull request as ready for review October 18, 2023 12:47

bsunderhus force-pushed the react-dialog/feature--adds-motion-to-dialog branch from 0e45c89 to 7111dc4 Compare October 18, 2023 13:16

ling1726 reviewed Oct 19, 2023

View reviewed changes

packages/react-components/react-dialog/src/components/Dialog/renderDialog.tsx Show resolved Hide resolved

ling1726 approved these changes Oct 19, 2023

View reviewed changes

feat: adds motion to DialogSurface

d773dc7

bsunderhus force-pushed the react-dialog/feature--adds-motion-to-dialog branch from e088350 to d773dc7 Compare October 19, 2023 12:03

bsunderhus merged commit 4ac68a6 into microsoft:master Oct 19, 2023

bsunderhus deleted the react-dialog/feature--adds-motion-to-dialog branch October 19, 2023 17:16

robertpenner added a commit to robertpenner/fluentui that referenced this pull request Oct 24, 2023

Revert "feat: adds motion to DialogSurface (microsoft#29391)"

d67490f

This reverts commit 4ac68a6.

bsunderhus mentioned this pull request Oct 31, 2023

[Bug]: v9 Dialog animations are causing integration tests to fail #29704

Closed

layershifter mentioned this pull request Nov 1, 2023

feat(react-drawer): release to 9.0.0 stable #29711

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-dialog): adds motion to `DialogSurface`#29391

feat(react-dialog): adds motion to `DialogSurface`#29391
bsunderhus merged 1 commit intomicrosoft:masterfrom
bsunderhus:react-dialog/feature--adds-motion-to-dialog

bsunderhus commented Oct 4, 2023 •

edited

Loading

Uh oh!

fabricteam commented Oct 4, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Oct 4, 2023 •

edited

Loading

Uh oh!

fabricteam commented Oct 4, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Oct 4, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

bsunderhus commented Oct 5, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Oct 18, 2023 •

edited

Loading

Uh oh!

Uh oh!

TristanWatanabe commented Oct 19, 2023

Uh oh!

azure-pipelines bot commented Oct 19, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

bsunderhus commented Oct 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Oct 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

codesandbox-ci bot commented Oct 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Oct 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor bot commented Oct 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

Uh oh!

Uh oh!

bsunderhus commented Oct 5, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Oct 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

Uh oh!

TristanWatanabe commented Oct 19, 2023

Uh oh!

azure-pipelines bot commented Oct 19, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

bsunderhus commented Oct 4, 2023 •

edited

Loading

fabricteam commented Oct 4, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

codesandbox-ci bot commented Oct 4, 2023 •

edited

Loading

fabricteam commented Oct 4, 2023 •

edited

Loading

size-auditor bot commented Oct 4, 2023 •

edited

Loading

fabricteam commented Oct 18, 2023 •

edited

Loading