refactor(Rotate): rename enterAngle to angle

Author: robertpenner

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

@@ -7,7 +7,7 @@ interface RotateAtomParams {
   duration: number;
   easing?: string;
   axis?: Axis3D;
-  enterAngle?: number;
+  angle?: number;
   exitAngle?: number;
 }
 
@@ -21,19 +21,19 @@ const createRotateValue = (axis: Axis3D, angle: number): string => {
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @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 angle - The starting rotation angle in degrees. Defaults to -90.
+ * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.
  * @returns A motion atom object with rotate keyframes and the supplied duration and easing.
  */
 export const rotateAtom = ({
   direction,
   duration,
   easing = motionTokens.curveLinear,
   axis = 'y',
-  enterAngle = -90,
-  exitAngle = -enterAngle,
+  angle = -90,
+  exitAngle = -angle,
 }: RotateAtomParams): AtomMotion => {
-  let fromAngle = enterAngle;
+  let fromAngle = angle;
   let toAngle = 0;
 
   if (direction === 'exit') {

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

@@ -11,14 +11,14 @@ import { RotateParams } from './rotate-types';
  * @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 angle - The starting rotation angle in degrees. Defaults to -90.
+ * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.
  * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
  */
 const rotatePresenceFn: PresenceMotionFn<RotateParams> = ({
   axis = 'y',
-  enterAngle = -90,
-  exitAngle = -enterAngle,
+  angle = -90,
+  exitAngle = -angle,
   duration = motionTokens.durationGentle,
   exitDuration = duration,
   easing = motionTokens.curveDecelerateMax,
@@ -31,7 +31,7 @@ const rotatePresenceFn: PresenceMotionFn<RotateParams> = ({
       duration,
       easing,
       axis,
-      enterAngle,
+      angle,
       exitAngle,
     }),
   ];
@@ -42,7 +42,7 @@ const rotatePresenceFn: PresenceMotionFn<RotateParams> = ({
       duration: exitDuration,
       easing: exitEasing,
       axis,
-      enterAngle,
+      angle,
       exitAngle,
     }),
   ];

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

@@ -14,11 +14,11 @@ export type RotateParams = PresenceDuration &
      * The starting rotation angle in degrees.
      * Defaults to -90.
      */
-    enterAngle?: number;
+    angle?: number;
 
     /**
      * The ending rotation angle in degrees.
-     * Defaults to the negation of `enterAngle`.
+     * Defaults to the negation of `angle`.
      */
     exitAngle?: number;
   };

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

@@ -158,7 +158,7 @@ export const CardFlip = () => {
             <Rotate
               visible={!flippedCards.has(card.id)}
               axis="Y"
-              enterAngle={0}
+              angle={0}
               exitAngle={180}
               duration={600}
               easing="cubic-bezier(0.4, 0, 0.2, 1)"
@@ -174,7 +174,7 @@ export const CardFlip = () => {
             <Rotate
               visible={flippedCards.has(card.id)}
               axis="Y"
-              enterAngle={-180}
+              angle={-180}
               exitAngle={0}
               duration={600}
               easing="cubic-bezier(0.4, 0, 0.2, 1)"

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

@@ -65,7 +65,7 @@ const patterns = [
     icon: '↔️',
     color: tokens.colorPaletteBlueForeground2,
     axis: 'Y' as const,
-    enterAngle: 180,
+    angle: 180,
     easing: 'ease-out',
     duration: 600,
   },
@@ -76,7 +76,7 @@ const patterns = [
     icon: '↕️',
     color: tokens.colorPaletteGreenForeground2,
     axis: 'X' as const,
-    enterAngle: 180,
+    angle: 180,
     easing: 'ease-out',
     duration: 600,
   },
@@ -87,7 +87,7 @@ const patterns = [
     icon: '🔄',
     color: tokens.colorPaletteRedForeground2,
     axis: 'Z' as const,
-    enterAngle: 360,
+    angle: 360,
     easing: 'ease-in-out',
     duration: 800,
   },
@@ -98,7 +98,7 @@ const patterns = [
     icon: '〰️',
     color: tokens.colorPaletteYellowForeground2,
     axis: 'X' as const,
-    enterAngle: 15,
+    angle: 15,
     easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
     duration: 400,
   },
@@ -109,7 +109,7 @@ const patterns = [
     icon: '👀',
     color: tokens.colorPaletteTealForeground2,
     axis: 'Y' as const,
-    enterAngle: -15,
+    angle: -15,
     easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
     duration: 400,
   },
@@ -120,7 +120,7 @@ const patterns = [
     icon: '📄',
     color: tokens.colorPaletteDarkOrangeForeground2,
     axis: 'X' as const,
-    enterAngle: -90,
+    angle: -90,
     easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
     duration: 500,
   },
@@ -186,7 +186,7 @@ export const CommonPatterns = () => {
             <Rotate
               visible={activePatterns.has(pattern.id)}
               axis={pattern.axis}
-              enterAngle={pattern.enterAngle}
+              angle={pattern.angle}
               duration={pattern.duration}
               easing={pattern.easing}
             >

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

@@ -51,7 +51,7 @@ export const Default = (props: React.ComponentProps<typeof Rotate>) => {
   const [perspective, setPerspective] = React.useState<string>('1000px');
   const [duration, setDuration] = React.useState<number>(500);
   const [axis, setAxis] = React.useState<Axis3D>('y');
-  const [enterAngle, setEnterAngle] = React.useState<number>(-90);
+  const [angle, setEnterAngle] = React.useState<number>(-90);
 
   const perspectiveSliderId = useId();
   const durationSliderId = useId();
@@ -100,13 +100,13 @@ export const Default = (props: React.ComponentProps<typeof Rotate>) => {
           </RadioGroup>
         </Field>
 
-        <label htmlFor={enterAngleSliderId}>Enter Angle: {enterAngle}°</label>
+        <label htmlFor={enterAngleSliderId}>Enter Angle: {angle}°</label>
         <div className={classes.sliderWrapper}>
           <Label aria-hidden>{angleMin}</Label>
           <Slider
             min={angleMin}
             max={angleMax}
-            defaultValue={enterAngle}
+            defaultValue={angle}
             id={enterAngleSliderId}
             onChange={(_, data) => {
               setEnterAngle(data.value);
@@ -149,7 +149,7 @@ export const Default = (props: React.ComponentProps<typeof Rotate>) => {
       <Rotate
         visible={visible}
         axis={axis}
-        enterAngle={enterAngle}
+        angle={angle}
         duration={duration}
         easing={curveSpringRelaxed}
         onMotionFinish={() => autoplay && setVisible(v => !v)}

packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDescription.md

@@ -7,7 +7,7 @@ import { Rotate } from '@fluentui/react-motion-components-preview';
 
 function Component({ visible }) {
   return (
-    <Rotate visible={visible} fromY={-90} duration={600}>
+    <Rotate visible={visible} axis="x" angle={45}>
       <div>Content</div>
     </Rotate>
   );