Robert Penner

This commit **refactors** the **`ProgressBar` component** within `@fluentui/react-progress` by **migrating its indeterminate animation from CSS-based styling to the new Fluent UI motion components**. This change introduces a new `indeterminateMotion` slot in `ProgressBarSlots`, enabling developers to provide custom motion components for the progress bar's indeterminate state, leveraging the `motionSlot()` utility. It removes legacy CSS animation definitions, updates the `ProgressBar`'s internal logic to use `ProgressBarIndeterminateMotion`, and includes new API documentation and a story demonstrating custom motion integration. This significantly enhances the component's flexibility and aligns it with the project's evolving motion system.

This commit introduces a **new feature** by adding the `motionSlot()` utility function and its corresponding `MotionSlotProps` type to the **`@fluentui-react-motion` package**. This new function provides a dedicated mechanism for handling motion slots within components, serving as a parallel to the existing `presenceMotionSlot()`. The change expands the **motion system's capabilities** by offering developers more granular control and flexibility when defining and applying motion, with comprehensive API documentation and test coverage included.

This commit **refactors** the animation system for the **Popover** and **Menu** components, migrating their slide animations from CSS-based implementations to a more robust and flexible **motion component** approach. It introduces `MenuSurfaceMotion` and `PopoverSurfaceMotion` for default fade and slide effects, alongside a new `usePositioningSlideDirection` hook in `react-positioning` to dynamically determine animation direction. These new motion capabilities are integrated into the core rendering and hook logic of both components, effectively deprecating the older `createSlideStyles` utility. This update significantly enhances the animation capabilities, providing greater control and customization options for component transitions, and includes new stories demonstrating custom and disabled motion.

This commit **introduces a new `MotionRefForwarder` component and `useMotionForwardedRef` hook** within the **`@fluentui/react-motion` package**, centralizing the logic for forwarding refs to animated elements. This **new capability** allows for a standardized approach to handling motion-related ref forwarding across the library. As a result, **`@fluentui/react-dialog`** and **`@fluentui/react-message-bar`** are **refactored** to consume these shared utilities, **eliminating redundant local implementations**. This change **improves code reuse, consistency, and maintainability** for components that integrate motion.

This commit **enhances the `@fluentui-react-positioning` package** by adding the computed `placement` information to the `onPositioningEnd` event. This **new capability** allows consumers of the `usePositioning` hook and `createPositionManager` to react to the final positioning outcome with more context. It involves **updating the event types** (`OnPositioningEndEvent`) and modifying the event emission logic within `createPositionManager` and `usePositioning` to include this detail. This ensures that downstream components can make more informed decisions based on where an element was ultimately positioned, with comprehensive test coverage added for the new functionality and type definitions.

This commit **updates the Storybook documentation** for the **`Stagger` component** within the `react-motion-components-preview` package. It **adds the `outY` prop** to `Slide` components across several `Stagger` stories, including `StaggerExpandableContainer`, `StaggerItemDelay`, `StaggerPresence`, and `StaggerReversed`. This **documentation enhancement** provides clearer examples of how to utilize the `outY` animation property, improving developer understanding of component behavior. The changes are purely illustrative and do not alter the component's core logic, focusing instead on **improving example clarity** for animation choreography.

This commit **refactors** the parameter naming convention for **motion components** across several React packages, primarily `react-motion-components-preview`. Parameters previously prefixed with `from` (e.g., `fromScale`, `fromX`) are now renamed to `out` (e.g., `outScale`, `outX`), and `to` parameters are renamed to `in` (e.g., `toRadius` to `inRadius`). This **refactoring** aims to improve the clarity and consistency of the **motion API**, making it more intuitive to understand the start and end states of animations. This is a **breaking change** for direct consumers of these motion parameters, requiring updates in components like `DialogSurfaceMotion`, `MessageBarMotion`, and `ExpandIconMotion`, as well as in various storybook examples, test cases, and API documentation.

This commit introduces a **new feature**, the **Stagger choreography component**, to the **`@fluentui-react-motion-components-preview`** package. This component enables developers to easily create sequential animations for groups of child elements, enhancing the dynamism and visual appeal of user interfaces. The implementation includes the core `Stagger` component, a `useStaggerItemsVisibility` hook for managing item visibility, and several utility functions for motion component detection and animation calculations. Comprehensive unit tests and a wide array of Storybook examples are provided to demonstrate its various modes, one-way variants (`Stagger.In`, `Stagger.Out`), and integration with other motion components.

This commit **refactors** the **`useAnimationFrame` hook** within the **`@fluentui/react-utilities` package** to **improve its type definitions**. The changes involve refining the callback type for the hook and removing an unused `delay` parameter, leading to **more accurate and robust type checking**. This enhancement ensures a better developer experience and **reduces potential type-related issues** for consumers of the hook. The API documentation for `useAnimationFrame` has also been updated to reflect these improvements.

This commit **refactors** the expand icon motion within the **`NavCategoryItem`** component, part of the **`@fluentui/react-nav`** package. The previous animation logic has been replaced to utilize the dedicated `Rotate` component from `@fluentui/react-motion-components-preview`. This change **standardizes the implementation of motion effects**, promoting reusability and consistency for interactive elements like expanding navigation categories. The update improves the underlying animation logic for the `ExpandIconMotion` without altering the visual behavior for end-users.

This commit **introduces a new feature** by exporting a set of **standard motion atoms**, including `blurAtom`, `fadeAtom`, `rotateAtom`, `scaleAtom`, and `slideAtom`, from the **`@fluentui/react-motion-components-preview`** package. This centralizes common motion primitives, enabling their reuse across the Fluent UI component library. Consequently, the **`@fluentui/react-drawer`** and **`@fluentui/react-message-bar`** packages undergo **refactoring** to consume these new standardized atoms, replacing their previously custom or locally defined motion implementations. This change promotes consistency in animations and improves maintainability by establishing a single source of truth for core motion definitions.

This commit **standardizes the parameter naming convention** across the **`@fluentui-react-motion-components-preview` package**, introducing explicit `from` and `to` prefixes for animation start and end values. This **feature enhancement** provides developers with **more granular control** over the range of motion effects. Specifically, `blurAtom` now accepts `toRadius`, `fadeAtom` uses `toOpacity`, `rotateAtom` standardizes to `fromAngle` and `toAngle`, and `slideAtom` gains `toX` and `toY`. This change improves API consistency and **expands customization options** for motion effects, with corresponding updates to API documentation and test coverage.

This commit **fixes** a **bug** in the **`Collapse` component** within the `@fluentui-react-motion-components-preview` package, specifically addressing an issue where **size animations failed to render correctly when a delay was applied**. The fix ensures that the `fill: both` property is consistently applied to the `sizeEnterAtom`, `sizeExitAtom`, and `whitespaceAtom` animation definitions. This change guarantees that the `Collapse` component's size transitions will now animate smoothly and as expected, even with configured delays. Test expectations were also updated to reflect this corrected animation behavior.

This commit introduces a significant **refactoring** of the **`Collapse` component** within the `react-motion-components-preview` package, simplifying its parameter structure. Parameters are now consolidated into `CollapseParams`, and `CollapseDurations` is introduced to manage animation timings, making `CollapseDelayed` a direct variant of `Collapse`. This **refactoring** effort also includes extensive **new unit tests** for `collapsePresenceFn` and various `collapse-atoms` to ensure reliability and correct behavior. Finally, the **API documentation** and JSDocs for related motion atoms have been updated to reflect these streamlined parameter definitions, improving developer experience and component maintainability.

This commit **refactors** the **`react-message-bar` package** by migrating its animation logic from custom CSS transitions to Fluent UI's new **motion components**. It introduces `fadeAtom`, `slideAtom`, and `MessageBarMotion` to handle entry and exit animations for `MessageBar` and `MessageBarGroup`, leveraging `PresenceGroup` for orchestration. This **migration** also includes the addition of `MotionRefForwarder` and `useMotionForwardedRef` to correctly manage refs with the new motion system. Consequently, older transition properties like `transitionClassName`, `enterStyles`, and `exitStyles` are **deprecated**, ensuring a more consistent and performant animation experience across Fluent UI components. New test cases have been added to verify the motion component integration, which also addresses a ref forwarding bug (#33914).

This commit introduces a **new capability** to the **Fluent UI motion system** by adding the `createMotionComponentVariant` and `createMotionFnVariant` factory functions. Primarily implemented within **`@fluentui/react-motion`** and exported through **`@fluentui/react-components`**, these factories enable developers to easily create customized variations of existing motion components or functions. This **feature enhancement** allows overriding default motion parameters, significantly improving the reusability and flexibility of motion definitions across the library. The change also includes **refactoring** of internal motion definition symbols for clarity and comprehensive **documentation, stories, and tests** to support the new functionality.

This commit **refactors** the **`react-dialog` package** by migrating its `DialogSurfaceMotion` component to utilize the **standard `Scale` motion component** from `@fluentui/react-motion-components-preview`. Previously, `DialogSurfaceMotion` relied on custom keyframe definitions for its animations, leading to potential inconsistencies. This **refactoring** effort **standardizes** the dialog's motion behavior, promoting **consistency** and **maintainability** across Fluent UI components. It ensures that dialog animations now leverage a shared, reusable motion library, aligning with the broader design system's animation principles.

This commit significantly **expands the testing infrastructure** for the **`@fluentui-react-motion-components-preview`** package. It introduces a new set of **atom-level testing utilities** in `atomTestUtils.ts` to validate motion atom structure, keyframe reversal, timing, and custom parameters. These utilities are then leveraged to add comprehensive tests for the `fade-atom`, `scale-atom`, and `slide-atom`, ensuring robust validation of these core motion components. Additionally, a minor **refactoring** was applied to `scalePresenceFn` in `Scale.ts` for improved readability, and a `README.md` was added to document the new testing utilities. This work enhances the reliability and maintainability of the motion system by providing more thorough and standardized testing.

This commit introduces a **bug fix** to prevent **opacity flickering** in animations utilizing the **`fadeAtom` utility** within the **`@fluentui-react-motion-components-preview` package**. The `fadeAtom` function is updated to explicitly set the CSS `animation-fill-mode` property to `both`, resolving visual glitches that occurred during animations, especially those with delays. To ensure the fix's stability and prevent regressions, new test cases have been added to `fade-atom.test.ts` to verify keyframe generation, custom opacity, and fill mode behavior. This improves the visual consistency and reliability of motion components.

This commit introduces a **new capability** to the **`@fluentui-react-motion-components-preview`** package by adding `delay` and `exitDelay` parameters to all motion components. This allows developers to precisely control the start time of entry and exit animations for effects like blur, fade, rotate, scale, and slide. The change impacts core animation functions such as `blurAtom`, `fadeAtom`, and `blurPresenceFn`, along with their corresponding type definitions like `BasePresenceParams`. This enhancement provides greater flexibility in orchestrating complex UI motion sequences, with updated API documentation and test utilities reflecting the new parameters.