Simplify site icon animation on hover. (#38783)

* Simplify site icon animation on hover. * Fix for site editor.
WordPress · Feb 15, 2022 · cf85dfa · cf85dfa
1 parent 81e8e0f
commit cf85dfa
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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 {