From b213215ae822fbfa0ac771b6428b969bd6c199f9 Mon Sep 17 00:00:00 2001
From: Alexander Katrukhin <olkatruk@microsoft.com>
Date: Thu, 31 Oct 2024 08:19:30 -0400
Subject: [PATCH] feat: Rename motion component variants ...Exaggerated to
 ...Relaxed

---
 ...eview-ce97692b-d797-47e0-ad42-4d0561a9f7da.json |  7 +++++++
 .../etc/react-motion-components-preview.api.md     |  6 +++---
 .../library/src/components/Collapse/Collapse.ts    |  2 +-
 .../library/src/components/Fade/Fade.test.tsx      |  8 ++++----
 .../library/src/components/Fade/Fade.ts            |  4 +---
 .../library/src/components/Scale/Scale.ts          |  2 +-
 .../library/src/index.ts                           |  6 +++---
 .../src/Collapse/CollapseExaggerated.stories.md    |  1 -
 .../src/Collapse/CollapseRelaxed.stories.md        |  1 +
 .../CollapseRelaxed.stories.tsx}                   | 14 +++++++-------
 .../stories/src/Collapse/index.stories.ts          |  2 +-
 .../stories/src/Fade/FadeExaggerated.stories.md    |  1 -
 .../stories/src/Fade/FadeRelaxed.stories.md        |  1 +
 .../FadeRelaxed.stories.tsx}                       | 14 +++++++-------
 .../stories/src/Fade/index.stories.ts              |  2 +-
 .../stories/src/Scale/ScaleExaggerated.stories.md  |  1 -
 .../stories/src/Scale/ScaleRelaxed.stories.md      |  1 +
 ...erated.stories.tsx => ScaleRelaxed.stories.tsx} | 12 ++++++------
 .../stories/src/Scale/index.stories.ts             |  2 +-
 19 files changed, 46 insertions(+), 41 deletions(-)
 create mode 100644 change/@fluentui-react-motion-components-preview-ce97692b-d797-47e0-ad42-4d0561a9f7da.json
 delete mode 100644 packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseExaggerated.stories.md
 create mode 100644 packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.stories.md
 rename packages/react-components/react-motion-components-preview/stories/src/{Fade/FadeExaggerated.stories.tsx => Collapse/CollapseRelaxed.stories.tsx} (84%)
 delete mode 100644 packages/react-components/react-motion-components-preview/stories/src/Fade/FadeExaggerated.stories.md
 create mode 100644 packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.stories.md
 rename packages/react-components/react-motion-components-preview/stories/src/{Collapse/CollapseExaggerated.stories.tsx => Fade/FadeRelaxed.stories.tsx} (82%)
 delete mode 100644 packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleExaggerated.stories.md
 create mode 100644 packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.stories.md
 rename packages/react-components/react-motion-components-preview/stories/src/Scale/{ScaleExaggerated.stories.tsx => ScaleRelaxed.stories.tsx} (83%)

diff --git a/change/@fluentui-react-motion-components-preview-ce97692b-d797-47e0-ad42-4d0561a9f7da.json b/change/@fluentui-react-motion-components-preview-ce97692b-d797-47e0-ad42-4d0561a9f7da.json
new file mode 100644
index 00000000000000..eb05bc034b440a
--- /dev/null
+++ b/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": "olkatruk@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md b/packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md
index 1b1765803cc41e..d9efd381278b6e 100644
--- a/packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md
+++ b/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;
 }>;
 
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts b/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts
index c6a6a3f7dd0943..6aa4b7bb66d5dc 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts
+++ b/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 }),
 );
 
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.test.tsx b/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.test.tsx
index 3070be848acb25..5da7df598f6255 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.test.tsx
+++ b/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 }],
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts b/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
index a2a62580e7edef..03ca3ea60567a1 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts
+++ b/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 }));
diff --git a/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts b/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
index 37f2a064cfc774..9a40cd14319484 100644
--- a/packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts
+++ b/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 },
 });
diff --git a/packages/react-components/react-motion-components-preview/library/src/index.ts b/packages/react-components/react-motion-components-preview/library/src/index.ts
index e0f055c8a58b8a..c280c050b29600 100644
--- a/packages/react-components/react-motion-components-preview/library/src/index.ts
+++ b/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';
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseExaggerated.stories.md b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseExaggerated.stories.md
deleted file mode 100644
index 4364413a3f1237..00000000000000
--- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseExaggerated.stories.md
+++ /dev/null
@@ -1 +0,0 @@
-The exaggerated variant of `Collapse` is available as `CollapseExaggerated` component.
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.stories.md b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.stories.md
new file mode 100644
index 00000000000000..d5907dbeef22d4
--- /dev/null
+++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.stories.md
@@ -0,0 +1 @@
+The relaxed variant of `Collapse` is available as `CollapseRelaxed` component.
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeExaggerated.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.stories.tsx
similarity index 84%
rename from packages/react-components/react-motion-components-preview/stories/src/Fade/FadeExaggerated.stories.tsx
rename to packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.stories.tsx
index d481cd8c9da179..344314b1008c9d 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeExaggerated.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.stories.tsx
@@ -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,
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/index.stories.ts b/packages/react-components/react-motion-components-preview/stories/src/Collapse/index.stories.ts
index c55053e7571f9e..06d6118fea6ae2 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/index.stories.ts
+++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/index.stories.ts
@@ -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';
 
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeExaggerated.stories.md b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeExaggerated.stories.md
deleted file mode 100644
index a4efa3b8d91665..00000000000000
--- a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeExaggerated.stories.md
+++ /dev/null
@@ -1 +0,0 @@
-The exaggerated variant of `Fade` is available as `FadeExaggerated` component.
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.stories.md b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.stories.md
new file mode 100644
index 00000000000000..ea61540b897f51
--- /dev/null
+++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.stories.md
@@ -0,0 +1 @@
+The relaxed variant of `Fade` is available as `FadeRelaxed` component.
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseExaggerated.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.stories.tsx
similarity index 82%
rename from packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseExaggerated.stories.tsx
rename to packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.stories.tsx
index 09d5dec9440361..ad2453128de970 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseExaggerated.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.stories.tsx
@@ -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,
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/index.stories.ts b/packages/react-components/react-motion-components-preview/stories/src/Fade/index.stories.ts
index 309732a6b25d9e..1ef56da14c326e 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Fade/index.stories.ts
+++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/index.stories.ts
@@ -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 {
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleExaggerated.stories.md b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleExaggerated.stories.md
deleted file mode 100644
index 97529e60a54901..00000000000000
--- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleExaggerated.stories.md
+++ /dev/null
@@ -1 +0,0 @@
-The exaggerated variant of `Scale` is available as `ScaleExaggerated` component.
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.stories.md b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.stories.md
new file mode 100644
index 00000000000000..1c16cfef2f0ab0
--- /dev/null
+++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.stories.md
@@ -0,0 +1 @@
+The relaxed variant of `Scale` is available as `ScaleRelaxed` component.
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleExaggerated.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.stories.tsx
similarity index 83%
rename from packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleExaggerated.stories.tsx
rename to packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.stories.tsx
index c26d46f768937c..51928fc5c4f520 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleExaggerated.stories.tsx
+++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.stories.tsx
@@ -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,
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/index.stories.ts b/packages/react-components/react-motion-components-preview/stories/src/Scale/index.stories.ts
index 84757701f14493..d63eb95222abca 100644
--- a/packages/react-components/react-motion-components-preview/stories/src/Scale/index.stories.ts
+++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/index.stories.ts
@@ -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 {