Code Quality: Improve prefix, better scope, for animations

This PR maybe fixes #11673, maybe fixes #11668. At least, this is the intention. It does two things: - It changes the naming scheme for all animations. Instead of having a mix of underscores and dashes for word separation, it uses BEM (to the best of my ability) to add consistency and a new naming convention for all animations. - It adds a prefix to all animations, indicating they are for the editor. Though perhaps we should have a more _admin_ specific prefix given these might one day be used outside the admin? - It moves all keyframe animations out of the mixins file, and into the edit-post style. This is because keyframe definitions don't work well with mixins and are just duplicated. This PR has been tested for all the animations I could find that were using the ones defined. But please give me a sanity check. By the way I noticed the following two animations do not appear to be used: - editor-animation__animate-fade - editor-animation__move-background Should we remove those? Or can anyone recall where they were intended to be used?
WordPress · Nov 13, 2018 · b87c5e9 · b87c5e9
1 parent 4cc3ac0
commit b87c5e9
Show file tree

Hide file tree

Showing 15 changed files with 81 additions and 75 deletions.
diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss
@@ -1,78 +1,42 @@
-@keyframes fade-in {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
-@mixin animate_fade {
-	animation: animate_fade 0.1s ease-out;
+@mixin editor-animation__animate-fade {
+	animation: editor-animation__animate-fade 0.1s ease-out;
 	animation-fill-mode: forwards;
 }
 
-@mixin move_background {
+@mixin editor-animation__move-background {
 	background-size: 28px 28px;
-	animation: move_background 0.5s linear infinite;
+	animation: editor-animation__move-background 0.5s linear infinite;
 }
 
-@mixin loading_fade {
-	animation: loading_fade 1.6s ease-in-out infinite;
+@mixin editor-animation__loading-fade {
+	animation: editor-animation__loading-fade 1.6s ease-in-out infinite;
 }
 
-@mixin slide_in_right {
+@mixin editor-animation__slide-in-right {
 	transform: translateX(+100%);
-	animation: slide_in_right 0.1s forwards;
+	animation: editor-animation__slide-in-right 0.1s forwards;
 }
 
-@mixin slide_in_top {
+@mixin editor-animation__slide-in-top {
 	transform: translateY(-100%);
-	animation: slide_in_top 0.1s forwards;
+	animation: editor-animation__slide-in-top 0.1s forwards;
 }
 
-@mixin fade_in($speed: 0.2s, $delay: 0s) {
-	animation: fade-in $speed ease-out $delay;
+@mixin editor-animation__fade-in($speed: 0.2s, $delay: 0s) {
+	animation: editor-animation__fade-in $speed ease-out $delay;
 	animation-fill-mode: forwards;
 }
 
-@keyframes editor_region_focus {
-	from {
-		box-shadow: inset 0 0 0 0 $blue-medium-400;
-	}
-	to {
-		box-shadow: inset 0 0 0 4px $blue-medium-400;
-	}
-}
-
-@mixin region_focus($speed: 0.2s) {
-	animation: editor_region_focus $speed ease-out;
+@mixin editor-animation__region-focus($speed: 0.2s) {
+	animation: editor-animation__region-focus $speed ease-out;
 	animation-fill-mode: forwards;
 }
 
-@keyframes rotation {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-@mixin animate_rotation($speed: 1s) {
-	animation: rotation $speed infinite linear;
-}
-
-@keyframes modal-appear {
-	from {
-		margin-top: $grid-size * 4;
-	}
-	to {
-		margin-top: 0;
-	}
+@mixin editor-animation__rotation($speed: 1s) {
+	animation: editor-animation__rotation $speed infinite linear;
 }
 
-@mixin modal_appear() {
-	animation: modal-appear 0.1s ease-out;
+@mixin editor-animation__modal-appear() {
+	animation: editor-animation__modal-appear 0.1s ease-out;
 	animation-fill-mode: forwards;
 }
diff --git a/packages/block-library/src/file/editor.scss b/packages/block-library/src/file/editor.scss
@@ -5,7 +5,7 @@
 	margin-bottom: 0;
 
 	&.is-transient {
-		@include loading_fade;
+		@include editor-animation__loading-fade;
 	}
 
 	.wp-block-file__content-wrapper {

diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -18,7 +18,7 @@ ul.wp-block-gallery li {
 	}
 
 	&.is-transient img {
-		@include loading_fade;
+		@include editor-animation__loading-fade;
 	}
 
 	.editor-rich-text {

diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -2,7 +2,7 @@
 	position: relative;
 
 	&.is-transient img {
-		@include loading_fade;
+		@include editor-animation__loading-fade;
 	}
 
 	figcaption img {

diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -8,6 +8,6 @@
 		right: 0;
 		pointer-events: none;
 		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
-		@include region_focus(0.1s);
+		@include editor-animation__region-focus(0.1s);
 	}
 }
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
@@ -9,7 +9,7 @@
 	z-index: z-index(".components-modal__screen-overlay");
 
 	// This animates the appearance of the white background.
-	@include fade-in();
+	@include editor-animation__fade-in();
 }
 
 // The modal window element.
@@ -40,7 +40,7 @@
 		transform: translate(-50%, -50%);
 
 		// Animate the modal frame/contents appearing on the page.
-		@include modal_appear();
+		@include editor_animation__modal-appear();
 	}
 }
 

diff --git a/packages/components/src/spinner/style.scss b/packages/components/src/spinner/style.scss
@@ -19,6 +19,6 @@
 		height: 4px;
 		border-radius: 100%;
 		transform-origin: 6px 6px;
-		@include animate_rotation;
+		@include editor-animation__rotation;
 	}
 }
diff --git a/packages/edit-post/src/components/fullscreen-mode/style.scss b/packages/edit-post/src/components/fullscreen-mode/style.scss
@@ -19,9 +19,9 @@ body.is-fullscreen-mode {
 	}
 
 	// Animations
-	@include fade_in(0.3s);
+	@include editor-animation__fade-in(0.3s);
 
 	.edit-post-header {
-		@include slide_in_top();
+		@include editor-animation__slide-in-top();
 	}
 }
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -128,7 +128,7 @@
 		left: auto;
 		width: $sidebar-width;
 		border-left: $border-width solid $light-gray-500;
-		@include slide_in_right;
+		@include editor-animation__slide-in-right;
 
 		body.is-fullscreen-mode & {
 			top: 0;

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -20,8 +20,15 @@
 @import "./components/visual-editor/style.scss";
 @import "./components/options-modal/style.scss";
 
-// Fade animations
-@keyframes animate_fade {
+
+/**
+ * Animations
+ */
+
+// 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 editor-animation__animate-fade {
 	from {
 		opacity: 0;
 		transform: translateY(4px);
@@ -32,7 +39,7 @@
 	}
 }
 
-@keyframes move_background {
+@keyframes editor-animation__move-background {
 	from {
 		background-position: 0 0;
 	}
@@ -41,7 +48,7 @@
 	}
 }
 
-@keyframes loading_fade {
+@keyframes editor-animation__loading-fade {
 	0% {
 		opacity: 0.5;
 	}
@@ -53,17 +60,52 @@
 	}
 }
 
-@keyframes slide_in_right {
+@keyframes editor-animation__slide-in-right {
 	100% {
 		transform: translateX(0%);
 	}
 }
 
-@keyframes slide_in_top {
+@keyframes editor-animation__slide-in-top {
 	100% {
 		transform: translateY(0%);
 	}
 }
+@keyframes editor-animation__fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes editor-animation__region-focus {
+	from {
+		box-shadow: inset 0 0 0 0 $blue-medium-400;
+	}
+	to {
+		box-shadow: inset 0 0 0 4px $blue-medium-400;
+	}
+}
+
+@keyframes editor-animation__rotation {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes editor-animation__modal-appear {
+	from {
+		margin-top: $grid-size * 4;
+	}
+	to {
+		margin-top: 0;
+	}
+}
 
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
@@ -901,7 +901,7 @@
 		// Animate in
 		.editor-block-list__block:hover & {
 			opacity: 0;
-			@include fade_in(60ms, 0.5s);
+			@include editor-animation__fade-in(60ms, 0.5s);
 		}
 	}
 

diff --git a/packages/editor/src/components/block-mover/style.scss b/packages/editor/src/components/block-mover/style.scss
@@ -3,7 +3,7 @@
 	opacity: 0;
 
 	&.is-visible {
-		@include fade_in;
+		@include editor-animation__fade-in;
 	}
 
 	// 24px is the smallest size of a good pressable button.

diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss
@@ -5,7 +5,7 @@
 	overflow: hidden;
 
 	&.is-saving {
-		animation: loading_fade 0.5s infinite;
+		animation: editor-animation__loading-fade 0.5s infinite;
 	}
 
 	.dashicon {

diff --git a/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap b/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap
@@ -8,7 +8,7 @@ src: url(sansation_light.woff);
 `;
 
 exports[`CSS selector wrap should ignore keyframes 1`] = `
-"@keyframes move_background {
+"@keyframes editor-animation__move-background {
 from {
 background-position: 0 0;
 }

diff --git a/packages/editor/src/editor-styles/transforms/test/wrap.js b/packages/editor/src/editor-styles/transforms/test/wrap.js
@@ -40,7 +40,7 @@ describe( 'CSS selector wrap', () => {
 	it( 'should ignore keyframes', () => {
 		const callback = wrap( '.my-namespace' );
 		const input = `
-		@keyframes move_background {
+		@keyframes editor-animation__move-background {
 			from {
 				background-position: 0 0;
 			}