From ff020f9a6b95c4ddaedef028e9e460b2b39b463c Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Tue, 12 Feb 2019 09:37:14 +0100
Subject: [PATCH] Add animation to the sidebar. (#13635)

---
 packages/components/src/animate/README.md     | 10 +++++++
 packages/components/src/animate/index.js      | 11 ++++++++
 packages/components/src/animate/style.scss    | 15 +++++++++++
 .../src/find-sidebar-panel-with-title.js      |  2 +-
 .../src/components/layout/style.scss          |  4 +--
 .../edit-post/src/components/sidebar/index.js | 27 ++++++++++++-------
 6 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/animate/README.md b/packages/components/src/animate/README.md
index 5ad580bac51e6..4d643698cf77e 100644
--- a/packages/components/src/animate/README.md
+++ b/packages/components/src/animate/README.md
@@ -37,3 +37,13 @@ This animation is meant for popover/modal content, such as menus appearing. It s
 Name | Type | Default | Description
 --- | --- | --- | ---
 `origin` | `string` | `top center` | Point of origin (`top`, `bottom`,` middle right`, `left`, `center`).
+
+### slide-in
+
+This animation is meant for sidebars and sliding menus. It shows the height and width of the animated element moving from a hidden position to its normal one.
+
+#### Options
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+`origin` | `string` | `left` | Point of origin (`left`).
diff --git a/packages/components/src/animate/index.js b/packages/components/src/animate/index.js
index a144e6ee8b27d..03abc44eae0ed 100644
--- a/packages/components/src/animate/index.js
+++ b/packages/components/src/animate/index.js
@@ -19,6 +19,17 @@ function Animate( { type, options = {}, children } ) {
 		} );
 	}
 
+	if ( type === 'slide-in' ) {
+		const { origin = 'left' } = options;
+
+		return children( {
+			className: classnames(
+				'components-animate__slide-in',
+				'is-from-' + origin,
+			),
+		} );
+	}
+
 	return children( {} );
 }
 
diff --git a/packages/components/src/animate/style.scss b/packages/components/src/animate/style.scss
index 0a725ce0032d4..2d5dfcc9b5abd 100644
--- a/packages/components/src/animate/style.scss
+++ b/packages/components/src/animate/style.scss
@@ -26,3 +26,18 @@
 		transform: translateY(0%) scaleY(1) scaleX(1);
 	}
 }
+
+.components-animate__slide-in {
+	animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
+	animation-fill-mode: forwards;
+
+	&.is-from-left {
+		transform: translateX(+100%);
+	}
+}
+
+@keyframes components-animate__slide-in-animation {
+	100% {
+		transform: translateX(0%);
+	}
+}
diff --git a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js b/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js
index fae3f33b53910..bd25778712675 100644
--- a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js
+++ b/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js
@@ -11,5 +11,5 @@ import { first } from 'lodash';
  * @return {?ElementHandle} Object that represents an in-page DOM element.
  */
 export async function findSidebarPanelWithTitle( panelTitle ) {
-	return first( await page.$x( `//div[@class="edit-post-sidebar"]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]` ) );
+	return first( await page.$x( `//div[contains(@class,"edit-post-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]` ) );
 }
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 963862b7105d7..f848a8cfd7ccd 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -173,7 +173,7 @@
 		width: $sidebar-width;
 		border-left: $border-width solid $light-gray-500;
 		transform: translateX(+100%);
-		animation: edit-post-layout__slide-in-animation 0.1s forwards;
+		animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
 
 		body.is-fullscreen-mode & {
 			top: 0;
@@ -181,7 +181,7 @@
 	}
 }
 
-@keyframes edit-post-layout__slide-in-animation {
+@keyframes edit-post-post-publish-panel__slide-in-animation {
 	100% {
 		transform: translateX(0%);
 	}
diff --git a/packages/edit-post/src/components/sidebar/index.js b/packages/edit-post/src/components/sidebar/index.js
index b043403d8bf32..a9da35865e875 100644
--- a/packages/edit-post/src/components/sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/index.js
@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { createSlotFill, withFocusReturn } from '@wordpress/components';
+import { createSlotFill, withFocusReturn, Animate } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { ifCondition, compose } from '@wordpress/compose';
 
@@ -15,14 +20,18 @@ const { Fill, Slot } = createSlotFill( 'Sidebar' );
 const Sidebar = ( { children, label } ) => {
 	return (
 		<Fill>
-			<div
-				className="edit-post-sidebar"
-				role="region"
-				aria-label={ label }
-				tabIndex="-1"
-			>
-				{ children }
-			</div>
+			<Animate type="slide-in" options={ { origin: 'left' } }>
+				{ ( { className } ) => (
+					<div
+						className={ classnames( 'edit-post-sidebar', className ) }
+						role="region"
+						aria-label={ label }
+						tabIndex="-1"
+					>
+						{ children }
+					</div>
+				) }
+			</Animate>
 		</Fill>
 	);
 };