chore(Drawer): migrate to stable motion APIs

[layershifter]

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]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
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]

📊 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}

[layershifter]

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

[marcosmoura]

@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]

@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]

@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.

[layershifter]

@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]

@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 🐱