From cf85dfa3e3f7d4e84063a57c937398c132462f47 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Tue, 15 Feb 2022 08:58:45 +0100
Subject: [PATCH] Simplify site icon animation on hover. (#38783)

* Simplify site icon animation on hover.

* Fix for site editor.
---
 .../header/fullscreen-mode-close/index.js     | 13 ++--
 .../header/fullscreen-mode-close/style.scss   |  6 +-
 .../navigation-toggle/index.js                | 17 +++--
 .../navigation-toggle/style.scss              | 63 ++++++++++---------
 4 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
index a698ce4994e44b..8663128f0e528c 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { get } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -59,9 +60,8 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 
 	const effect = {
 		expand: {
-			scale: 1.7,
-			borderRadius: 0,
-			transition: { type: 'tween', duration: '0.2' },
+			scale: 1.25,
+			transition: { type: 'tween', duration: '0.3' },
 		},
 	};
 
@@ -85,10 +85,15 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 		buttonIcon = <Icon size="36px" icon={ icon } />;
 	}
 
+	const classes = classnames( {
+		'edit-post-fullscreen-mode-close': true,
+		'has-icon': siteIconUrl,
+	} );
+
 	return (
 		<motion.div whileHover="expand">
 			<Button
-				className="edit-post-fullscreen-mode-close has-icon"
+				className={ classes }
 				href={
 					href ??
 					addQueryArgs( 'edit.php', {
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
index 103ea372c0a640..31289443436923 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -1,7 +1,7 @@
 // Developer notes: these rules are duplicated for the site editor.
 // They need to be updated in both places.
 
-.edit-post-fullscreen-mode-close.has-icon {
+.edit-post-fullscreen-mode-close.components-button {
 	// Do not show the toolbar icon on small screens,
 	// when Fullscreen Mode is not an option in the "More" menu.
 	display: none;
@@ -46,6 +46,10 @@
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
 		}
 
+		&.has-icon:hover::before {
+			box-shadow: none;
+		}
+
 		// Lightened spot color focus.
 		&:focus::before {
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
index 63401f3564814f..2cdc68858e480c 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -58,9 +63,8 @@ function NavigationToggle( { icon } ) {
 
 	const effect = {
 		expand: {
-			scale: 1.7,
-			borderRadius: 0,
-			transition: { type: 'tween', duration: '0.2' },
+			scale: 1.25,
+			transition: { type: 'tween', duration: '0.3' },
 		},
 	};
 
@@ -79,6 +83,11 @@ function NavigationToggle( { icon } ) {
 		buttonIcon = <Icon size="36px" icon={ icon } />;
 	}
 
+	const classes = classnames( {
+		'edit-site-navigation-toggle__button': true,
+		'has-icon': siteIconUrl,
+	} );
+
 	return (
 		<motion.div
 			className={
@@ -88,7 +97,7 @@ function NavigationToggle( { icon } ) {
 			whileHover="expand"
 		>
 			<Button
-				className="edit-site-navigation-toggle__button has-icon"
+				className={ classes }
 				label={ __( 'Toggle navigation' ) }
 				ref={ navigationToggleRef }
 				// isPressed will add unwanted styles.
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
index 4105d74df9553a..39f53df6c94d9b 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
@@ -12,7 +12,7 @@
 	width: $header-height;
 }
 
-.edit-site-navigation-toggle__button {
+.edit-site-navigation-toggle__button.components-button {
 	align-items: center;
 	background: $gray-900;
 	border-radius: 0;
@@ -21,42 +21,43 @@
 	width: $header-height;
 	z-index: 1;
 	margin-bottom: - $border-width;
+	min-width: $header-height;
 
-	&.has-icon {
-		min-width: $header-height;
+	&:hover,
+	&:active {
+		color: $white;
+	}
 
-		&:hover,
-		&:active {
-			color: $white;
-		}
+	&:focus {
+		box-shadow: none;
+	}
 
-		&:focus {
-			box-shadow: none;
-		}
+	&::before {
+		transition: box-shadow 0.1s ease;
+		@include reduce-motion("transition");
+		content: "";
+		display: block;
+		position: absolute;
+		top: 9px;
+		right: 9px;
+		bottom: 9px;
+		left: 9px;
+		border-radius: $radius-block-ui + $border-width + $border-width;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
+	}
 
-		&::before {
-			transition: box-shadow 0.1s ease;
-			@include reduce-motion("transition");
-			content: "";
-			display: block;
-			position: absolute;
-			top: 9px;
-			right: 9px;
-			bottom: 9px;
-			left: 9px;
-			border-radius: $radius-block-ui + $border-width + $border-width;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
-		}
+	// Hover color.
+	&:hover::before {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
+	}
 
-		// Hover color.
-		&:hover::before {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700;
-		}
+	&.has-icon:hover::before {
+		box-shadow: none;
+	}
 
-		// Lightened spot color focus.
-		&:focus::before {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
+	// Lightened spot color focus.
+	&:focus::before {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 	}
 
 	.edit-site-navigation-toggle__site-icon {