refactor(motion-components): improve parameter naming from 'from/to' to 'out/in'

[robertpenner]

Problem

• Motion components have parameters like fromX and toX, fromScale and toScale.
• These names read well with enter transitions, but they became confusing with exit transitions.

For example, here's how these parameters work for a 2-way Slide between:

• 20px when visible is false (the out state)
• 5px when visible is true (the in state)

<Slide fromX="20px" toX="5" visible={isVisible}>

The problem arises when we use the one-way motions <Slide.In> and <Slide.Out>, which are in opposing directions:

// Intuitive: the enter slide is from 20px to 5px
<Slide.In fromX="20px" toX="5">

// Confusing: the exit slide is visually "from" 5px to 20px
<Slide.Out fromX="20px" toX="5">

So the labels could be reversed from user expectations.

Q: Why not use Slide.In for both? Why use Slide.Out?
A: One practical reason: Slide has a default auto-fade, so Slide.In will fade in and Slide.Out will fade out.

Solution

To clarify what the parameters do, we're renaming them according to their state: in or out:

• Slide: fromX/toX → outX/inX
• Collapse: fromSize → outSize
• Blur: fromRadius/toRadius → outRadius/inRadius
• Fade: fromOpacity/toOpacity → outOpacity/inOpacity
• Rotate: fromAngle/toAngle → outAngle/inAngle
• Scale: fromScale/toScale → outScale/inScale

Now outX="20px" clearly means "the X value after exiting", making it unambiguous for both Slide.In or Slide.Out.

Testing

• Automated tests updated
• TypeScript flagged the call sites in other packages (react-drawer, etc.) that needed to update to the new names

[github-actions]

Pull request demo site: URL

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-accordion Accordion (including children components)	107.34 kB 32.856 kB	107.334 kB 32.86 kB	-6 B 4 B
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	237.274 kB 68.562 kB	237.268 kB 68.56 kB	-6 B -2 B
react-components react-components: entire library	1.285 MB 321.877 kB	1.285 MB 321.872 kB	-22 B -5 B
react-dialog Dialog (including children components)	102.818 kB 30.666 kB	102.812 kB 30.665 kB	-6 B -1 B
react-toast Toast (including Toaster)	103.3 kB 30.898 kB	103.294 kB 30.897 kB	-6 B -1 B
react-tree FlatTree	148.374 kB 42.409 kB	148.368 kB 42.409 kB	-6 B
react-tree PersonaFlatTree	150.2 kB 42.79 kB	150.194 kB 42.789 kB	-6 B -1 B
react-tree PersonaTree	146.261 kB 41.608 kB	146.255 kB 41.608 kB	-6 B
react-tree Tree	144.441 kB 41.25 kB	144.435 kB 41.249 kB	-6 B -1 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	70.269 kB 20.055 kB
react-components react-components: FluentProvider & webLightTheme	43.608 kB 14.165 kB
react-message-bar MessageBar (all components)	24.137 kB 8.901 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-timepicker-compat TimePicker	109.023 kB 36.011 kB

_{🤖 This report was generated against d530179b27fd00f17b29d35e9db88b6105201f7b}