Fix issue with tertiary button hit areas (WordPress#10888)

* Fix issue with tertiary button hit areas This addressed feedback in WordPress#10552 (comment). It makes the tertiary button style be born with the same hit area as a button, because it is intended to be used as such, just with a different styling. * Address feedback. * Clarify comment.
antpb · Oct 26, 2018 · 6d66009 · 6d66009
1 parent 6bd27d0
commit 6d66009
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -14,7 +14,7 @@
 		height: 28px;
 		border-radius: 3px;
 		white-space: nowrap;
-		border-width: 1px;
+		border-width: $border-width;
 		border-style: solid;
 	}
 
@@ -196,6 +196,11 @@
 	&.is-tertiary {
 		color: theme(outlines);
 
+		// Matches default button in hit area. See line 11.
+		padding: 0 10px;
+		line-height: 26px;
+		height: 28px;
+
 		.dashicon {
 			display: inline-block;
 			flex: 0 0 auto;

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -94,14 +94,31 @@
 		background: $dark-gray-500;
 	}
 
+	// Make editor header bar buttons bigger to match IconButtons.
+	&.editor-post-save-draft,
+	&.editor-post-switch-to-draft,
 	&.editor-post-preview,
 	&.editor-post-publish-button,
 	&.editor-post-publish-panel__toggle {
 		margin: 2px;
 		height: 33px;
 		line-height: 32px;
-		padding: 0 5px 2px;
 		font-size: $default-font-size;
+	}
+
+	&.editor-post-save-draft,
+	&.editor-post-switch-to-draft {
+		padding: 0 5px;
+
+		@include break-small() {
+			padding: 0 12px;
+		}
+	}
+
+	&.editor-post-preview,
+	&.editor-post-publish-button,
+	&.editor-post-publish-panel__toggle {
+		padding: 0 5px 2px;
 
 		@include break-small() {
 			padding: 0 12px 2px;

diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss
@@ -16,32 +16,28 @@
 
 .editor-post-saved-state {
 	width: $icon-button-size - 8px;
-
-	@include break-small() {
-		width: auto;
-	}
-}
-
-.editor-post-saved-state,
-.editor-post-save-draft {
 	white-space: nowrap;
-	padding: 8px 4px;
+	padding: #{ $grid-size-small * 3 } $grid-size-small;
 
 	.dashicon {
-		margin-right: 8px;
+		margin-right: $grid-size;
 	}
 
 	@include break-small() {
-		padding: 8px;
+		width: auto;
+		padding: $grid-size #{ $grid-size-small * 3 };
 		text-indent: inherit;
 
 		.dashicon {
-			margin-right: 4px;
+			margin-right: $grid-size-small;
 		}
 	}
 }
 
-.editor-post-save-draft {
+// This needs specificity to override inherited styles.
+.edit-post-header .edit-post-header__settings .components-button.editor-post-save-draft {
+	margin: 0;
+
 	@include break-small() {
 		.dashicon {
 			display: none;