Rename motion component variants ...Exaggerated to ...Relaxed (#33182)

Author: pixel-perfectionist

change/@fluentui-react-motion-components-preview-ce97692b-d797-47e0-ad42-4d0561a9f7da.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Rename motion component variants ...Exaggerated to ...Relaxed",
+  "packageName": "@fluentui/react-motion-components-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md

@@ -16,7 +16,7 @@ export const Collapse: PresenceComponent<CollapseRuntimeParams>;
 export const CollapseDelayed: PresenceComponent<CollapseRuntimeParams>;
 
 // @public (undocumented)
-export const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>;
+export const CollapseRelaxed: PresenceComponent<CollapseRuntimeParams>;
 
 // @public (undocumented)
 export type CollapseRuntimeParams = {
@@ -40,7 +40,7 @@ export const createFadePresence: PresenceMotionCreator<FadeVariantParams>;
 export const Fade: PresenceComponent<    {}>;
 
 // @public (undocumented)
-export const FadeExaggerated: PresenceComponent<    {}>;
+export const FadeRelaxed: PresenceComponent<    {}>;
 
 // @public (undocumented)
 export const FadeSnappy: PresenceComponent<    {}>;
@@ -51,7 +51,7 @@ animateOpacity?: boolean | undefined;
 }>;
 
 // @public (undocumented)
-export const ScaleExaggerated: PresenceComponent<    {
+export const ScaleRelaxed: PresenceComponent<    {
 animateOpacity?: boolean | undefined;
 }>;
 

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

@@ -114,7 +114,7 @@ export const CollapseSnappy = createPresenceComponent(
   createCollapsePresence({ enterDuration: motionTokens.durationFast }),
 );
 
-export const CollapseExaggerated = createPresenceComponent(
+export const CollapseRelaxed = createPresenceComponent(
   createCollapsePresence({ enterDuration: motionTokens.durationSlower }),
 );
 

packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Fade, FadeExaggerated, FadeSnappy } from './Fade';
+import { Fade, FadeRelaxed, FadeSnappy } from './Fade';
 import { render } from '@testing-library/react';
 import { motionTokens } from '@fluentui/react-motion';
 import { mockAnimation } from '../../testing/testUtils';
@@ -56,10 +56,10 @@ describe('Fade motion component', () => {
     );
   });
 
-  it('should render Exaggerated variant of Fade component with correct opacity keyframes, duration and easing', () => {
-    const { rerender } = render(<FadeExaggerated visible={false}>{testElement}</FadeExaggerated>);
+  it('should render Relaxed variant of Fade component with correct opacity keyframes, duration and easing', () => {
+    const { rerender } = render(<FadeRelaxed visible={false}>{testElement}</FadeRelaxed>);
 
-    rerender(<FadeExaggerated visible={true}>{testElement}</FadeExaggerated>);
+    rerender(<FadeRelaxed visible={true}>{testElement}</FadeRelaxed>);
 
     expect(animateSpy).toHaveBeenCalledWith(
       [{ opacity: 0 }, { opacity: 1 }],

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

@@ -31,6 +31,4 @@ export const Fade = createPresenceComponent(createFadePresence());
 
 export const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));
 
-export const FadeExaggerated = createPresenceComponent(
-  createFadePresence({ enterDuration: motionTokens.durationGentle }),
-);
+export const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));

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

@@ -40,7 +40,7 @@ export const ScaleSnappy = createPresenceComponentVariant(Scale, {
   exit: { duration: motionTokens.durationFast, easing: motionTokens.curveAccelerateMax },
 });
 
-export const ScaleExaggerated = createPresenceComponentVariant(Scale, {
+export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
   enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveDecelerateMax },
   exit: { duration: motionTokens.durationGentle, easing: motionTokens.curveAccelerateMax },
 });

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

@@ -1,11 +1,11 @@
 export {
   Collapse,
   CollapseSnappy,
-  CollapseExaggerated,
+  CollapseRelaxed,
   CollapseDelayed,
   createCollapsePresence,
   createCollapseDelayedPresence,
 } from './components/Collapse';
 export type { CollapseRuntimeParams } from './components/Collapse';
-export { Fade, FadeSnappy, FadeExaggerated, createFadePresence } from './components/Fade';
-export { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';
+export { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';
+export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';

packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseExaggerated.stories.md

@@ -0,0 +1 @@
+The relaxed variant of `Collapse` is available as `CollapseRelaxed` component.

packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.stories.md

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { Field, makeStyles, tokens, Switch } from '@fluentui/react-components';
-import { FadeExaggerated } from '@fluentui/react-motion-components-preview';
+import { CollapseRelaxed } from '@fluentui/react-motion-components-preview';
+import * as React from 'react';
 
-import description from './FadeExaggerated.stories.md';
+import description from './CollapseRelaxed.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -37,7 +37,7 @@ const LoremIpsum = () => (
   </>
 );
 
-export const Exaggerated = () => {
+export const Relaxed = () => {
   const classes = useClasses();
   const [visible, setVisible] = React.useState<boolean>(false);
 
@@ -49,16 +49,16 @@ export const Exaggerated = () => {
         </Field>
       </div>
 
-      <FadeExaggerated visible={visible}>
+      <CollapseRelaxed visible={visible}>
         <div className={classes.card}>
           <LoremIpsum />
         </div>
-      </FadeExaggerated>
+      </CollapseRelaxed>
     </div>
   );
 };
 
-Exaggerated.parameters = {
+Relaxed.parameters = {
   docs: {
     description: {
       story: description,

packages/react-components/react-motion-components-preview/stories/src/Fade/FadeExaggerated.stories.tsx packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.stories.tsx

@@ -4,7 +4,7 @@ import CollapseDescription from './CollapseDescription.md';
 export { Default } from './CollapseDefault.stories';
 export { Horizontal } from './CollapseHorizontal.stories';
 export { Snappy } from './CollapseSnappy.stories';
-export { Exaggerated } from './CollapseExaggerated.stories';
+export { Relaxed } from './CollapseRelaxed.stories';
 export { Customization } from './CollapseCustomization.stories';
 export { Delayed } from './CollapseDelayed.stories';
 

packages/react-components/react-motion-components-preview/stories/src/Collapse/index.stories.ts

@@ -0,0 +1 @@
+The relaxed variant of `Fade` is available as `FadeRelaxed` component.

packages/react-components/react-motion-components-preview/stories/src/Fade/FadeExaggerated.stories.md

@@ -1,8 +1,8 @@
-import { Field, makeStyles, tokens, Switch } from '@fluentui/react-components';
-import { CollapseExaggerated } from '@fluentui/react-motion-components-preview';
 import * as React from 'react';
+import { Field, makeStyles, tokens, Switch } from '@fluentui/react-components';
+import { FadeRelaxed } from '@fluentui/react-motion-components-preview';
 
-import description from './CollapseExaggerated.stories.md';
+import description from './FadeRelaxed.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -37,7 +37,7 @@ const LoremIpsum = () => (
   </>
 );
 
-export const Exaggerated = () => {
+export const Relaxed = () => {
   const classes = useClasses();
   const [visible, setVisible] = React.useState<boolean>(false);
 
@@ -49,16 +49,16 @@ export const Exaggerated = () => {
         </Field>
       </div>
 
-      <CollapseExaggerated visible={visible}>
+      <FadeRelaxed visible={visible}>
         <div className={classes.card}>
           <LoremIpsum />
         </div>
-      </CollapseExaggerated>
+      </FadeRelaxed>
     </div>
   );
 };
 
-Exaggerated.parameters = {
+Relaxed.parameters = {
   docs: {
     description: {
       story: description,

packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.stories.md

@@ -3,7 +3,7 @@ import FadeDescription from './FadeDescription.md';
 
 export { Default } from './FadeDefault.stories';
 export { Snappy } from './FadeSnappy.stories';
-export { Exaggerated } from './FadeExaggerated.stories';
+export { Relaxed } from './FadeRelaxed.stories';
 export { Customization } from './FadeCustomization.stories';
 
 export default {

packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseExaggerated.stories.tsx packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.stories.tsx

@@ -0,0 +1 @@
+The relaxed variant of `Scale` is available as `ScaleRelaxed` component.

packages/react-components/react-motion-components-preview/stories/src/Fade/index.stories.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Field, makeStyles, tokens, Switch } from '@fluentui/react-components';
-import { ScaleExaggerated } from '@fluentui/react-motion-components-preview';
+import { ScaleRelaxed } from '@fluentui/react-motion-components-preview';
 
-import description from './ScaleExaggerated.stories.md';
+import description from './ScaleRelaxed.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -37,7 +37,7 @@ const LoremIpsum = () => (
   </>
 );
 
-export const Exaggerated = () => {
+export const Relaxed = () => {
   const classes = useClasses();
   const [visible, setVisible] = React.useState<boolean>(true);
 
@@ -49,16 +49,16 @@ export const Exaggerated = () => {
         </Field>
       </div>
 
-      <ScaleExaggerated visible={visible}>
+      <ScaleRelaxed visible={visible}>
         <div className={classes.card}>
           <LoremIpsum />
         </div>
-      </ScaleExaggerated>
+      </ScaleRelaxed>
     </div>
   );
 };
 
-Exaggerated.parameters = {
+Relaxed.parameters = {
   docs: {
     description: {
       story: description,

packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleExaggerated.stories.md

@@ -3,7 +3,7 @@ import ScaleDescription from './ScaleDescription.md';
 
 export { Default } from './ScaleDefault.stories';
 export { Snappy } from './ScaleSnappy.stories';
-export { Exaggerated } from './ScaleExaggerated.stories';
+export { Relaxed } from './ScaleRelaxed.stories';
 export { Customization } from './ScaleCustomization.stories';
 
 export default {