Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: handle cases when Animation.persist() does not exist #33282

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix: handle cases when Animation.persist() does not exist #33282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7bc2876
fix: handle cases when Animation.persist() does not exist
spmonahan Nov 16, 2024
6b1dee4
change file
spmonahan Nov 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-motion-f4f8b668-785c-48d9-9d8f-2410472b12f4.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 2 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.badgeMask.chromium.png 6 Changed
Avatar Converged.Badge Mask RTL.chromium.png 2 Changed
Drawer 2 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.Full Overlay Dark Mode.chromium.png 2561 Changed
Drawer.overlay drawer full.chromium.png 3320 Changed

"type": "patch",
"comment": "fix: handle case when Animation.persist() does not exist",
"packageName": "@fluentui/react-motion",
"email": "[email protected]",
"dependentChangeType": "patch"
}
39 changes: 39 additions & 0 deletions packages/react-components/react-motion/library/src/factories/createMotionComponent.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,27 @@ function createElementMock() {
}

describe('createMotionComponent', () => {
let hasAnimation: boolean;
beforeEach(() => {
if (!global.Animation) {
hasAnimation = false;
global.Animation = {
// @ts-expect-error mock
prototype: {
persist: jest.fn(),
},
};
} else {
hasAnimation = true;
}
});

afterEach(() => {
if (!hasAnimation) {
// @ts-expect-error mock
delete global.Animation;
}
});
it('creates a motion and plays it', () => {
const TestAtom = createMotionComponent(motion);
const { animateMock, ElementMock } = createElementMock();
Expand All @@ -52,6 +73,24 @@ describe('createMotionComponent', () => {
});
});

it('creates a motion and plays it (without .persist())', () => {
// @ts-expect-error mock
delete global.Animation.prototype.persist;
const TestAtom = createMotionComponent(motion);
const { animateMock, ElementMock } = createElementMock();

render(
<TestAtom>
<ElementMock />
</TestAtom>,
);

expect(animateMock).toHaveBeenCalledWith(motion.keyframes, {
duration: 1,
fill: 'forwards',
});
});

it('supports functions as motion definitions', () => {
const fnMotion = jest.fn().mockImplementation(() => motion);
const TestAtom = createMotionComponent(fnMotion);
Expand Down
40 changes: 40 additions & 0 deletions ...ages/react-components/react-motion/library/src/factories/createPresenceComponent.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,28 @@ function createElementMock() {
}

describe('createPresenceComponent', () => {
let hasAnimation: boolean;
beforeEach(() => {
if (!global.Animation) {
hasAnimation = false;
global.Animation = {
// @ts-expect-error mock
prototype: {
persist: jest.fn(),
},
};
} else {
hasAnimation = true;
}
});

afterEach(() => {
if (!hasAnimation) {
// @ts-expect-error mock
delete global.Animation;
}
});

describe('appear', () => {
it('does not animate by default', () => {
const TestPresence = createPresenceComponent(motion);
Expand Down Expand Up @@ -68,6 +90,24 @@ describe('createPresenceComponent', () => {
expect(animateMock).toHaveBeenCalledWith(enterKeyframes, options);
});

it('animates when is "true" (without .persist())', () => {
// @ts-expect-error mock
delete window.Animation.prototype.persist;
const TestPresence = createPresenceComponent(motion);
const { animateMock, ElementMock } = createElementMock();

render(
<TestPresence appear visible>
<ElementMock />
</TestPresence>,
);

expect(animateMock).toHaveBeenCalledWith(enterKeyframes, {
...options,
duration: 1,
});
});

it('finishes motion when wrapped in motion behaviour context with skip behaviour', async () => {
const TestPresence = createPresenceComponent(motion);
const { finishMock, ElementMock } = createElementMock();
Expand Down
7 changes: 5 additions & 2 deletions packages/react-components/react-motion/library/src/hooks/useAnimateAtoms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import * as React from 'react';
import type { AnimationHandle, AtomMotion } from '../types';

function useAnimateAtomsInSupportedEnvironment() {
// eslint-disable-next-line @nx/workspace-no-restricted-globals
const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not in love with having this here. Ideally it would live in global scope because SUPPORTS_PERSIST will be constant for any given environment.

I moved it here because I could not find a good way to test it with Jest.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could move this to a function check in another module and mock that moduile in the tests, but I don't mind keeping it like this ELEMENT_SUPPORTS_WEB_ANIMATIONS is done similarly


return React.useCallback(
(
element: HTMLElement,
Expand All @@ -19,10 +22,10 @@ function useAnimateAtomsInSupportedEnvironment() {
fill: 'forwards',

...params,
...(isReducedMotion && { duration: 1 }),
...((isReducedMotion || !SUPPORTS_PERSIST) && { duration: 1 }),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you need to go through the reduced motion path? the animation will still work without persist - the main consequence is that with for multiple animations that target the same property, the latest animation will replace older ones

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't strictly need to. My thinking is twofold:

  1. It reduces the likelihood of multiple animations targeting the same property. I don't know if this is really true in practice but if you had multiple, delayed animations it seems like it would be.
  2. If your browser doesn't support .persist() you don't really fully support this feature so we just opt you out of it. Using reduced motion ensures the functionality is observably the same (barring the multiple animation situation) as all animation events will fire, etc. This only affects browsers in our partial support matrix so a graceful degradation approach feels fine to me.

Open to changing this but as-is seems best to me.

});

animation.persist();
SUPPORTS_PERSIST && animation.persist();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about we just create a polyfill for https://developer.mozilla.org/en-US/docs/Web/API/Animation/commitStyles?

        if (SUPPORTS_PERSIST) {
          animation.persist();
        } else {
          const resultKeyframe = keyframes[keyframes.length - 1];
          Object.assign(element.style, resultKeyframe);
        }

This would ensure that we don't have weirdness when multiple animations are composed https://stackblitz.com/edit/typescript-hqxwu6?file=index.ts


return animation;
});
Expand Down
Loading