feat(Rotate): enhance design token usage and improve accessibility in stories

Author: robertpenner

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

@@ -7,21 +7,21 @@ const useClasses = makeStyles({
   container: {
     display: 'flex',
     flexDirection: 'column',
-    gap: '20px',
-    padding: '20px',
+    gap: tokens.spacingVerticalXL, // 20px
+    padding: tokens.spacingVerticalXL, // 20px
     maxWidth: '1000px',
   },
   controls: {
     display: 'flex',
-    gap: '10px',
+    gap: tokens.spacingHorizontalMNudge, // 10px
     alignItems: 'center',
     flexWrap: 'wrap',
-    marginBottom: '20px',
+    marginBottom: tokens.spacingVerticalXL, // 20px
   },
   patternsGrid: {
     display: 'grid',
     gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
-    gap: '20px',
+    gap: tokens.spacingVerticalXL, // 20px
   },
   cardWrapper: {
     perspective: '500px',
@@ -92,7 +92,7 @@ const patterns: RotatePattern[] = [
     angle: 180,
     easing: curveSpringRelaxed,
     exitEasing: motionTokens.curveDecelerateMid,
-    duration: 2000,
+    duration: motionTokens.durationUltraSlow * 4, // 2000ms = 500ms * 4
     exitDuration: motionTokens.durationUltraSlow,
   },
   {
@@ -105,7 +105,7 @@ const patterns: RotatePattern[] = [
     angle: 180,
     easing: curveSpringRelaxed,
     exitEasing: motionTokens.curveDecelerateMid,
-    duration: 2000,
+    duration: motionTokens.durationUltraSlow * 4, // 2000ms = 500ms * 4
     exitDuration: motionTokens.durationUltraSlow,
   },
   {
@@ -118,7 +118,7 @@ const patterns: RotatePattern[] = [
     angle: 180,
     easing: curveSpringRelaxed,
     exitEasing: motionTokens.curveDecelerateMid,
-    duration: 2000,
+    duration: motionTokens.durationUltraSlow * 4, // 2000ms = 500ms * 4
     exitDuration: motionTokens.durationUltraSlow,
   },
 ];
@@ -152,7 +152,9 @@ export const CardFlip = () => {
   return (
     <div className={classes.container}>
       <div className={classes.controls}>
-        <Button onClick={toggleAllPatterns}>Flip All</Button>
+        <Button onClick={toggleAllPatterns} aria-label="Toggle all rotation patterns">
+          Flip All
+        </Button>
       </div>
 
       <div className={classes.patternsGrid}>
@@ -168,7 +170,20 @@ export const CardFlip = () => {
               exitDuration={pattern.exitDuration}
               animateOpacity={false}
             >
-              <Card className={classes.patternCard} onClick={() => togglePattern(pattern.id)} appearance="outline">
+              <Card
+                className={classes.patternCard}
+                onClick={() => togglePattern(pattern.id)}
+                appearance="outline"
+                role="button"
+                tabIndex={0}
+                aria-label={`Toggle ${pattern.name} rotation`}
+                onKeyDown={e => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    togglePattern(pattern.id);
+                  }
+                }}
+              >
                 <div className={classes.demoIcon} style={{ backgroundColor: pattern.color }}>
                   {pattern.icon}
                 </div>

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

@@ -1,5 +1,16 @@
 import * as React from 'react';
-import { Field, makeStyles, tokens, Switch, useId, Label, Slider, RadioGroup, Radio } from '@fluentui/react-components';
+import {
+  Field,
+  makeStyles,
+  tokens,
+  Switch,
+  useId,
+  Label,
+  Slider,
+  RadioGroup,
+  Radio,
+  motionTokens,
+} from '@fluentui/react-components';
 import { Rotate } from '@fluentui/react-motion-components-preview';
 import { Axis3D } from '../../../library/src/atoms/rotate-atom';
 
@@ -9,13 +20,13 @@ const useClasses = makeStyles({
   container: {
     display: 'grid',
     gridTemplate: `"controls ." "card card" / 1fr 1fr`,
-    gap: '20px 10px',
+    gap: `${tokens.spacingVerticalXL} ${tokens.spacingHorizontalMNudge}`, // 20px 10px
     // perspective: '1000px',
     overflow: 'clip',
   },
   card: {
     gridArea: 'card',
-    padding: '10px',
+    padding: tokens.spacingHorizontalMNudge, // 10px
   },
   controls: {
     display: 'flex',
@@ -25,7 +36,7 @@ const useClasses = makeStyles({
     border: `${tokens.strokeWidthThicker} solid ${tokens.colorNeutralForeground3}`,
     borderRadius: tokens.borderRadiusMedium,
     boxShadow: tokens.shadow16,
-    padding: '10px',
+    padding: tokens.spacingHorizontalMNudge, // 10px
   },
   field: {
     flex: 1,
@@ -49,7 +60,7 @@ export const Default = (props: React.ComponentProps<typeof Rotate>) => {
   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 [duration, setDuration] = React.useState<number>(motionTokens.durationUltraSlow); // 500ms
   const [axis, setAxis] = React.useState<Axis3D>('y');
   const [angle, setEnterAngle] = React.useState<number>(-90);
 
@@ -59,8 +70,8 @@ export const Default = (props: React.ComponentProps<typeof Rotate>) => {
 
   const perspectiveMin = 200;
   const perspectiveMax = 2000;
-  const durationMin = 50;
-  const durationMax = 1000;
+  const durationMin = motionTokens.durationUltraFast; // 50ms
+  const durationMax = motionTokens.durationUltraSlow * 2; // 1000ms
   const angleMin = -180;
   const angleMax = 180;
 
@@ -114,7 +125,7 @@ export const Default = (props: React.ComponentProps<typeof Rotate>) => {
           <Slider
             min={durationMin}
             max={durationMax}
-            defaultValue={duration}
+            defaultValue={motionTokens.durationUltraSlow} // 500ms
             id={durationSliderId}
             onChange={(_, data) => {
               setDuration(data.value);