refactor(Calendar): migrate to motion components#35666
Open
robertpenner wants to merge 40 commits intomicrosoft:masterfrom
Open
refactor(Calendar): migrate to motion components#35666robertpenner wants to merge 40 commits intomicrosoft:masterfrom
robertpenner wants to merge 40 commits intomicrosoft:masterfrom
Conversation
robertpenner
force-pushed
the
refactor/calendar-motion
branch
from
cf73532 to
36ebeae
Compare
- Copied from MessageBarGroup.motions.tsx for now
…motion components
- Simplified document to reflect completed Phase 1 (slide animations) - Documented Phase 2 remaining work (CalendarPicker button rows and header fade animations) - Clarified migration status with table of completed vs remaining CSS animations - Updated file status table to show Phase 1 completion - Added specific migration approach for Phase 2 tasks
- Use motionTokens.durationSlower (400ms) instead of hardcoded 367ms - Rename fromX/fromY props to outX/outY to match Slide.In API - Simplify distance calculation logic - Add JSDoc comment explaining duration token choice
- Change from FunctionComponent to forwardRef to enable ref support - Required for motion components to properly animate table rows - Add displayName for better debugging
…Slide - Remove unnecessary <div> wrappers inside DirectionalSlide components - CalendarGridRow now accepts refs directly via forwardRef - Fixes invalid DOM nesting (div inside tbody) - Maintains slide animation functionality
…endarDayGrid - Remove CSS keyframe animations for row sliding (now handled by DirectionalSlide) - Remove unused imports (SLIDE_*, DURATION_3, EASING_FUNCTION_1, TRANSITION_ROW_DISAPPEARANCE) - Remove animation-related style classes from weekRow, firstTransitionWeek, lastTransitionWeek - Remove animateBackwards and animationDirection logic from style application - Add comments explaining migration to motion components - Keeps FADE_IN, DURATION_2, EASING_FUNCTION_2 for header animations (not yet migrated)
- Convert DURATION_* from string seconds to millisecond numbers using motion tokens - Update comments to clarify which animations still use CSS vs motion components - Document that DURATION_3 is no longer used (slide animations now use motion) - Note that EASING_FUNCTION_2 has no exact motion token equivalent
- Add @fluentui/react-motion ^9.11.5 - Add @fluentui/react-motion-components-preview ^0.14.2 - Required for DirectionalSlide motion component
…arGridRow Required for server-side rendering compatibility with React.forwardRef
…d rows - Wrap year picker rows with DirectionalSlide motion component - Consistent animation behavior with CalendarMonth button rows - Part of Phase 2 motion migration
…endarPicker - Remove CSS keyframe animations for button row sliding - Now handled by DirectionalSlide motion component in CalendarMonth/CalendarYear - Remove unused imports (SLIDE_*, DURATION_3, EASING_FUNCTION_1) - Keep FADE_IN, DURATION_2, EASING_FUNCTION_2 for header fade animation
…eprecated - Reorganize animations.ts with used vs deprecated sections - Add @deprecated JSDoc tags to unused animation constants - Add eslint-disable for deprecated re-exports in index.ts - Keep FADE_IN, DURATION_2, EASING_FUNCTION_2 (still used for header fade) - Maintain backwards compatibility for external consumers
Add HeaderFade component that wraps Fade.In from react-motion-components-preview. The component uses navigationKey prop to trigger fade animation when the value changes. - Uses motionTokens.durationGentle (~250ms) matching original DURATION_2 (267ms) - Replaces CSS keyframe fade animations with motion component
Replace CSS fade animation on year string header with HeaderFade motion component. - Add HeaderFade wrapper around yearString span in CalendarMonth.tsx
Replace CSS fade animation on year range title with HeaderFade motion component. - Add HeaderFade wrapper around year range spans in CalendarYearTitle - Handles both clickable button and static div cases
…darPicker styles Remove CSS fade animation from useCalendarPickerStyles.styles.ts now that header fade is handled by HeaderFade motion component. - Remove DURATION_2, EASING_FUNCTION_2, FADE_IN imports - Remove animation block from useCurrentItemButtonStyles - Remove animateBackwards destructuring (no longer used)
…mplete Update MOTION_MIGRATION_PLAN.md to reflect completed migration: - All CSS animations migrated to motion components - DirectionalSlide for slide animations - HeaderFade for header fade animations - Animation constants marked as deprecated - Build and tests passing
…t deprecations and improve organization
…o Fade.In motion component - Wrap day label <th> elements in Fade.In in CalendarMonthHeaderRow.tsx - Remove CSS fade animation from useCalendarDayGridStyles.styles.ts - Mark FADE_IN, DURATION_2, EASING_FUNCTION_2 as @deprecated in animations.ts - Update migration plan to mark Phase 3 complete
robertpenner
force-pushed
the
refactor/calendar-motion
branch
from
6d649b2 to
0579a4c
Compare
|
Pull request demo site: URL |
📊 Bundle size report
🤖 This report was generated against ec5736348028dcf9a0fbebb818a79242d23b4e1c |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
change/@fluentui-react-calendar-compat-51c1ee36-d9f0-4d16-9a35-8e1fda9424e3.json
Show resolved
Hide resolved
| ariaHidden={true} | ||
| /> | ||
| {weeks!.slice(1, weeks!.length - 1).map((week: DayInfo[], weekIndex: number) => ( | ||
| <DirectionalSlide key={'firstTransitionWeek_' + firstWeek[0].key} {...{ animationDirection, animateBackwards }}> |
Member
There was a problem hiding this comment.
Why do need a key there? To re-trigger a motion?
...ct-calendar-compat/library/src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts
Outdated
Show resolved
Hide resolved
...eact-components/react-calendar-compat/library/src/components/CalendarMonth/CalendarMonth.tsx
Outdated
Show resolved
Hide resolved
.../react-components/react-calendar-compat/library/src/components/CalendarYear/CalendarYear.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-calendar-compat/library/src/utils/animations.ts
Show resolved
Hide resolved
packages/react-components/react-calendar-compat/library/src/utils/calendarMotions.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-motion/library/src/factories/createPresenceComponent.ts
Outdated
Show resolved
Hide resolved
…te PR Move the MotionComponent type change on .In/.Out to a dedicated PR as requested in code review, since it affects a shared package.
…ndant div keys Remove HeaderFade — the header fade animation was not present on master, so it was adding new behavior rather than migrating existing animations. Also remove redundant key on inner div inside DirectionalSlide wrappers.
robertpenner
force-pushed
the
refactor/calendar-motion
branch
from
c91fb99 to
73903d6
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
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.
This PR migrates Calendar animations from legacy CSS keyframe animations to Fluent UI v9 motion components in the
@fluentui/react-calendar-compatpackage. The main focus is on replacing slide and fade animations in the calendar with reusable motion components, improving maintainability and consistency with Fluent UI v9 standards. All related CSS animations and constants have been removed or deprecated, and the necessary dependencies have been added.Calendar Animation Migration
DirectionalSlide,HeaderFade), including day, month, and year views.animations.tsas@deprecatedfor backwards compatibility.Component Refactoring
CalendarGridRowto useReact.forwardRefto support motion component refs and maintain accessibility.Dependency Updates
@fluentui/react-motionand@fluentui/react-motion-components-previewas dependencies to support new motion components.Package and Documentation Updates
MOTION_MIGRATION_PLAN.mddocumenting the phases, completed work, and validation tasks for the motion migration.