Refactor/progressbar spinner motion#35869
Draft
robertpenner wants to merge 6 commits intomicrosoft:masterfrom
Draft
Refactor/progressbar spinner motion#35869robertpenner wants to merge 6 commits intomicrosoft:masterfrom
robertpenner wants to merge 6 commits intomicrosoft:masterfrom
Conversation
|
Pull request demo site: URL |
📊 Bundle size report
Unchanged fixtures
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
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.default.chromium.png | 5581 | Changed |
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png | 413 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 505 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 726 | Changed |
vr-tests-react-components/ProgressBar converged 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 208 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - RTL.default.chromium.png | 162 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 404 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 325 | Changed |
vr-tests-react-components/Skeleton converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Skeleton converged.Translucent Skeleton with square.default.chromium.png | 2 | Changed |
vr-tests-react-components/Spinner converged 17 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Spinner converged.Inverted - High Contrast.default.chromium.png | 80 | Changed |
| vr-tests-react-components/Spinner converged.Inverted - Dark Mode.default.chromium.png | 52 | Changed |
| vr-tests-react-components/Spinner converged.Inverted with Label - Dark Mode.default.chromium.png | 421 | Changed |
| vr-tests-react-components/Spinner converged.Inverted with Label.default.chromium.png | 209 | Changed |
| vr-tests-react-components/Spinner converged.Inverted.default.chromium.png | 58 | Changed |
| vr-tests-react-components/Spinner converged.Inverted with Label - High Contrast.default.chromium.png | 675 | Changed |
| vr-tests-react-components/Spinner converged.Primary - Dark Mode.default.chromium.png | 28 | Changed |
| vr-tests-react-components/Spinner converged.Primary - High Contrast.default.chromium.png | 112 | Changed |
| vr-tests-react-components/Spinner converged.Animation.default.chromium.png | 4876 | Changed |
| vr-tests-react-components/Spinner converged.Primary with Label - Dark Mode.default.chromium.png | 259 | Changed |
| vr-tests-react-components/Spinner converged.Primary with Label - RTL.default.chromium.png | 50 | Changed |
| vr-tests-react-components/Spinner converged.Primary with Label - High Contrast.default.chromium.png | 361 | Changed |
| vr-tests-react-components/Spinner converged.Primary.default.chromium.png | 37 | Changed |
| vr-tests-react-components/Spinner converged.Primary + size.default.chromium.png | 301 | Changed |
| vr-tests-react-components/Spinner converged.Animation - RTL.default.chromium.png | 4346 | Changed |
| vr-tests-react-components/Spinner converged.Primary with Label.default.chromium.png | 209 | Changed |
| vr-tests-react-components/Spinner converged.Spinner Min Width.default.chromium.png | 102 | Changed |
vr-tests-react-components/TagPicker 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png | 658 | Changed |
| vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png | 635 | Changed |
There were 2 duplicate changes discarded. Check the build logs for more information.
…nts (CSS Animation Plan Group A)
ProgressBar (A1):
- Add progressBarMotions.ts with ProgressBarIndeterminate (createMotionComponent)
- Wrap indeterminate bar in renderProgressBar.tsx with ProgressBarIndeterminate
- Remove CSS keyframe animation from useProgressBarStyles.styles.ts; keep position/layout styles
- Keep maxWidth: 100% media query for reduced motion layout change
- Add @fluentui/react-motion dependency
Spinner (A3):
- Add spinnerMotions.ts with SpinnerRotation (createMotionComponent, 1500ms linear infinite)
- Wrap spinner slot in renderSpinner.tsx with SpinnerRotation
- Remove CSS rotation animationName/duration/timing/iteration from useSpinnerStyles.styles.ts
- Reduced motion handled via WAAPI reducedMotion: { duration: 1800 }
- Add @fluentui/react-motion dependency
…nts (CSS Animation Plan Group A)
ProgressBar (A1):
- Add progressBarMotions.ts with ProgressBarIndeterminate (createMotionComponent)
- Wrap indeterminate bar in renderProgressBar.tsx with ProgressBarIndeterminate
- Remove CSS keyframe animation from useProgressBarStyles.styles.ts; keep position/layout styles
- Keep maxWidth: 100% media query for reduced motion layout change
- Add @fluentui/react-motion dependency
Spinner (A3):
- Add spinnerMotions.ts with SpinnerRotation (createMotionComponent, 1500ms linear infinite)
- Wrap spinner slot in renderSpinner.tsx with SpinnerRotation
- Remove CSS rotation animationName/duration/timing/iteration from useSpinnerStyles.styles.ts
- Reduced motion handled via WAAPI reducedMotion: { duration: 1800 }
- Add @fluentui/react-motion dependency
…do-elements to WAAPI motion components (B2) Convert spinnerTail ::before/::after pseudo-elements to real <span> elements animated by Web Animations API motion components. This is a DOM structure change — consumers targeting ::before/::after in custom CSS will be affected. Changes: - Spinner.types.ts: add internal tailArcClassName/tailArcRtlClassName to SpinnerState - spinnerMotions.ts: add SpinnerTailMotion (sweep), SpinnerArcStartMotion (::before), SpinnerArcEndMotion (::after), all 1.5s curveEasyEase infinite - useSpinnerStyles.styles.ts: replace pseudo-element styles with real element classes (useSpinnerTailArcBaseClassName), move RTL bg to rtlTailArc style, reduced motion hides arcs via display:none and shows static conic-gradient on tail - renderSpinner.tsx: render two arc <span> children inside spinnerTail, each wrapped in their respective motion component; spinnerTail itself wrapped in SpinnerTailMotion - API report updated for new SpinnerState fields BREAKING CHANGE: Spinner DOM structure changed — spinnerTail no longer uses ::before/::after pseudo-elements; arc segments are now real <span> children.
robertpenner
force-pushed
the
refactor/progressbar-spinner-motion
branch
from
267976b to
7f8e3e4
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.
Previous Behavior
New Behavior
Related Issue(s)