fix(motion): make createPresenceComponentVariant support motion groups

[robertpenner]

Background and Motivation

• When we added motion groups to motion components, i.e. arrays of motion atoms for enter and exit:
  • The createPresenceComponentVariant function was not able to handle them correctly.
  • See issue Motion component variant API needs simplification and to support motion groups #32893
• So we developed a more functional approach for creating presence variants:
  • This involved creating a helper function for each presence, e.g. createCollapsePresence, and chaining it with createPresenceComponent
  • See PR refactor(motion): simplify variant creation, starting with Collapse #32939
• We started using motion groups extensively, so we refactored away from createPresenceComponentVariant to the new variant creation approach.
  • This left createPresenceComponentVariant as essentially a lame duck: we had published it so we couldn't remove it, only deprecate.

Previous Behavior

• The current functional variant approach has more boilerplate and moving parts than createPresenceComponentVariant.
  • Devs have to understand how to find the relevant helper function such as createCollapsePresence and pipe that result into createPresenceComponent.
  • So it is more complex to teach people how to create variants, compared to the old method.
  • This isn't horrible DX, but what if we could return to the simplicity of createPresenceComponentVariant?

New Behavior

• With the insights gained from the functional approach, this PR re-implements createPresenceComponentVariant to work with motion groups.
• We can teach createPresenceComponentVariant in documentation again: celebration, not deprecation.
• We can simplify presence implementations by refactoring back to createPresenceComponentVariant.

Example of simplified variant creation

Before:

// two functions imported and called
export const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));

After:

// one function imported and called
export const FadeRelaxed = createPresenceComponentVariant(Fade, { enterDuration: motionTokens.durationGentle });

Future Work

Work is underway to migrate Fade and Scale back to createPresenceComponentVariant:

• It simplifies the implementation code and storybook examples, making it easier to teach and maintain.
• See follow-up PR refactor(motion): simplify Fade & Scale variant creation with createPresenceComponentVariant #34042

Related Issue(s)

• Addresses Motion component variant API needs simplification and to support motion groups #32893 with a better fix than before

[github-actions]

Pull request demo site: URL

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.225 MB 308.799 kB	1.225 MB 308.762 kB	-83 B -37 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-accordion Accordion (including children components)	107.568 kB 33.01 kB
react-components react-components: Button, FluentProvider & webLightTheme	69.638 kB 20.24 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	225.885 kB 65.402 kB
react-components react-components: FluentProvider & webLightTheme	44.473 kB 14.597 kB
react-dialog Dialog (including children components)	101.691 kB 30.584 kB
react-motion @fluentui/react-motion - createMotionComponent()	4.928 kB 2.119 kB
react-motion @fluentui/react-motion - createPresenceComponent()	5.779 kB 2.495 kB
react-motion @fluentui/react-motion - PresenceGroup	1.714 kB 819 B
react-portal-compat PortalCompatProvider	8.39 kB 2.64 kB
react-timepicker-compat TimePicker	109.01 kB 36.221 kB
react-toast Toast (including Toaster)	101.793 kB 30.657 kB
react-tree FlatTree	148.348 kB 42.568 kB
react-tree PersonaFlatTree	149.093 kB 42.712 kB
react-tree PersonaTree	145.299 kB 41.568 kB
react-tree Tree	144.56 kB 41.443 kB

_{🤖 This report was generated against 428d26e1ec1e331df5e7b68320a9ec06a2944a11}