Skip to content

feat: add presenceMotionSlot()#31984

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

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

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented Jul 12, 2024 •
edited
Loading

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
Copy link
Collaborator

fabricteam commented Jul 12, 2024 •
edited
Loading

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
Copy link
Collaborator

fabricteam commented Jul 12, 2024 •
edited
Loading

📊 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 approved these changes Jul 12, 2024
View reviewed changes
Copy link
Contributor

@bsunderhus bsunderhus left a comment

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 💪🏻

@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
@layershifter layershifter mentioned this pull request Jul 17, 2024
Merged
This was referenced Jul 23, 2024
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fabricteam fabricteam fabricteam left review comments

@bsunderhus bsunderhus bsunderhus approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

July Project Cycle Q3 2024

Development

Successfully merging this pull request may close these issues.

[Feature]: introduce motionSlot() and necessary types

3 participants

@layershifter @fabricteam @bsunderhus