feat(react-spinner): migrate Spinner animations to motion components#35882
Draft
robertpenner wants to merge 22 commits intomicrosoft:masterfrom
Draft
feat(react-spinner): migrate Spinner animations to motion components#35882robertpenner wants to merge 22 commits intomicrosoft:masterfrom
robertpenner wants to merge 22 commits intomicrosoft:masterfrom
Conversation
📊 Bundle size report
Unchanged fixtures
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
change/@fluentui-react-spinner-2cef6b7c-b86f-468a-9a0b-c15f63fd894e.json
Show resolved
Hide resolved
|
Pull request demo site: URL |
robertpenner
force-pushed
the
refactor/spinner-motion
branch
from
60025fb to
4e6d1f8
Compare
robertpenner
force-pushed
the
refactor/spinner-motion
branch
from
4e6d1f8 to
390539b
Compare
Add rotationMotion, tailMotion, arcStartMotion, and arcEndMotion slots to SpinnerSlots, allowing consumers to override or disable individual animation segments. The render function now uses these slots instead of hardcoded motion components. Motion slots are initialized via motionSlot() in useSpinnerBase_unstable and excluded from spinnerClassNames.
…isfy jsdoc/empty-tags lint rule
…ariables for better readability
…endering behavior
…cMotion/trailArcMotion Rename motion slots to better describe their role in the animation: - arcStartMotion → leadArcMotion (leading arc segment) - arcEndMotion → trailArcMotion (trailing arc segment) - SpinnerArcStartMotion → SpinnerLeadArcMotion - SpinnerArcEndMotion → SpinnerTrailArcMotion Updates types, implementation, styles, tests, API docs, and stories.
Add an exploded-view story that progressively reveals the Spinner's internal structure — ring track, arc segments, tail mask — then demonstrates each motion slot in isolation with color coding before showing the fully composed result.
Rename SpinnerMotionExploded.stories.tsx → SpinnerSlotsBreakdown.stories.tsx and update the story export accordingly.
…in SlotsBreakdown story
…uration and easing as parameters
…e speed control in SlotsBreakdown story
… variable speed control
robertpenner
force-pushed
the
refactor/spinner-motion
branch
from
6602f2d to
0b7c30b
Compare
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
1 participant
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.
feat(react-spinner): migrate Spinner from CSS to motion components
Previous Behavior
@keyframeswithtransform: rotate().::before/::afterpseudo-elements withanimation: inherit.@media (prefers-reduced-motion: reduce)withanimation-iteration-count: 0and a static arc fallback.New Behavior
::before/::afterpseudo-elements are replaced by explicit<span>elements, each wrapped by its own motion component.reducedMotionoption.rotationMotion,tailMotion,arcStartMotion, andarcEndMotion— allowing consumers to customize, replace, or disable (passnull) each part of the animation independently.Code Changes
Motion Migration
spinnerMotions.tswith four motion components:SpinnerRotation,SpinnerTailMotion,SpinnerArcStartMotion, andSpinnerArcEndMotion.renderSpinner.tsxto wrap spinner elements with motion components, falling back toReact.Fragmentwhen a motion slot isundefined(disabled by the user).::before/::afterpseudo-elements with explicit<span>elements for the arc segments, with shared styles in a newuseSpinnerTailArcBaseClassName.@keyframesanimations and related styles fromuseSpinnerStyles.styles.ts.tailArcClassNameandtailArcRtlClassNametoSpinnerStatefor arc element styling.@fluentui/react-motionas a dependency.Motion Slots
rotationMotion,tailMotion,arcStartMotion, andarcEndMotionslots toSpinnerSlots, resolved viamotionSlot()inuseSpinnerBase_unstable.spinnerClassNamessince they are not DOM elements.MotionCustomstory demonstrating how to override all four motion slots with slower, "dreamy" variants.TODO
MotionCustomexample for Spinner in Storybook.Testing
MotionCustomStorybook story.