Repository: microsoft/fluent-ui-react (ts)

Issue:
Unable to disable animations
## Bug Report

### Steps
```jsx
<Provider disableAnimations>
  <AnimatedComponent>
</Provider>
```

### Expected Result
`AnimatedComponent` is NOT animated

### Actual Result
It still animates 💣

### Version
0.40.2

### Testcase
https://codesandbox.io/s/xbkuv?module=/example.js

Pull request:
fix(Provider): Honor disableAnimations
Fixes #2086 

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76bfb854a..936017c94 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Update Silver color scheme, changing `backgroundHover` and `backgroundPressed` for high-contrast theme @pompomon ([#2078](https://github.com/microsoft/fluent-ui-react/pull/2078))
 - Updating the `attachment` component styles to match Teams theme @notandrew ([#2012](https://github.com/stardust-ui/react/pull/2012))
+- Honor `disableAnimations` prop in `Provider` @miroslavstastny ([#2087](https://github.com/microsoft/fluent-ui-react/pull/2087))
 
 ### Features
 - Add bounce animation to button clicks in Teams theme @notandrew ([#1724](https://github.com/stardust-ui/react/pull/1724))
diff --git a/packages/react/src/lib/felaDisableAnimationsPlugin.ts b/packages/react/src/lib/felaDisableAnimationsPlugin.ts
index 98d5884cb..46224fae0 100644
--- a/packages/react/src/lib/felaDisableAnimationsPlugin.ts
+++ b/packages/react/src/lib/felaDisableAnimationsPlugin.ts
@@ -24,6 +24,10 @@ export default () => {
       return Object.keys(styles).reduce((acc, cssPropertyName) => {
         const cssPropertyValue = styles[cssPropertyName]
 
+        if (animationProps.indexOf(cssPropertyName) !== -1) {
+          return acc
+        }
+
         if (typeof cssPropertyValue === 'object') {
           return {
             ...acc,
@@ -31,9 +35,6 @@ export default () => {
           }
         }
 
-        if (animationProps.indexOf(cssPropertyName) !== -1) {
-          return acc
-        }
         return { ...acc, [cssPropertyName]: styles[cssPropertyName] }
       }, {})
     }
diff --git a/packages/react/src/lib/renderComponent.tsx b/packages/react/src/lib/renderComponent.tsx
index 01f0eb8b3..a691e18ca 100644
--- a/packages/react/src/lib/renderComponent.tsx
+++ b/packages/react/src/lib/renderComponent.tsx
@@ -239,6 +239,7 @@ const renderComponent = <P extends {}>(
   const direction = rtl ? 'rtl' : 'ltr'
   const felaParam = {
     theme: { direction },
+    disableAnimations,
     displayName, // does not affect styles, only used by useEnhancedRenderer in docs
   }
 


Test patch:
diff --git a/packages/react/test/specs/lib/__snapshots__/felaRenderer-test.tsx.snap b/packages/react/test/specs/lib/__snapshots__/felaRenderer-test.tsx.snap
index 107fd920a..5431d9f4d 100644
--- a/packages/react/test/specs/lib/__snapshots__/felaRenderer-test.tsx.snap
+++ b/packages/react/test/specs/lib/__snapshots__/felaRenderer-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CSS fallback values are rendered 1`] = `
+exports[`felaRenderer CSS fallback values are rendered 1`] = `
 ".a {
   color: red;
   color: blue;
@@ -11,7 +11,16 @@ exports[`CSS fallback values are rendered 1`] = `
 "
 `;
 
-exports[`array returned by keyframe results in CSS fallback values 1`] = `
+exports[`felaRenderer animations are not applied if animations are disabled 1`] = `
+"
+
+<div className=ui-provider__box dir=ltr>
+  <div className=ui-box />
+</div>;
+"
+`;
+
+exports[`felaRenderer array returned by keyframe results in CSS fallback values 1`] = `
 "@-webkit-keyframes k1 {
   0% {
     color: blue;
@@ -59,7 +68,7 @@ exports[`array returned by keyframe results in CSS fallback values 1`] = `
 "
 `;
 
-exports[`basic styles are rendered 1`] = `
+exports[`felaRenderer basic styles are rendered 1`] = `
 ".a {
   color: red;
 }
@@ -69,7 +78,7 @@ exports[`basic styles are rendered 1`] = `
 "
 `;
 
-exports[`keyframe colors are rendered 1`] = `
+exports[`felaRenderer keyframe colors are rendered 1`] = `
 "@-webkit-keyframes k1 {
   from {
     color: red;
@@ -108,7 +117,7 @@ exports[`keyframe colors are rendered 1`] = `
 "
 `;
 
-exports[`marginLeft is rendered into marginRight due to RTL 1`] = `
+exports[`felaRenderer marginLeft is rendered into marginRight due to RTL 1`] = `
 ".a {
   margin-right: 10px;
 }
diff --git a/packages/react/test/specs/lib/felaRenderer-test.tsx b/packages/react/test/specs/lib/felaRenderer-test.tsx
index 038ae5c2e..57a06193d 100644
--- a/packages/react/test/specs/lib/felaRenderer-test.tsx
+++ b/packages/react/test/specs/lib/felaRenderer-test.tsx
@@ -6,86 +6,112 @@ import Provider from 'src/components/Provider/Provider'
 import Text from 'src/components/Text/Text'
 import { felaRenderer } from 'src/lib'
 
-test('basic styles are rendered', () => {
-  const snapshot = createSnapshot(
-    <EmptyThemeProvider>
-      <Box styles={{ color: 'red' }} />
-    </EmptyThemeProvider>,
-    {},
-    felaRenderer,
-  )
-  expect(snapshot).toMatchSnapshot()
-})
+describe('felaRenderer', () => {
+  test('basic styles are rendered', () => {
+    const snapshot = createSnapshot(
+      <EmptyThemeProvider>
+        <Box styles={{ color: 'red' }} />
+      </EmptyThemeProvider>,
+      {},
+      felaRenderer,
+    )
+    expect(snapshot).toMatchSnapshot()
+  })
 
-test('CSS fallback values are rendered', () => {
-  const snapshot = createSnapshot(
-    <EmptyThemeProvider>
-      <Box styles={{ color: ['red', 'blue'] }} />
-    </EmptyThemeProvider>,
-    {},
-    felaRenderer,
-  )
-  expect(snapshot).toMatchSnapshot()
-})
+  test('CSS fallback values are rendered', () => {
+    const snapshot = createSnapshot(
+      <EmptyThemeProvider>
+        <Box styles={{ color: ['red', 'blue'] }} />
+      </EmptyThemeProvider>,
+      {},
+      felaRenderer,
+    )
+    expect(snapshot).toMatchSnapshot()
+  })
 
-test('keyframe colors are rendered', () => {
-  const spinner = {
-    keyframe: ({ fromColor, toColor }) => ({
-      from: {
-        color: fromColor,
-      },
-      to: {
-        color: toColor,
+  test('keyframe colors are rendered', () => {
+    const spinner = {
+      keyframe: ({ fromColor, toColor }) => ({
+        from: {
+          color: fromColor,
+        },
+        to: {
+          color: toColor,
+        },
+      }),
+      keyframeParams: {
+        fromColor: 'red',
+        toColor: 'blue',
       },
-    }),
-    keyframeParams: {
-      fromColor: 'red',
-      toColor: 'blue',
-    },
-    duration: '5s',
-  }
+      duration: '5s',
+    }
 
-  const snapshot = createSnapshot(
-    <Provider theme={{ animations: { spinner } }}>
-      <Box animation="spinner" />
-    </Provider>,
-    {},
-    felaRenderer,
-  )
-  expect(snapshot).toMatchSnapshot()
-})
+    const snapshot = createSnapshot(
+      <Provider theme={{ animations: { spinner } }}>
+        <Box animation="spinner" />
+      </Provider>,
+      {},
+      felaRenderer,
+    )
+    expect(snapshot).toMatchSnapshot()
+  })
 
-test('array returned by keyframe results in CSS fallback values', () => {
-  const steps = ['0%', '100%']
+  test('array returned by keyframe results in CSS fallback values', () => {
+    const steps = ['0%', '100%']
 
-  const spinner = {
-    keyframe: ({ steps }) => {
-      const obj = {}
-      steps.forEach((step: string, index) => {
-        ;(obj as any)[step] = { color: ['blue', 'red', 'yellow'] }
-      })
-      return obj
-    },
-    keyframeParams: { steps },
-  }
+    const spinner = {
+      keyframe: ({ steps }) => {
+        const obj = {}
+        steps.forEach((step: string, index) => {
+          ;(obj as any)[step] = { color: ['blue', 'red', 'yellow'] }
+        })
+        return obj
+      },
+      keyframeParams: { steps },
+    }
 
-  const snapshot = createSnapshot(
-    <Provider theme={{ animations: { spinner } }}>
-      <Box animation="spinner" />
-    </Provider>,
-    {},
-    felaRenderer,
-  )
-  expect(snapshot).toMatchSnapshot()
-})
+    const snapshot = createSnapshot(
+      <Provider theme={{ animations: { spinner } }}>
+        <Box animation="spinner" />
+      </Provider>,
+      {},
+      felaRenderer,
+    )
+    expect(snapshot).toMatchSnapshot()
+  })
+
+  test('animations are not applied if animations are disabled', () => {
+    const spinner = {
+      keyframe: {
+        from: {
+          transform: 'rotate(0deg)',
+        },
+        to: {
+          transform: 'rotate(360deg)',
+        },
+      },
+      duration: '5s',
+      iterationCount: 'infinite',
+    }
+
+    const snapshot = createSnapshot(
+      <Provider disableAnimations theme={{ animations: { spinner } }}>
+        <Box animation="spinner" />
+      </Provider>,
+      {},
+      felaRenderer,
+    )
+    expect(snapshot).toMatchSnapshot()
+  })
 
-test('marginLeft is rendered into marginRight due to RTL', () => {
-  const snapshot = createSnapshot(
-    <Provider rtl={true}>
-      <Text content="Hello" styles={{ marginLeft: '10px' }} />
-    </Provider>,
-    {},
-    felaRenderer,
-  )
-  expect(snapshot).toMatchSnapshot()
+  test('marginLeft is rendered into marginRight due to RTL', () => {
+    const snapshot = createSnapshot(
+      <Provider rtl={true}>
+        <Text content="Hello" styles={{ marginLeft: '10px' }} />
+      </Provider>,
+      {},
+      felaRenderer,
+    )
+    expect(snapshot).toMatchSnapshot()
+  })
 })