feat(Rotate): refactor Rotate types

Author: robertpenner

packages/react-components/react-motion-components-preview/library/src/atoms/rotate-atom.ts

@@ -12,7 +12,7 @@ interface RotateAtomParams {
 }
 
 const createRotateValue = (axis: Axis3D, angle: number): string => {
-  return `${axis} ${angle}deg`;
+  return `${axis.toLowerCase()} ${angle}deg`;
 };
 
 /**

packages/react-components/react-motion-components-preview/library/src/components/Rotate/Rotate.ts

@@ -1,60 +1,20 @@
 import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';
 import { fadeAtom } from '../../atoms/fade-atom';
-import { rotateAtom, Axis3D } from '../../atoms/rotate-atom';
+import { rotateAtom } from '../../atoms/rotate-atom';
+import { RotateParams } from './rotate-types';
 
 /**
- * Parameters for configuring the Rotate motion.
+ * Define a presence motion for rotate in/out
+ *
+ * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.
+ * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.
+ * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.
+ * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.
+ * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
+ * @param enterAngle - The starting rotation angle in degrees. Defaults to -90.
+ * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `enterAngle`.
+ * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
  */
-export type RotateParams = {
-  /**
-   * Time (ms) for the enter transition (rotate-in).
-   * Defaults to `motionTokens.durationGentle`.
-   */
-  duration?: number;
-
-  /**
-   * Easing curve for the enter transition (rotate-in).
-   * Defaults to `motionTokens.curveDecelerateMax`.
-   */
-  easing?: string;
-
-  /**
-   * Time (ms) for the exit transition (rotate-out).
-   * Defaults to the value of `duration`.
-   */
-  exitDuration?: number;
-
-  /**
-   * Easing curve for the exit transition (rotate-out).
-   * Defaults to `motionTokens.curveAccelerateMax`.
-   */
-  exitEasing?: string;
-
-  /**
-   * The axis of rotation: 'X', 'Y', or 'Z'.
-   * Defaults to 'Y'.
-   */
-  axis?: Axis3D;
-
-  /**
-   * The starting rotation angle in degrees.
-   * Defaults to -90.
-   */
-  enterAngle?: number;
-
-  /**
-   * The ending rotation angle in degrees.
-   * Defaults to the negation of `enterAngle`.
-   */
-  exitAngle?: number;
-
-  /**
-   * Whether to animate the opacity during the rotation.
-   * Defaults to `true`.
-   */
-  animateOpacity?: boolean;
-};
-
 const rotatePresenceFn: PresenceMotionFn<RotateParams> = ({
   axis = 'y',
   enterAngle = -90,
@@ -98,5 +58,5 @@ const rotatePresenceFn: PresenceMotionFn<RotateParams> = ({
   };
 };
 
-// Create a presence motion component to rotate an element around a single axis (X, Y, or Z).
+// Create a presence motion component to rotate an element around a single axis (x, y, or z).
 export const Rotate = createPresenceComponent(rotatePresenceFn);

packages/react-components/react-motion-components-preview/library/src/components/Rotate/rotate-types.ts

@@ -0,0 +1,24 @@
+import type { PresenceDuration, PresenceEasing, AnimateOpacity } from '../../types';
+import type { Axis3D } from '../../atoms/rotate-atom';
+
+export type RotateParams = PresenceDuration &
+  PresenceEasing &
+  AnimateOpacity & {
+    /**
+     * The axis of rotation: 'x', 'y', or 'z'.
+     * Defaults to 'y'.
+     */
+    axis?: Axis3D;
+
+    /**
+     * The starting rotation angle in degrees.
+     * Defaults to -90.
+     */
+    enterAngle?: number;
+
+    /**
+     * The ending rotation angle in degrees.
+     * Defaults to the negation of `enterAngle`.
+     */
+    exitAngle?: number;
+  };

packages/react-components/react-motion-components-preview/library/src/index.ts

@@ -3,4 +3,4 @@ export { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';
 export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';
 export { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';
 export { Blur } from './components/Blur';
-export { Rotate, type RotateParams } from './components/Rotate';
+export { Rotate } from './components/Rotate';

packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.stories.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Field, makeStyles, tokens, Switch, useId, Label, Slider, RadioGroup, Radio } from '@fluentui/react-components';
-import { Rotate, RotateParams } from '@fluentui/react-motion-components-preview';
+import { Rotate } from '@fluentui/react-motion-components-preview';
+import { Axis3D } from '../../../library/src/atoms/rotate-atom';
 
 // import description from './ExperimentsRotate.stories.md';
 
@@ -10,6 +11,7 @@ const useClasses = makeStyles({
     gridTemplate: `"controls ." "card card" / 1fr 1fr`,
     gap: '20px 10px',
     // perspective: '1000px',
+    overflow: 'clip',
   },
   card: {
     gridArea: 'card',
@@ -42,14 +44,13 @@ const LoremIpsum = () => (
   </>
 );
 
-// export const Default = (props: React.PropsWithChildren<typeof Rotate>) => {
-export const Default = (props: RotateParams) => {
+export const Default = (props: React.ComponentProps<typeof Rotate>) => {
   const classes = useClasses();
   const [visible, setVisible] = React.useState<boolean>(false);
   const [autoplay, setAutoplay] = React.useState<boolean>(false);
   const [perspective, setPerspective] = React.useState<string>('1000px');
   const [duration, setDuration] = React.useState<number>(500);
-  const [axis, setAxis] = React.useState<'X' | 'Y' | 'Z'>('Y');
+  const [axis, setAxis] = React.useState<Axis3D>('y');
   const [enterAngle, setEnterAngle] = React.useState<number>(-90);
 
   const perspectiveSliderId = useId();
@@ -92,14 +93,10 @@ export const Default = (props: RotateParams) => {
 
         <Field className={classes.field}>
           <Label>Rotation Axis</Label>
-          <RadioGroup 
-            value={axis} 
-            onChange={(_, data) => setAxis(data.value as 'X' | 'Y' | 'Z')}
-            layout="horizontal"
-          >
-            <Radio value="X" label="X" />
-            <Radio value="Y" label="Y" />
-            <Radio value="Z" label="Z" />
+          <RadioGroup value={axis} onChange={(_, data) => setAxis(data.value as Axis3D)} layout="horizontal">
+            <Radio value="x" label="x" />
+            <Radio value="y" label="y" />
+            <Radio value="z" label="z" />
           </RadioGroup>
         </Field>