[Drawer] Investigate custom motion components migration

[robertpenner]

Drawer uses one-off motion components currently.

Investigate the challenges of refactoring the Drawer motions to reusable Slide and Fade motion components.

Custom Motion Components

InlineDrawerMotion

• fade + slide
• We could make a standard Slide with animateOpacity for this.

OverlayDrawerMotion

• fade + slide + shadow
• We could make an Elevate motion component for the shadow.

OverlaySurfaceBackdropMotion

• fade
• This is very close to the existing Fade, except for the dynamic durations (see comment below).

Other Considerations

• The slide is RTL-aware, via dir from useFluent().
• The slide distance is configured by a CSS var --fui-Drawer--size.
• Durations are relative to width (see comment below for more detail).

[robertpenner]

Opacity transitions occur in all 3 of the custom motion components for Drawer.

OverlaySurfaceBackdropMotion is very close to the Fade component; the difference is that the duration is dynamic, based on a size parameter:

export const OverlaySurfaceBackdropMotion = createPresenceComponent(({ size }: OverlayDrawerSurfaceMotionParams) => {
  const keyframes = [{ opacity: 0 }, { opacity: 1 }];
  const duration = durations[size];

  return {
    enter: {
      keyframes,
      easing: motionTokens.curveLinear,
      duration,
    },
    exit: {
      keyframes: [...keyframes].reverse(),
      easing: motionTokens.curveLinear,
      duration,
    },
  };
});

The size-to-duration mappings are:

  small: motionTokens.durationGentle,
  medium: motionTokens.durationSlow,
  large: motionTokens.durationSlower,
  full: motionTokens.durationUltraSlow,

Some of these durations are not represented in our Fade variants.