URL input popover visual cleanup (#13973)

* Use chevron instead of ellipsis in url input field options. * Mimic toolbar icon styles for the icons in the URL popover. * Add a left divider before the URL settings toggle * Even up the spacing in the settings panel. * Add periods to code comments. * Update snapshot
WordPress · Mar 6, 2019 · 4726bc6 · 4726bc6
1 parent 403df95
commit 4726bc6
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/packages/editor/src/components/url-popover/index.js b/packages/editor/src/components/url-popover/index.js
@@ -54,7 +54,7 @@ class URLPopover extends Component {
 					{ !! renderSettings && (
 						<IconButton
 							className="editor-url-popover__settings-toggle"
-							icon="ellipsis"
+							icon="arrow-down-alt2"
 							label={ __( 'Link Settings' ) }
 							onClick={ this.toggleSettingsVisibility }
 							aria-expanded={ isSettingsExpanded }

diff --git a/packages/editor/src/components/url-popover/style.scss b/packages/editor/src/components/url-popover/style.scss
@@ -9,19 +9,53 @@
 		flex-grow: 1;
 	}
 
+	// Mimic toolbar component styles for the icons in this popover.
+	.components-icon-button {
+		padding: 3px;
+
+		> svg {
+			padding: 5px;
+			border-radius: $radius-round-rectangle;
+			height: 30px;
+			width: 30px;
+		}
+
+		&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
+			box-shadow: none;
+
+			> svg {
+				@include formatting-button-style__hover;
+			}
+		}
+
+		&:not(:disabled):focus {
+			box-shadow: none;
+
+			> svg {
+				@include formatting-button-style__focus;
+			}
+		}
+	}
+
 	&__settings-toggle {
 		flex-shrink: 0;
-		width: $icon-button-size;
-		height: $icon-button-size;
 
-		.dashicon {
-			transform: rotate(90deg);
+		// Add a left divider to the toggle button.
+		border-radius: 0;
+		border-left: $border-width solid $light-gray-500;
+		margin-left: 1px;
+
+		&[aria-expanded="true"] .dashicon {
+			transform: rotate(180deg);
 		}
 	}
 
 	&__settings {
-		padding: 7px 8px;
+		padding: $panel-padding;
 		border-top: $border-width solid $light-gray-500;
-		padding-top: 7px + $border-width;
+
+		.components-base-control:last-child .components-base-control__field {
+			margin-bottom: 0;
+		}
 	}
 }
diff --git a/packages/editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/editor/src/components/url-popover/test/__snapshots__/index.js.snap
@@ -16,7 +16,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
     <IconButton
       aria-expanded={false}
       className="editor-url-popover__settings-toggle"
-      icon="ellipsis"
+      icon="arrow-down-alt2"
       label="Link Settings"
       onClick={[Function]}
     />
@@ -40,7 +40,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
     <IconButton
       aria-expanded={true}
       className="editor-url-popover__settings-toggle"
-      icon="ellipsis"
+      icon="arrow-down-alt2"
       label="Link Settings"
       onClick={[Function]}
     />