refactor(Popover, Menu): migrate slide animation from CSS to motion component (Feb 19)#35763
Draft
robertpenner wants to merge 5 commits intomicrosoft:masterfrom
Draft
refactor(Popover, Menu): migrate slide animation from CSS to motion component (Feb 19)#35763robertpenner wants to merge 5 commits intomicrosoft:masterfrom
robertpenner wants to merge 5 commits intomicrosoft:masterfrom
Conversation
Replace inline keyframes with fadeAtom and slideAtom from @fluentui/react-motion-components-preview, and extract getPlacementSlideDistances helper to simplify the placement-based slide distance logic.
… make mainAxis functional Rename --fui-positioning-slide-distance-x/y to --fui-positioning-slide-direction-x/y. The vars now store unit direction vectors (-1, 0, 1) instead of full pixel distances. PopoverSurfaceMotion multiplies direction by mainAxis via calc(), making the mainAxis prop actually control the slide distance.
robertpenner
force-pushed
the
feat/popover-motion
branch
from
af471ea to
25328c8
Compare
…t defaultProps
- Add surfaceMotion prop to PopoverProps (PresenceMotionSlotProps<{ mainAxis }>)
- Add surfaceMotion slot to PopoverState (SlotComponentType)
- Exclude surfaceMotion from PopoverBaseState
- Add missing mainAxis to presenceMotionSlot defaultProps
robertpenner
force-pushed
the
feat/popover-motion
branch
from
25328c8 to
3ca9a82
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -1,5 +1,6 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Charts-DonutChart 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png | 5570 | Changed |
vr-tests-react-components/Popover Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Popover Converged.when rendering inline, it should not render behind relatively positioned elements.PopoverSurface focused.chromium.png | 93 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 615 | Changed |
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 883 | Changed |
vr-tests-react-components/Skeleton converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Skeleton converged.Opaque Skeleton with circle - High Contrast.default.chromium.png | 1 | Changed |
vr-tests-react-components/TagPicker 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - Dark Mode.chromium.png | 658 | Changed |
| vr-tests-react-components/TagPicker.disabled - RTL.chromium.png | 635 | Changed |
| vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png | 677 | Changed |
There were 3 duplicate changes discarded. Check the build logs for more information.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Previous Behavior
New Behavior
Related Issue(s)