Add animation to the sidebar. (#13635)

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`).

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( {} );
 }
 

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%);
+	}
+}

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 }")]` ) );
 }

packages/edit-post/src/components/layout/style.scss

@@ -173,15 +173,15 @@
 		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;
 		}
 	}
 }
 
-@keyframes edit-post-layout__slide-in-animation {
+@keyframes edit-post-post-publish-panel__slide-in-animation {
 	100% {
 		transform: translateX(0%);
 	}

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>
 	);
 };