refactor(react-message-bar): migrate slide & fade to motion components (redo) #35168
Conversation
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
- Replace react-transition-group with @fluentui/react-motion components - Use PresenceGroup and custom MessageBarMotion component - Create custom fadeAtom and slideAtom motion definitions - Remove MessageBarTransition.tsx and related CSS animations - Add deprecation markers for unused properties - Update to latest motion package versions (react-motion ^9.10.4, react-motion-components-preview ^0.10.0) - Remove react-transition-group dependency This restores the motion component refactoring from PR microsoft#33465, which was reverted due to issue microsoft#33914. The underlying motion framework bug has been fixed in PR microsoft#34164.
…idation tests - Add ResizeObserver mock in jest setup for MessageBar component tests - Required because MessageBar uses useMessageBarReflow which depends on ResizeObserver - Add comprehensive tests for bug microsoft#33914 to validate motion components handle ref forwarding gracefully - Tests confirm motion components now warn instead of crashing with invalid children
robertpenner
changed the title
robertpenner
changed the title
📊 Bundle size report
Unchanged fixtures
|
robertpenner
changed the title
robertpenner
changed the title
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
change/@fluentui-react-message-bar-63f1e671-8b9c-4ed0-ab5d-6a993537315b.json
Show resolved
Hide resolved
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
MessageBarGroup
Previous Behavior
•
MessageBarGroupanimations were implemented usingreact-transition-groupand CSS.• The animations did not respond to the OS animations toggle.
New Behavior
MessageBarGroupanimations use motion components in a PresenceGroup.react-transition-groupdependency is removed from all of v9!react-componentsis 7 kB smaller.MessageBarTransition.tsxis deleted.Testing Notes
• Test the animations in the
MessageBarAnimation example. (PR build)Related Issue(s)
• Fixes #33470
History and Background
This PR re-applies the motion component refactoring from #33465, which was originally merged on December 20, 2024, but was later reverted in #34037 on March 19, 2025 due to a critical bug discovered in issue #33914.
What happened:
react-transition-groupto the modern motion components frameworkHow this PR addresses the original bug:
@fluentui/react-motion ^9.10.4and@fluentui/react-motion-components-preview ^0.10.0which include the fix from fix(react-motion): improve element validation to work with React 19 #34164