Add hover icon to switcher.

WordPress · Aug 27, 2018 · 95214d8 · 95214d8
1 parent 974f3f2
commit 95214d8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 21 deletions.
diff --git a/packages/editor/src/components/block-switcher/index.js b/packages/editor/src/components/block-switcher/index.js
@@ -79,6 +79,7 @@ export class BlockSwitcher extends Component {
 								onKeyDown={ openOnArrowDown }
 							>
 								<BlockIcon icon={ blockType.icon && blockType.icon.src } showColors />
+								<svg className="editor-block-switcher__transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 8.9c.6-.6 1.4-.9 2.2-.9h6.9l-1.3 1.3 1.4 1.4L19.4 7l-3.7-3.7-1.4 1.4L15.6 6H8.7c-1.4 0-2.6.5-3.6 1.5l-2.8 2.8 1.4 1.4 2.8-2.8zm13.8 2.4l-2.8 2.8c-.6.6-1.3.9-2.1.9h-7l1.3-1.3-1.4-1.4L4.6 16l3.7 3.7 1.4-1.4L8.4 17h6.9c1.3 0 2.6-.5 3.5-1.5l2.8-2.8-1.3-1.4z" /></svg>
 							</IconButton>
 						</Toolbar>
 					);

diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss
@@ -8,7 +8,29 @@
 .components-icon-button.editor-block-switcher__toggle {
 	width: auto;
 	margin: 0;
-	padding: 6px;
+	display: block;
+	height: $icon-button-size;
+	padding: 6px 3px;
+	width: $icon-button-size + 6px + 6px; // Include padding in width.
+
+	// Paint a dropdown.
+	&::after {
+		content: "";
+		pointer-events: none;
+		display: block;
+		position: absolute;
+		top: $icon-button-size / 2;
+		width: 0;
+		height: 0;
+		border-left: 3px solid transparent;
+		border-right: 3px solid transparent;
+		border-top: 4px solid $dark-gray-500;
+		right: 6px;
+
+		@include break-small() {
+			right: 9px;
+		}
+	}
 
 	// Unset icon button styles.
 	&:active,
@@ -20,37 +42,37 @@
 		border: none;
 	}
 
-	.editor-block-icon {
+	.editor-block-icon,
+	.editor-block-switcher__transform {
 		height: $icon-button-size-small;
 		margin: 0;
 		padding: 0 6px;
 		display: flex;
 		align-items: center;
+		transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
 	}
 
-	// Block hover style.
-	&:not(:disabled):hover {
-		@include block-style__hover();
+	.editor-block-switcher__transform {
+		margin-top: 6px + 3px;
+		border-radius: $radius-round-rectangle;
+		height: $icon-button-size-small + 6px;
+		padding: 3px 12px 3px 6px;
+	}
 
-		// Paint a dropdown arrow.
-		&::after {
-			content: "";
-			pointer-events: none;
-			display: block;
-			position: absolute;
-			right: 6px;
-			top: $icon-button-size / 2;
-			width: 0;
-			height: 0;
-			border-left: 3px solid transparent;
-			border-right: 3px solid transparent;
-			border-top: 4px solid $light-gray-700;
-		}
+	// Block hover and focus style.
+	&[aria-expanded="true"] .editor-block-icon,
+	&[aria-expanded="true"] .editor-block-switcher__transform,
+	&:not(:disabled):hover .editor-block-icon,
+	&:not(:disabled):hover .editor-block-switcher__transform,
+	&:not(:disabled):focus .editor-block-icon,
+	&:not(:disabled):focus .editor-block-switcher__transform {
+		transform: translateY(-$icon-button-size);
 	}
 
 	// Block focus style.
-	&:not(:disabled):focus {
-		@include block-style__focus-active();
+	&:not(:disabled):focus .editor-block-icon,
+	&:not(:disabled):focus .editor-block-switcher__transform {
+		@include formatting-button-style__focus();
 	}
 }