Skip to content

feat: add motion slots to Dialog#31132

Merged
layershifter merged 1 commit into
microsoft:masterfrom
layershifter:feat/add-motion-slot
Jul 17, 2024
Merged

feat: add motion slots to Dialog#31132
layershifter merged 1 commit into
microsoft:masterfrom
layershifter:feat/add-motion-slot

Conversation

@layershifter

@layershifter layershifter commented Apr 22, 2024

Copy link
Copy Markdown
Member

Previous Behavior

Dialog & DialogSurface have built-in motion, but it's impossible to customize it.

New Behavior

  • Dialog gets surfaceMotion slot
  • DialogSurface gets backdropMotion slot

Motion slots allow to customize or replace built-in motion, see examples in #31984.

Related issues

@github-actions github-actions Bot added this to the April Project Cycle Q1 2024 milestone Apr 22, 2024
@fabricteam

fabricteam commented Apr 22, 2024

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.095 MB
271.031 kB
1.096 MB
271.19 kB
477 B
159 B
react-dialog
Dialog (including children components)
99.095 kB
29.865 kB
99.491 kB
29.895 kB
396 B
30 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.141 kB
20.157 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
211.781 kB
60.963 kB
react-components
react-components: FluentProvider & webLightTheme
44.442 kB
14.607 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-timepicker-compat
TimePicker
106.611 kB
35.546 kB
🤖 This report was generated against dec6f1577fe8b81810e46f92de0f7c2530e49e7e

Comment thread packages/react-components/react-dialog/src/components/Dialog/renderDialog.tsx Outdated
@layershifter
layershifter force-pushed the feat/add-motion-slot branch from 3abe4e1 to b3da5f9 Compare May 13, 2024 14:15
@fabricteam

fabricteam commented May 13, 2024

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 626 648 5000
Button mount 307 309 5000
Field mount 1126 1111 5000
FluentProvider mount 724 729 5000
FluentProviderWithTheme mount 83 92 10
FluentProviderWithTheme virtual-rerender 37 34 10
FluentProviderWithTheme virtual-rerender-with-unmount 80 79 10
MakeStyles mount 884 861 50000
Persona mount 1788 1703 5000
SpinButton mount 1408 1397 5000
SwatchPicker mount 1649 1657 5000

@layershifter
layershifter force-pushed the feat/add-motion-slot branch 3 times, most recently from 886462a to bc3ecdc Compare June 17, 2024 13:52
@robertpenner

Copy link
Copy Markdown
Collaborator

For feature: #30700

@layershifter
layershifter force-pushed the feat/add-motion-slot branch 3 times, most recently from 98b0482 to bbf063d Compare June 26, 2024 02:05
@layershifter
layershifter force-pushed the feat/add-motion-slot branch from bbf063d to 7726b5d Compare July 12, 2024 11:24
@layershifter layershifter changed the title feat: add motionSlot() and types feat: add motion slots to Dialog Jul 12, 2024
@layershifter
layershifter force-pushed the feat/add-motion-slot branch 3 times, most recently from 037067a to 8fe513f Compare July 17, 2024 09:57
@layershifter
layershifter force-pushed the feat/add-motion-slot branch from 8fe513f to b9da0f6 Compare July 17, 2024 10:07
@layershifter
layershifter marked this pull request as ready for review July 17, 2024 12:06
@layershifter
layershifter requested a review from a team as a code owner July 17, 2024 12:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Development

Successfully merging this pull request may close these issues.

[Feature]: It would be great if the Dialog component supported a parameter like "onClose". V9 Dialog can't trigger actions AFTER transition end

4 participants