Tweak switcher to not scale icons down (#9310)

* Tweak switcher to not scale icons down This PR fixes so the new block icons are not scaled down, and therefore blurry, in the switcher. Additionally it removes the gray background color from the "block chip". This is in response to similar changes elswhere in the UI. It also adds a little dropdown arrow on hover, but not sure that adds much value. * Add hover icon to switcher. * Polish, make color friendly * Address feedback and fix for IE11. * Additional IE11 fix. * Make the dropdown arrow slightly larger.
WordPress · Aug 30, 2018 · 9a25ed1 · 9a25ed1
1 parent 566ed6d
commit 9a25ed1
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 12 deletions.
diff --git a/packages/editor/src/components/block-inspector/style.scss b/packages/editor/src/components/block-inspector/style.scss
@@ -42,4 +42,6 @@
 .editor-block-inspector__card .editor-block-icon {
 	margin-left: -2px;
 	margin-right: 10px;
+	padding: 0 3px;
+	height: $icon-button-size-small;
 }
diff --git a/packages/editor/src/components/block-switcher/index.js b/packages/editor/src/components/block-switcher/index.js
@@ -88,6 +88,7 @@ export class BlockSwitcher extends Component {
 								onKeyDown={ openOnArrowDown }
 							>
 								<BlockIcon icon={ blockType.icon && blockType.icon.src } showColors />
+								<svg role="img" aria-hidden="true" focusable="false" 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
@@ -1,13 +1,16 @@
 .editor-block-switcher {
 	position: relative;
+	height: $icon-button-size;
 }
 
 // Style this the same as the block buttons in the library.
 // Needs specificiity to override the icon button.
 .components-icon-button.editor-block-switcher__toggle {
 	width: auto;
 	margin: 0;
-	padding: 6px;
+	display: block;
+	height: $icon-button-size;
+	padding: 6px 3px;
 
 	// Unset icon button styles.
 	&:active,
@@ -19,28 +22,54 @@
 		border: none;
 	}
 
-	.editor-block-icon {
-		background: $light-gray-200;
+	.editor-block-icon,
+	.editor-block-switcher__transform {
+		width: $icon-button-size + 3px + 3px;
+		position: relative;
 		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);
+	}
 
-		svg {
-			height: 21px;
-			width: 21px;
-		}
+	// Add a dropdown arrow indicator.
+	.editor-block-icon::after {
+		content: "";
+		pointer-events: none;
+		display: block;
+		position: absolute;
+		top: $icon-button-size-small / 2 - 1px;
+		width: 0;
+		height: 0;
+		border-left: 3px solid transparent;
+		border-right: 3px solid transparent;
+		border-top: 5px solid currentColor;
+		right: 6px;
+	}
+
+	.editor-block-switcher__transform {
+		margin-top: 6px + 3px;
+		border-radius: $radius-round-rectangle;
+		height: $icon-button-size-small + 6px;
+		padding: 3px 9px 3px 9px;
 	}
 
-	// Block hover style.
-	&:not(:disabled):hover .editor-block-icon {
-		@include block-style__hover();
+	// 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 .editor-block-icon {
-		@include block-style__focus-active();
+	&:not(:disabled):focus .editor-block-icon,
+	&:not(:disabled):focus .editor-block-switcher__transform {
+		@include formatting-button-style__focus();
 	}
 }
 

diff --git a/packages/editor/src/components/block-types-list/style.scss b/packages/editor/src/components/block-types-list/style.scss
@@ -25,6 +25,7 @@
 	border: $border-width solid transparent;
 	transition: all 0.05s ease-in-out;
 	position: relative;
+	float: left; // This shouldn't be necessary, but without it, IE11 mangles margins.
 
 	&:disabled {
 		@include block-style__disabled();