From f4bbc8ab709cd1860dd4de199daec0525e500b5c Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 30 Aug 2019 10:32:18 -0400 Subject: [PATCH] Move loading animation to the Animate component (#17106) * Add loading animation to the Animate component. * Update post-saved-state to use Animate component. * Update file block to use Animate component. * Remove unused animation. * Update README to include the loading animation. * Update packages/block-library/src/file/edit.js Co-Authored-By: Riad Benguella * Remove unnecessary animate prop. * Fix faling unit test which no longer can use shallow rendering --- assets/stylesheets/_animations.scss | 4 -- packages/block-library/src/file/edit.js | 69 ++++++++++--------- packages/block-library/src/file/editor.scss | 4 -- packages/components/src/animate/README.md | 4 ++ packages/components/src/animate/index.js | 8 +++ packages/components/src/animate/style.scss | 16 +++++ packages/edit-post/src/style.scss | 12 ---- packages/edit-widgets/src/style.scss | 12 ---- .../src/components/post-saved-state/index.js | 14 ++-- .../components/post-saved-state/style.scss | 4 -- .../components/post-saved-state/test/index.js | 4 +- playground/src/style.scss | 12 ---- 12 files changed, 76 insertions(+), 87 deletions(-) diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss index 9466001700e03..b5e6655e660cb 100644 --- a/assets/stylesheets/_animations.scss +++ b/assets/stylesheets/_animations.scss @@ -1,7 +1,3 @@ -@mixin edit-post__loading-fade-animation { - animation: edit-post__loading-fade-animation 1.6s ease-in-out infinite; -} - @mixin edit-post__fade-in-animation($speed: 0.2s, $delay: 0s) { animation: edit-post__fade-in-animation $speed ease-out $delay; animation-fill-mode: forwards; diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index 3b7f1fa0e32a3..ad63137fa3416 100644 --- a/packages/block-library/src/file/edit.js +++ b/packages/block-library/src/file/edit.js @@ -12,6 +12,7 @@ import { revokeBlobURL, } from '@wordpress/blob'; import { + Animate, ClipboardButton, IconButton, Toolbar, @@ -205,43 +206,47 @@ class FileEdit extends Component { -
-
- setAttributes( { fileName: text } ) } - /> - { showDownloadButton && -
- { /* Using RichText here instead of PlainText so that it can be styled like a button */ } + + { ( { className: animateClassName } ) => ( +
+
setAttributes( { downloadButtonText: text } ) } + onChange={ ( text ) => setAttributes( { fileName: text } ) } /> + { showDownloadButton && +
+ { /* Using RichText here instead of PlainText so that it can be styled like a button */ } + setAttributes( { downloadButtonText: text } ) } + /> +
+ }
- } -
- { isSelected && - - { showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy URL' ) } - - } -
+ { isSelected && + + { showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy URL' ) } + + } +
+ ) } + ); } diff --git a/packages/block-library/src/file/editor.scss b/packages/block-library/src/file/editor.scss index 25e78effbd528..f24c18d3b4fd9 100644 --- a/packages/block-library/src/file/editor.scss +++ b/packages/block-library/src/file/editor.scss @@ -4,10 +4,6 @@ align-items: center; margin-bottom: 0; - &.is-transient { - @include edit-post__loading-fade-animation; - } - .wp-block-file__content-wrapper { flex-grow: 1; } diff --git a/packages/components/src/animate/README.md b/packages/components/src/animate/README.md index 4d643698cf77e..d334fec6c0741 100644 --- a/packages/components/src/animate/README.md +++ b/packages/components/src/animate/README.md @@ -38,6 +38,10 @@ Name | Type | Default | Description --- | --- | --- | --- `origin` | `string` | `top center` | Point of origin (`top`, `bottom`,` middle right`, `left`, `center`). +### loading + +This animation is meant to be used to indicate that activity is happening in the background. It is an infinitely-looping fade from 50% to full opacity. This animation has no options, and should be removed as soon as its relevant operation is completed. + ### 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. diff --git a/packages/components/src/animate/index.js b/packages/components/src/animate/index.js index 03abc44eae0ed..ee6ca3298e006 100644 --- a/packages/components/src/animate/index.js +++ b/packages/components/src/animate/index.js @@ -30,6 +30,14 @@ function Animate( { type, options = {}, children } ) { } ); } + if ( type === 'loading' ) { + return children( { + className: classnames( + 'components-animate__loading', + ), + } ); + } + return children( {} ); } diff --git a/packages/components/src/animate/style.scss b/packages/components/src/animate/style.scss index 814e1bc370112..b6932156b244a 100644 --- a/packages/components/src/animate/style.scss +++ b/packages/components/src/animate/style.scss @@ -43,3 +43,19 @@ transform: translateX(0%); } } + +.components-animate__loading { + animation: components-animate__loading 1.6s ease-in-out infinite; +} + +@keyframes components-animate__loading { + 0% { + opacity: 0.5; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0.5; + } +} diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index c281f957b1580..0ffb8871dece8 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -30,18 +30,6 @@ // These keyframes should not be part of the _animations.scss mixins file. // Because keyframe animations can't be defined as mixins properly, they are duplicated. // Since hey are intended only for the editor, we add them here instead. -@keyframes edit-post__loading-fade-animation { - 0% { - opacity: 0.5; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0.5; - } -} - @keyframes edit-post__fade-in-animation { from { opacity: 0; diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss index aac1067bcfc15..a768e89053ba7 100644 --- a/packages/edit-widgets/src/style.scss +++ b/packages/edit-widgets/src/style.scss @@ -56,18 +56,6 @@ body.gutenberg_page_gutenberg-widgets { // These keyframes should not be part of the _animations.scss mixins file. // Because keyframe animations can't be defined as mixins properly, they are duplicated. // Since hey are intended only for the editor, we add them here instead. -@keyframes edit-post__loading-fade-animation { - 0% { - opacity: 0.5; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0.5; - } -} - @keyframes edit-post__fade-in-animation { from { opacity: 0; diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js index 18c694d8c0eb8..bb575abd49433 100644 --- a/packages/editor/src/components/post-saved-state/index.js +++ b/packages/editor/src/components/post-saved-state/index.js @@ -8,7 +8,7 @@ import { get } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Dashicon, Button, IconButton } from '@wordpress/components'; +import { Animate, Dashicon, Button, IconButton } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; import { displayShortcut } from '@wordpress/keycodes'; @@ -66,10 +66,14 @@ export class PostSavedState extends Component { } ); return ( - - - { isAutosaving ? __( 'Autosaving' ) : __( 'Saving' ) } - + + { ( { className: animateClassName } ) => ( + + + { isAutosaving ? __( 'Autosaving' ) : __( 'Saving' ) } + + ) } + ); } diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss index 902888bd3aee5..64c731c1e968c 100644 --- a/packages/editor/src/components/post-saved-state/style.scss +++ b/packages/editor/src/components/post-saved-state/style.scss @@ -7,10 +7,6 @@ overflow: hidden; white-space: nowrap; - &.is-saving { - animation: edit-post__loading-fade-animation 0.5s infinite; - } - .dashicon { display: inline-block; flex: 0 0 auto; diff --git a/packages/editor/src/components/post-saved-state/test/index.js b/packages/editor/src/components/post-saved-state/test/index.js index cbb581aa0c6e7..38b094c642321 100644 --- a/packages/editor/src/components/post-saved-state/test/index.js +++ b/packages/editor/src/components/post-saved-state/test/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { shallow } from 'enzyme'; +import { mount, shallow } from 'enzyme'; /** * Internal dependencies @@ -10,7 +10,7 @@ import { PostSavedState } from '../'; describe( 'PostSavedState', () => { it( 'should display saving while save in progress, even if not saveable', () => { - const wrapper = shallow( + const wrapper = mount(