Survey: Add enter and exit animations (#95684)

* Prevent layout shift due to not loaded image * Add transition animation * Adjust typescript type * Tweak animation and update image for retina display --------- Co-authored-by: Filippo Di Trapani <filippodt@gmail.com>
Automattic · Oct 24, 2024 · 09637ea · 09637ea
1 parent d8bc948
commit 09637ea
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 20 deletions.
diff --git a/client/assets/images/onboarding/migrations/survey/wordpress-half-logo.png b/client/assets/images/onboarding/migrations/survey/wordpress-half-logo.png
diff --git a/client/landing/stepper/declarative-flow/internals/index.tsx b/client/landing/stepper/declarative-flow/internals/index.tsx
@@ -19,6 +19,7 @@ import { useStartStepperPerformanceTracking } from '../../utils/performance-trac
 import { StepperLoader, StepRoute } from './components';
 import { Boot } from './components/boot';
 import { RedirectToStep } from './components/redirect-to-step';
+import SurveyManager from './components/survery-manager';
 import { useFlowAnalytics } from './hooks/use-flow-analytics';
 import { useFlowNavigation } from './hooks/use-flow-navigation';
 import { useSignUpStartTracking } from './hooks/use-sign-up-start-tracking';
@@ -197,6 +198,7 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => {
 		<Boot fallback={ <StepperLoader /> }>
 			<DocumentHead title={ getDocumentHeadTitle() } />
 
+			<SurveyManager />
 			<Routes>
 				{ flowSteps.map( ( step ) => (
 					<Route

diff --git a/...stepper/declarative-flow/internals/steps-repository/components/migration-survey/index.tsx b/...stepper/declarative-flow/internals/steps-repository/components/migration-survey/index.tsx
@@ -15,7 +15,7 @@ const MigrationSurvey = ( { isOpen }: MigrationSurveyProps ) => {
 			isOpen={ isOpen }
 		>
 			<div className="migration-survey__popup-img">
-				<img src={ surveyImage } alt={ translate( 'Code editor' ) } />
+				<img src={ surveyImage } alt={ translate( 'Code editor' ) } width={ 436 } height={ 249 } />
 			</div>
 			<div className="migration-survey__popup-content">
 				<h3 className="migration-survey__popup-content-title">

diff --git a/...tepper/declarative-flow/internals/steps-repository/components/migration-survey/style.scss b/...tepper/declarative-flow/internals/steps-repository/components/migration-survey/style.scss
@@ -1,6 +1,15 @@
 .migration-survey {
 	.migration-survey__popup-head {
-		background: #3858e9;
+		background: var( --color-accent );
+	}
+
+	.migration-survey__popup-img {
+		background: var( --color-accent );
+
+		img {
+			width: 100%;
+			display: block;
+		}
 	}
 
 	.migration-survey__popup-content {
@@ -22,14 +31,5 @@
 			display: flex;
 			justify-content: flex-end;
 		}
-		.migration-survey__popup-img {
-			background: #0675c4;
-			padding-bottom: 57.9%;
-
-			img {
-				width: 100%;
-				display: block;
-			}
-		}
 	}
 }
diff --git a/...t/landing/stepper/declarative-flow/internals/steps-repository/components/survey/index.tsx b/...t/landing/stepper/declarative-flow/internals/steps-repository/components/survey/index.tsx
@@ -3,6 +3,7 @@ import { Button } from '@wordpress/components';
 import clsx from 'clsx';
 import cookie from 'cookie';
 import React, { cloneElement, useCallback, useContext, useMemo, useState } from 'react';
+import { flushSync } from 'react-dom';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import {
 	type SurveyContextType,
@@ -116,7 +117,17 @@ export const Survey = ( {
 				onSkip?.();
 			}
 
-			setShouldShowSurvey( false );
+			if ( document.startViewTransition ) {
+				document.startViewTransition( async () => {
+					//use flushSync to ensure the DOM is updated before the view transition starts
+					//it is essential to use view transition api
+					flushSync( () => {
+						setShouldShowSurvey( false );
+					} );
+				} );
+			} else {
+				setShouldShowSurvey( false );
+			}
 		},
 		[ name, onAccept, onSkip ]
 	);
@@ -161,7 +172,8 @@ export const Survey = ( {
 								</Button>
 							</SurveyTriggerSkip>
 						</div>
-						{ children }
+
+						<div>{ children }</div>
 					</div>
 				</div>
 			</SurveyActionsContext.Provider>

diff --git a/.../landing/stepper/declarative-flow/internals/steps-repository/components/survey/style.scss b/.../landing/stepper/declarative-flow/internals/steps-repository/components/survey/style.scss
@@ -1,4 +1,61 @@
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 0.5;
+	}
+}
+@keyframes fade-out {
+	from {
+		opacity: 0.5;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes slide-in {
+	0% {
+		transform: translateY( 100% );
+		opacity: 0;
+	}
+
+	50% {
+		transform: translateY( -24px );
+		opacity: 50;
+	}
+
+	100% {
+		transform: translateY( 0 );
+		opacity: 1;
+	}
+}
+
+@keyframes slide-out {
+	0% {
+		transform: translateY( 0 );
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateY( 30% );
+		opacity: 0;
+	}
+}
+
+@keyframes reduced-motion-slide-in {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
 .survey-notice {
+	view-transition-name: survey-notice;
 	position: fixed;
 	left: 0;
 	top: 0;
@@ -7,6 +64,7 @@
 	z-index: 1000;
 
 	.survey-notice__backdrop {
+		view-transition-name: survey-notice-backdrop;
 		background: var(--studio-black);
 		opacity: 0.2;
 		position: absolute;
@@ -15,9 +73,18 @@
 		width: 100%;
 		height: 100%;
 		cursor: default;
+		animation: fade-in 0.3s ease-out both;
+		@media (prefers-reduced-motion) {
+			animation: none;
+		}
 	}
 
 	.survey-notice__popup {
+		view-transition-name: survey-notice-popup;
+		animation: slide-in 0.3s ease-out both 0.1s;
+		@media (prefers-reduced-motion) {
+			animation: reduced-motion-slide-in 0.5s ease-in-out both 0.7s;
+		}
 		position: absolute;
 		right: 25px;
 		bottom: 25px;
@@ -54,3 +121,13 @@
 		}
 	}
 }
+
+
+
+::view-transition-new(survey-notice-backdrop) {
+	opacity: 0;
+}
+
+::view-transition-old(survey-notice-popup) {
+	animation: slide-out 0.2s ease-in both;
+}
diff --git a/...ding/stepper/declarative-flow/internals/steps-repository/components/survey/test/index.tsx b/...ding/stepper/declarative-flow/internals/steps-repository/components/survey/test/index.tsx
@@ -36,7 +36,7 @@ describe( 'Survey', () => {
 				<h1>Survey</h1>
 
 				<SurveyTriggerAccept>
-					<Button>Take the survey</Button>
+					<a href="#testing">Take the survey</a>
 				</SurveyTriggerAccept>
 			</Survey>
 		);
@@ -67,7 +67,7 @@ describe( 'Survey', () => {
 				<h1>Survey</h1>
 
 				<SurveyTriggerAccept>
-					<Button>Take the survey</Button>
+					<a href="#testing">Take the survey</a>
 				</SurveyTriggerAccept>
 			</Survey>
 		);
@@ -83,7 +83,7 @@ describe( 'Survey', () => {
 			<Survey name={ SURVEY_NAME } onSkip={ onSkip }>
 				<h1>Survey</h1>
 
-				<SurveyTriggerSkip>
+				<SurveyTriggerSkip asChild>
 					<Button>Thanks</Button>
 				</SurveyTriggerSkip>
 			</Survey>
@@ -101,7 +101,7 @@ describe( 'Survey', () => {
 			<Survey name={ SURVEY_NAME }>
 				<h1>Survey</h1>
 
-				<SurveyTriggerSkip>
+				<SurveyTriggerSkip asChild>
 					<Button>Thanks</Button>
 				</SurveyTriggerSkip>
 			</Survey>

diff --git a/...nt/landing/stepper/declarative-flow/internals/steps-repository/components/survey/types.ts b/...nt/landing/stepper/declarative-flow/internals/steps-repository/components/survey/types.ts
@@ -20,6 +20,6 @@ export interface SurveyProps extends PropsWithChildren {
 export interface TriggerProps {
 	asChild?: boolean;
 	onClick: () => void;
-	children: React.ReactElement;
 	as?: React.ElementType;
+	children: React.ReactElement;
 }
diff --git a/client/landing/stepper/index.tsx b/client/landing/stepper/index.tsx
@@ -38,7 +38,6 @@ import { FlowRenderer } from './declarative-flow/internals';
 import { AsyncHelpCenter } from './declarative-flow/internals/components';
 import 'calypso/components/environment-badge/style.scss';
 import 'calypso/assets/stylesheets/style.scss';
-import SurveyManager from './declarative-flow/internals/components/survery-manager';
 import availableFlows from './declarative-flow/registered-flows';
 import { USER_STORE } from './stores';
 import { setupWpDataDebug } from './utils/devtools';
@@ -173,7 +172,6 @@ window.AppBoot = async () => {
 							placeholder={ null }
 							id="notices"
 						/>
-						<SurveyManager />
 					</BrowserRouter>
 					<AsyncHelpCenter />