chore(Drawer): migrate to stable motion APIs by layershifter · Pull Request #31668 · microsoft/fluentui

layershifter · 2024-06-11T16:05:11Z

Previous Behavior

@fluentui/react-drawer uses @fluentui/react-motion-preview.

New Behavior

@fluentui/react-drawer uses @fluentui/react-motion 💪
OverlayDrawer gets backdropMotion & surfaceMotion slots, InlineDrawer gets surfaceMotion for customizing motions
Stories have been updated

Related Issue(s)

Fixes #30696.

Note on VR regressions

Visual regression tool reports visual regressions in Drawer:

All of them related to a missing box-shadow which should be tokens.shadow64. To confirm it, I went to a PR deployment & real docsite and changed value of --shadow64 token to rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px:

And the result matches:

Seems to be a glitch with VR tool 💥

fabricteam · 2024-06-11T16:15:58Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	643	653	5000
Button	mount	299	306	5000
Field	mount	1144	1120	5000
FluentProvider	mount	724	713	5000
FluentProviderWithTheme	mount	79	92	10
FluentProviderWithTheme	virtual-rerender	34	36	10
FluentProviderWithTheme	virtual-rerender-with-unmount	82	77	10
MakeStyles	mount	862	848	50000
Persona	mount	1818	1731	5000
SpinButton	mount	1433	1393	5000
SwatchPicker	mount	1628	1677	5000

fabricteam · 2024-06-11T16:17:01Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: Button, FluentProvider & webLightTheme	`0 B` `0 B`	`69.141 kB` `20.157 kB`	🆕 New entry
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`0 B` `0 B`	`212.254 kB` `61.167 kB`	🆕 New entry
`react-components` react-components: FluentProvider & webLightTheme	`0 B` `0 B`	`44.442 kB` `14.607 kB`	🆕 New entry
`react-components` react-components: entire library	`0 B` `0 B`	`1.094 MB` `269.97 kB`	🆕 New entry
`react-portal-compat` PortalCompatProvider	`0 B` `0 B`	`8.39 kB` `2.64 kB`	🆕 New entry
`react-timepicker-compat` TimePicker	`0 B` `0 B`	`106.611 kB` `35.546 kB`	🆕 New entry

_{🤖 This report was generated against ceacd96379e6d7268d1807a318a9b6f7c48f519b}

change/@fluentui-react-drawer-54014221-befb-409e-a4a3-543c1570d111.json

layershifter · 2024-06-12T13:38:11Z

@marcosmoura can you please help with reviewing this PR? 🙏

...omponents/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts

...ges/react-components/react-drawer/library/src/components/InlineDrawer/renderInlineDrawer.tsx

marcosmoura · 2024-06-12T14:26:35Z

@layershifter There is also a Motion Disabled stories example that is not working anymore. How can we implement a way to disable animations on the user side?

layershifter · 2024-06-12T14:30:49Z

@layershifter There is also a Motion Disabled stories example that is not working anymore. How can we implement a way to disable animations on the user side?

Good catch 👍 This should be supported with #30700.

Considering that there are at least three items related to #30700 in this PR, IMO it makes sense to implement first it.

@marcosmoura I will put this PR on hold and will work on #30700. Thanks for feedback ❤️

marcosmoura · 2024-06-12T14:32:56Z

@layershifter Might be for another PR, but another thing is the Multiple Levels example. Since we are moving the whole Drawer package to not use the hooks anymore, we should start thinking of a way to achieve a similar experience using the new Motion API.

...ry/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts

layershifter · 2024-07-18T12:56:21Z

@layershifter There is also a Motion Disabled stories example that is not working anymore. How can we implement a way to disable animations on the user side?

@marcosmoura updated it, it's just null now 🙌 See an example below (the story was also updated 💪):

<Drawer
  backdropMotion={null}
  surfaceMotion={null}
 />

layershifter · 2024-07-18T12:56:46Z

@layershifter Might be for another PR, but another thing is the Multiple Levels example. Since we are moving the whole Drawer package to not use the hooks anymore, we should start thinking of a way to achieve a similar experience using the new Motion API.

I updated that story, too 🐱

packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx

packages/react-components/react-drawer/library/src/components/InlineDrawer/useInlineDrawer.ts

packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx

github-actions bot added this to the April Project Cycle Q1 2024 milestone Jun 11, 2024

layershifter force-pushed the chore/drawer-motion branch from cfe6efc to 3119a3f Compare June 11, 2024 16:24

fabricteam reviewed Jun 11, 2024

View reviewed changes

change/@fluentui-react-drawer-54014221-befb-409e-a4a3-543c1570d111.json Show resolved Hide resolved

layershifter marked this pull request as ready for review June 12, 2024 13:37

layershifter requested review from a team and marcosmoura as code owners June 12, 2024 13:37

marcosmoura reviewed Jun 12, 2024

View reviewed changes

...omponents/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts Show resolved Hide resolved

marcosmoura reviewed Jun 12, 2024

View reviewed changes

...ges/react-components/react-drawer/library/src/components/InlineDrawer/renderInlineDrawer.tsx Outdated Show resolved Hide resolved

layershifter marked this pull request as draft June 12, 2024 14:33

layershifter force-pushed the chore/drawer-motion branch from 3119a3f to 3078741 Compare July 17, 2024 16:12

github-actions bot modified the milestones: April Project Cycle Q1 2024, July Project Cycle Q3 2024 Jul 17, 2024

layershifter force-pushed the chore/drawer-motion branch 3 times, most recently from ad1d868 to 5aae06d Compare July 18, 2024 10:09

layershifter commented Jul 18, 2024

View reviewed changes

...ry/src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts Show resolved Hide resolved

layershifter force-pushed the chore/drawer-motion branch 2 times, most recently from 02ddca6 to 4022110 Compare July 18, 2024 11:51

layershifter commented Jul 18, 2024

View reviewed changes

packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx Show resolved Hide resolved

layershifter force-pushed the chore/drawer-motion branch 3 times, most recently from 6ecfb88 to 1691a31 Compare July 18, 2024 15:55

layershifter force-pushed the chore/drawer-motion branch 2 times, most recently from 4c714eb to 591dcd5 Compare July 18, 2024 16:59

layershifter marked this pull request as ready for review July 18, 2024 17:22

layershifter requested review from a team and mltejera as code owners July 18, 2024 17:22

marcosmoura self-requested a review July 19, 2024 12:56

marcosmoura reviewed Jul 25, 2024

View reviewed changes

layershifter and others added 6 commits July 25, 2024 15:57

chore(Drawer): migrate to stable motion APIs

15f8c4a

chore: fix types on Drawers

a2aef77

improve fmt

10ea59f

fix types

1daa30b

fix bad rebase

4957c43

fix versions

5cc2a2e

layershifter force-pushed the chore/drawer-motion branch from 63f4acf to 5cc2a2e Compare July 25, 2024 14:01

unmount components on exit

2910230

marcosmoura approved these changes Jul 29, 2024

View reviewed changes

Merge branch 'master' into chore/drawer-motion

2fd4680

mltejera approved these changes Jul 29, 2024

View reviewed changes

layershifter merged commit f903b6d into microsoft:master Jul 29, 2024

layershifter deleted the chore/drawer-motion branch July 29, 2024 16:11

robertpenner mentioned this pull request Jan 13, 2025

[Drawer] Investigate custom motion components migration #33634

Open

Conversation

layershifter commented Jun 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

fabricteam commented Jun 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Jun 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

Uh oh!

layershifter commented Jun 12, 2024

Uh oh!

Uh oh!

Uh oh!

marcosmoura commented Jun 12, 2024

Uh oh!

layershifter commented Jun 12, 2024

Uh oh!

marcosmoura commented Jun 12, 2024

Uh oh!

Uh oh!

layershifter commented Jul 18, 2024

Uh oh!

layershifter commented Jul 18, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

layershifter commented Jun 11, 2024 •

edited

Loading

fabricteam commented Jun 11, 2024 •

edited

Loading

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

fabricteam commented Jun 11, 2024 •

edited

Loading