feat(motion): add extended support for reduced motion

[layershifter]

Previous Behavior

No way to customize motions' behavior when reduced motion is enabled.

New Behavior

• Adds reducedMotion option to AtomMotion type.
• Tests added
• Story added

By default, when reduced motion is enabled the duration of the animation is set to 1ms. reducedMotion allows to customize a reduced motion version of the animation:

const Motion = createPresenceComponent({
  enter: {
    keyframes: [
      { opacity: 0, transform: 'scale(0)' },
      { opacity: 1, transform: 'scale(1)' },
    ],
    duration: 300,

    /* 💡reduced motion will not have scale animation */
    reducedMotion: {
      keyframes: [{ opacity: 0 }, { opacity: 1 }],
      duration: 1000,
    },
  },
  exit: {
    /* ... */
  },
});

💡Note, if keyframes are provided, they will be used instead of the regular keyframes.

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-accordion Accordion (including children components)	106.71 kB 32.714 kB	106.791 kB 32.742 kB	81 B 28 B
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	220.62 kB 63.913 kB	220.701 kB 63.944 kB	81 B 31 B
react-components react-components: entire library	1.163 MB 291.211 kB	1.163 MB 291.258 kB	81 B 47 B
react-dialog Dialog (including children components)	100.276 kB 30.064 kB	100.357 kB 30.096 kB	81 B 32 B
react-motion @fluentui/react-motion - createMotionComponent()	4.293 kB 1.895 kB	4.378 kB 1.929 kB	85 B 34 B
react-motion @fluentui/react-motion - createPresenceComponent()	5.024 kB 2.226 kB	5.103 kB 2.258 kB	79 B 32 B
react-toast Toast (including Toaster)	98.326 kB 29.588 kB	98.407 kB 29.627 kB	81 B 39 B
react-tree FlatTree	145.092 kB 41.692 kB	145.173 kB 41.732 kB	81 B 40 B
react-tree PersonaFlatTree	145.78 kB 41.805 kB	145.861 kB 41.849 kB	81 B 44 B
react-tree PersonaTree	142.011 kB 40.622 kB	142.092 kB 40.655 kB	81 B 33 B
react-tree Tree	141.323 kB 40.519 kB	141.404 kB 40.542 kB	81 B 23 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	69.21 kB 20.174 kB
react-components react-components: FluentProvider & webLightTheme	44.447 kB 14.59 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	107.39 kB 35.763 kB

_{🤖 This report was generated against c62fbbf02bc63e0d808e40a227ad0eec74f4beef}

[github-actions]

Pull request demo site: URL

[fabricteam]

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 2 screenshots

Image Name	Diff(in Pixels)	Image Type
Avatar Converged.badgeMask.chromium.png	38	Changed
Avatar Converged.Badge Mask RTL.chromium.png	20	Changed

Drawer 1 screenshots

Image Name	Diff(in Pixels)	Image Type
Drawer.overlay drawer full.chromium.png	7	Changed