Skip to content

Commit

Permalink
Add animation to the sidebar. (#13635)
Browse files Browse the repository at this point in the history
  • Loading branch information
jasmussen authored and youknowriad committed Mar 6, 2019
1 parent a92717c commit ff020f9
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 12 deletions.
10 changes: 10 additions & 0 deletions packages/components/src/animate/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`).
11 changes: 11 additions & 0 deletions packages/components/src/animate/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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( {} );
}

Expand Down
15 changes: 15 additions & 0 deletions packages/components/src/animate/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 }")]` ) );
}
4 changes: 2 additions & 2 deletions packages/edit-post/src/components/layout/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
}
Expand Down
27 changes: 18 additions & 9 deletions packages/edit-post/src/components/sidebar/index.js
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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>
);
};
Expand Down

0 comments on commit ff020f9

Please sign in to comment.