Fix regressions in link UI (#6217)

* Polish link UI. The link UI was a bit of a mess, this cleans it up a bit, and fixes some visual glitches as part of the recent input style tweaks. * Fix Button block URL Further optimizes and cleans up the CSS. * Remove z-index Turns out it worked unexpectedly, and the issue is fixed isn't necessarily important to address.
WordPress · Apr 18, 2018 · 4116526 · 4116526
1 parent 79c00f9
commit 4116526
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 71 deletions.
diff --git a/blocks/library/button/editor.scss b/blocks/library/button/editor.scss
@@ -13,36 +13,36 @@
 	margin-bottom: 0;
 	position: relative;
 
-	.blocks-format-toolbar__link-modal {
-		z-index: 2;
-		top: calc( 100% + 2px );
-		left: 50%;
-		transform: translateX( -50% );
-	}
-
-	.blocks-link-url__suggestions {
-		right: -35px;
-	}
-
 	.blocks-rich-text__tinymce {
 		cursor: text;
 	}
 }
 
 .blocks-button__inline-link {
 	background: #fff;
-	width: 280px;
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	font-family: $default-font;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
 
+	$blocks-button__link-input-width: 280px;
+	width: $blocks-button__link-input-width;
+
 	.blocks-url-input {
 		width: auto;
 	}
 
+	.blocks-url-input__suggestions {
+		width: $blocks-button__link-input-width - $icon-button-size - $icon-button-size;
+		z-index: z-index( '.blocks-button__inline-link .blocks-url-input__suggestions' );
+	}
+
+	> .dashicon {
+		width: $icon-button-size;
+	}
+
 	.dashicon {
 		color: $dark-gray-100;
 	}

diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss
@@ -59,16 +59,6 @@
 }
 /*!rtl:end:ignore*/
 
-.editor-block-list__block[data-type="core/image"] {
-	.blocks-format-toolbar__link-modal {
-		top: 0;
-		left: 0;
-		position: absolute;
-		border: none;
-		width: 100%;
-	}
-}
-
 .wp-core-ui .wp-block-audio__upload-button.button,
 .wp-core-ui .wp-block-image__upload-button.button,
 .wp-core-ui .wp-block-video__upload-button.button {

diff --git a/blocks/rich-text/format-toolbar/style.scss b/blocks/rich-text/format-toolbar/style.scss
@@ -17,10 +17,6 @@
 }
 
 .blocks-format-toolbar__link-modal-line {
-	$button-size: 36px;
-	$input-padding: 10px;
-	$input-size: 230px;
-
 	display: flex;
 	flex-direction: row;
 	flex-grow: 1;
@@ -30,30 +26,8 @@
 
 	.components-button {
 		flex-shrink: 0;
-		width: $button-size;
-		height: $button-size;
-	}
-
-	.blocks-url-input {
-		width: $input-size;
-
-		input {
-			padding: $input-padding;
-			margin: 0;
-		}
-	}
-
-	.blocks-url-input__suggestions {
-		border-top: 1px solid $light-gray-500;
-		box-shadow: none;
-		padding: 4px 0;
-		position: relative;
-		width: $input-size + $button-size * 2;
-	}
-
-	.blocks-url-input__suggestion {
-		color: $dark-gray-100;
-		padding: 4px ( $button-size + $input-padding );
+		width: $icon-button-size;
+		height: $icon-button-size;
 	}
 }
 
@@ -62,7 +36,7 @@
 }
 
 .blocks-format-toolbar__link-value {
-	margin: 10px;
+	margin: $item-spacing - 1px; // subtract border
 	flex-grow: 1;
 	flex-shrink: 1;
 	overflow: hidden;

diff --git a/blocks/url-input/style.scss b/blocks/url-input/style.scss
@@ -1,27 +1,24 @@
 // Link input
-.blocks-url-input {
+$input-padding: 10px;
+$input-size: 230px;
+
+.editor-block-list__block .blocks-url-input {
 	width: 100%;
 	flex-grow: 1;
 	position: relative;
+	width: $input-size;
 
 	input[type=text] {
-		padding: 10px;
-		font-size: $default-font-size;
 		width: 100%;
+		padding: $input-padding;
 		border: none;
-		outline: none;
-		box-shadow: none;
+		margin: 0;
+
 		&::-ms-clear {
 			display: none;
 		}
 	}
 
-	&:focus {
-		border: none;
-		box-shadow: none;
-		outline: none;
-	}
-
 	.spinner {
 		position: absolute;
 		right: 0;
@@ -30,35 +27,42 @@
 	}
 }
 
+// Suggestions
 .blocks-url-input__suggestions {
 	position: absolute;
-	top: 100%;
-	left: 0;
-	right: -64px; // to match the link modal borders
 	background: $white;
+	box-shadow: $shadow-popover;
+	border: 1px solid $light-gray-500;
 	max-height: 200px;
 	overflow-y: scroll;
 	transition: all .15s ease-in-out;
 	list-style: none;
-	margin: 0;
-	box-shadow: 0 3px 20px rgba( 18, 24, 30, .1 ), 0 1px 3px rgba( 18, 24, 30, .1 );
-	z-index: z-index( '.blocks-url-input__suggestions' )
+	margin: 0 -1px;
+	padding: 4px 0;
+	width: $input-size + $icon-button-size * 2 + 2px; // add borders
 }
 
 .blocks-url-input__suggestion {
-	color: $dark-gray-500;
+	padding: 4px #{ $icon-button-size + $input-padding } 4px $input-padding;
+	color: $dark-gray-300; // lightest we can use for contrast
 	display: block;
 	font-size: $default-font-size;
-	padding: 4px 8px;
 	cursor: pointer;
 	background: $white;
 	width: 100%;
 	border: none;
 	text-align: left;
+	@include menu-style__neutral();
+
+	&:hover {
+		background: $light-gray-500;
+	}
 
+	&:focus,
 	&.is-selected {
-		background: $blue-dark-900;
+		background: darken( $blue-medium-500, 15 ); // is overridden in _admin-schemes.scss to be theme dependant
 		color: $white;
+		outline: none;
 	}
 }
 

diff --git a/edit-post/assets/stylesheets/_admin-schemes.scss b/edit-post/assets/stylesheets/_admin-schemes.scss
@@ -64,5 +64,11 @@ $scheme-sunrise__spot-color: #de823f;
 		.react-datepicker__day--selected {
 			background-color: $spot-color;
 		}
+
+		// URL suggestions
+		.blocks-url-input__suggestion:focus,
+		.blocks-url-input__suggestion.is-selected {
+			background: darken( $spot-color, 15 );
+		}
 	}
 }
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -26,6 +26,7 @@ $z-layers: (
 	'.editor-block-settings-menu__popover': 21, // Below the header, but above the block toolbar
 	'.blocks-url-input__suggestions': 30,
 	'.edit-post-header': 30,
+	'.blocks-button__inline-link .blocks-url-input__suggestions': 6, // URL suggestions for button block above sibling inserter
 	'.wp-block-image__resize-handlers': 1, // Resize handlers above sibling inserter
 
 	// Should have lower index than anything else positioned inside the block containers