Skip to content

feat: add presenceMotionSlot()#31984

Merged
layershifter merged 4 commits into
microsoft:masterfrom
layershifter:feat/add-motion-slot-api
Jul 17, 2024
Merged

feat: add presenceMotionSlot()#31984
layershifter merged 4 commits into
microsoft:masterfrom
layershifter:feat/add-motion-slot-api

Conversation

@layershifter

@layershifter layershifter commented Jul 12, 2024

Copy link
Copy Markdown
Member

New Behavior

This PR adds motionSlot() API that will be used in components have are using createPresenceComponent() motions. For an implementation example, check #31132.

Once integration, it will add customization of motions:

/* to listen for events */
<DialogSurface backdropMotion={{ onMotionFinish: () => {} }} />

/* to remove motion completely */
<DialogSurface backdropMotion={null} />

/* to replace motion */
<DialogSurface backdropMotion={{ children: (Component, props) => <MyMotionComponent {...props} /> }} />

Related Issue(s)

@github-actions github-actions Bot added this to the July Project Cycle Q3 2024 milestone Jul 12, 2024
@fabricteam

fabricteam commented Jul 12, 2024

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme mount 81 85 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 602 634 5000
Button mount 301 299 5000
Field mount 1130 1117 5000
FluentProvider mount 712 719 5000
FluentProviderWithTheme mount 81 85 10 Possible regression
FluentProviderWithTheme virtual-rerender 39 34 10
FluentProviderWithTheme virtual-rerender-with-unmount 89 83 10
MakeStyles mount 876 875 50000
Persona mount 1718 1708 5000
SpinButton mount 1365 1396 5000
SwatchPicker mount 1629 1681 5000

@layershifter
layershifter force-pushed the feat/add-motion-slot-api branch from 7726b5d to 7624faa Compare July 12, 2024 11:41
@fabricteam

fabricteam commented Jul 12, 2024

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

✅ No changes found

@layershifter layershifter changed the title feat: add motionSlot() feat: add presenceMotionSlot() Jul 12, 2024
@layershifter
layershifter force-pushed the feat/add-motion-slot-api branch from 7624faa to 4caf0ea Compare July 12, 2024 11:49
@layershifter
layershifter marked this pull request as ready for review July 12, 2024 11:49
@layershifter
layershifter requested a review from a team as a code owner July 12, 2024 11:49

@bsunderhus bsunderhus left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Minor nit picking but aside from that seems solid 💪🏻

Comment thread packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx Outdated
Comment thread packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx Outdated
Comment thread packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx Outdated
Comment thread packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx Outdated
Comment thread packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx Outdated
Comment thread packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx Outdated
@layershifter
layershifter force-pushed the feat/add-motion-slot-api branch from 4caf0ea to 1891ee9 Compare July 16, 2024 15:21
@layershifter
layershifter enabled auto-merge (squash) July 17, 2024 09:16
@layershifter
layershifter merged commit dec6f15 into microsoft:master Jul 17, 2024
@layershifter
layershifter deleted the feat/add-motion-slot-api branch July 17, 2024 09:52
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]: introduce motionSlot() and necessary types

3 participants