From aa58580d81e197fc295bf879ab0780138a55a153 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 14 Mar 2023 12:26:12 +0100 Subject: [PATCH 1/6] Navigator: disable initial animation --- .../navigator/navigator-screen/component.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx index 15cec834d8b8ad..7942226cb269d3 100644 --- a/packages/components/src/navigator/navigator-screen/component.tsx +++ b/packages/components/src/navigator/navigator-screen/component.tsx @@ -172,13 +172,17 @@ function UnconnectedNavigatorScreen( }, x: 0, }; - const initial = { - opacity: 0, - x: - ( isRTL() && location.isBack ) || ( ! isRTL() && ! location.isBack ) - ? 50 - : -50, - }; + const initial = + location.isInitial && ! location.isBack + ? false + : { + opacity: 0, + x: + ( isRTL() && location.isBack ) || + ( ! isRTL() && ! location.isBack ) + ? 50 + : -50, + }; const exit = { delay: animationExitDelay, opacity: 0, From 19803f012b33b117e56bfe88634b7fc916c583a2 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 14 Mar 2023 15:37:55 +0100 Subject: [PATCH 2/6] Fix snapshot --- .../preferences-modal/test/__snapshots__/index.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index 67d5ee4e184366..c666ab81e0724f 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -733,7 +733,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active class="emotion-2 components-navigator-screen" data-wp-c16t="true" data-wp-component="NavigatorScreen" - style="opacity: 0; transform: translateX(50px) translateZ(0);" + style="opacity: 1; transform: none;" >
Date: Tue, 14 Mar 2023 16:25:22 +0100 Subject: [PATCH 3/6] Remove framer-motion mocks from Navigator tests --- .../components/src/navigator/test/index.tsx | 23 +------------------ 1 file changed, 1 insertion(+), 22 deletions(-) diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx index 927f6f3abf0e04..6642f91c088bc5 100644 --- a/packages/components/src/navigator/test/index.tsx +++ b/packages/components/src/navigator/test/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { ReactNode, ForwardedRef, ComponentPropsWithoutRef } from 'react'; +import type { ComponentPropsWithoutRef } from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -23,27 +23,6 @@ import { useNavigator, } from '..'; -jest.mock( 'framer-motion', () => { - const actual = jest.requireActual( 'framer-motion' ); - return { - __esModule: true, - ...actual, - AnimatePresence: - ( { children }: { children?: ReactNode } ) => - () => -
{ children }
, - motion: { - ...actual.motion, - div: require( 'react' ).forwardRef( - ( - { children }: { children?: ReactNode }, - ref: ForwardedRef< HTMLDivElement > - ) =>
{ children }
- ), - }, - }; -} ); - const INVALID_HTML_ATTRIBUTE = { raw: ' "\'><=invalid_path', escaped: " "'><=invalid_path", From a801f73229d7137402eab8470b420c44bc847942 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 14 Mar 2023 16:26:20 +0100 Subject: [PATCH 4/6] Add unit tests for skipping initial animation --- .../components/src/navigator/test/index.tsx | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx index 6642f91c088bc5..a27be5475d8028 100644 --- a/packages/components/src/navigator/test/index.tsx +++ b/packages/components/src/navigator/test/index.tsx @@ -717,4 +717,68 @@ describe( 'Navigator', () => { expect( getNavigationButton( 'toChildScreen' ) ).toHaveFocus(); } ); } ); + + describe( 'animation', () => { + it( 'should not animate the initial screen', async () => { + const onHomeAnimationStartSpy = jest.fn(); + + render( + + + + To child + + + + ); + + expect( onHomeAnimationStartSpy ).not.toHaveBeenCalled(); + } ); + + it( 'should animate all other screens (including the initial screen when navigating back)', async () => { + const user = userEvent.setup(); + + const onHomeAnimationStartSpy = jest.fn(); + const onChildAnimationStartSpy = jest.fn(); + + render( + + + + To child + + + + + Back to home + + + + ); + + expect( onHomeAnimationStartSpy ).not.toHaveBeenCalled(); + expect( onChildAnimationStartSpy ).not.toHaveBeenCalled(); + + await user.click( + screen.getByRole( 'button', { name: 'To child' } ) + ); + expect( onChildAnimationStartSpy ).toHaveBeenCalledTimes( 1 ); + expect( onHomeAnimationStartSpy ).not.toHaveBeenCalled(); + + await user.click( + screen.getByRole( 'button', { name: 'Back to home' } ) + ); + expect( onChildAnimationStartSpy ).toHaveBeenCalledTimes( 1 ); + expect( onHomeAnimationStartSpy ).toHaveBeenCalledTimes( 1 ); + } ); + } ); } ); From 01bb071e01b827494a798abb9930d66a361a3250 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 14 Mar 2023 16:31:05 +0100 Subject: [PATCH 5/6] Add inline comment --- .../components/src/navigator/navigator-screen/component.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx index 7942226cb269d3..2d4588d91b14d6 100644 --- a/packages/components/src/navigator/navigator-screen/component.tsx +++ b/packages/components/src/navigator/navigator-screen/component.tsx @@ -172,6 +172,8 @@ function UnconnectedNavigatorScreen( }, x: 0, }; + // Disable the initial animation if the screen is the very first screen to be + // rendered within the current `NavigatorProvider`. const initial = location.isInitial && ! location.isBack ? false From f51d02abb505dd6d5ee60c01ceefe9335d7e342a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 14 Mar 2023 16:31:54 +0100 Subject: [PATCH 6/6] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0fce2b8b6557da..52fee76a975da5 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Enhancements - `FontSizePicker`: Allow custom units for custom font size control ([#48468](https://github.com/WordPress/gutenberg/pull/48468)). +- `Navigator`: Disable initial screen animation ([#49062](https://github.com/WordPress/gutenberg/pull/49062)). - `FormTokenField`: Hide suggestions list on blur event if the input value is invalid ([#48785](https://github.com/WordPress/gutenberg/pull/48785)). ### Bug Fix