Adjust primary, secondary and tertiary buttons.

This will no doubt need additional feedback, and the branch should stay open for a while to gather all those thoughts. One of the primary reasons for reducing the borders is, similar to tertiary buttons, that they work due to their context, just like how menu ite ms work in their menu item contexts. This puts a great onus on the implementer to choose the right button for the right context. In that vein, w e may even want to provide additional buttons, such as a solid background button that isn't primary, for cases where a primary button is insuffi cient, and a secondary button does not work well enough in the context. An example could be considered the link dialog mocked up here #20007 (comment)
WordPress · Feb 12, 2020 · 7d6acbc · 7d6acbc
1 parent 85f4c85
commit 7d6acbc
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 54 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss
@@ -29,15 +29,6 @@
 
 .block-editor-media-placeholder__button {
 	margin-bottom: 0.5rem;
-
-	.dashicon {
-		vertical-align: middle;
-		margin-bottom: 3px;
-	}
-
-	&:hover {
-		color: $dark-gray-800;
-	}
 }
 
 .block-editor-media-placeholder__cancel-button.is-link {

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -36,35 +36,10 @@
 		outline: 1px solid transparent;
 	}
 
-	// Secondary/default button style.
-	&.is-secondary {
-		white-space: nowrap;
-		color: $theme-color;
-		background: transparent;
-
-		&:hover:not(:disabled) {
-			border-color: $theme-color;
-		}
-
-		&:active:not(:disabled) {
-			background: #f3f5f6;
-			color: color($theme-color shade(5%));
-			border-color: #7e8993;
-			box-shadow: none;
-		}
-
-		&:disabled,
-		&[aria-disabled="true"] {
-			color: #a0a5aa;
-			border-color: #ddd;
-			background: #f7f7f7;
-			text-shadow: 0 $border-width 0 #fff;
-			transform: none;
-			opacity: 1;
-		}
-	}
+	/**
+	 * Primary button style.
+	 */
 
-	// Primary button style.
 	&.is-primary {
 		white-space: nowrap;
 		background: color($theme-color);
@@ -126,7 +101,80 @@
 		}
 	}
 
-	/* Buttons that look like links, for a cross of good semantics with the visual */
+	/**
+	 * Secondary button style.
+	 */
+
+	&.is-secondary {
+		box-shadow: 0 0 0 $border-width $light-gray-secondary;
+		outline: 1px solid transparent; // Shown in high contrast mode.
+		white-space: nowrap;
+		color: $theme-color;
+		background: transparent;
+
+		&:hover:not(:disabled) {
+			color: color($theme-color shade(5%));
+			box-shadow: 0 0 0 $border-width color($theme-color shade(5%));
+		}
+
+		&:active:not(:disabled) {
+			background: #f3f5f6;
+			color: color($theme-color shade(5%));
+			border-color: #7e8993;
+			box-shadow: none;
+		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: #a0a5aa;
+			border-color: #ddd;
+			background: #f7f7f7;
+			text-shadow: 0 $border-width 0 #fff;
+			transform: none;
+			opacity: 1;
+		}
+	}
+
+	/**
+	 * Tertiary buttons.
+	 */
+
+	&.is-tertiary {
+		white-space: nowrap;
+		color: $theme-color;
+		background: transparent;
+
+		&:hover:not(:disabled) {
+			border-color: $theme-color;
+		}
+
+		&:active:not(:disabled) {
+			background: #f3f5f6;
+			color: color($theme-color shade(5%));
+			border-color: #7e8993;
+			box-shadow: none;
+		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: #a0a5aa;
+			border-color: #ddd;
+			background: #f7f7f7;
+			text-shadow: 0 $border-width 0 #fff;
+			transform: none;
+			opacity: 1;
+		}
+
+		.dashicon {
+			display: inline-block;
+			flex: 0 0 auto;
+		}
+	}
+
+	/**
+	 * Link buttons.
+	 */
+
 	&.is-link {
 		margin: 0;
 		padding: 0;
@@ -158,7 +206,7 @@
 		}
 	}
 
-	/* Link buttons that are red to indicate destructive behavior. */
+	// Link buttons that are red to indicate destructive behavior.
 	&.is-link.is-destructive {
 		color: $alert-red;
 	}
@@ -194,20 +242,6 @@
 		}
 	}
 
-	// Buttons that are text-based.
-	&.is-tertiary {
-		color: $theme-color;
-
-		.dashicon {
-			display: inline-block;
-			flex: 0 0 auto;
-		}
-
-		&:not(:disabled):not([aria-disabled="true"]):hover {
-			color: color($theme-color shade(25%));
-		}
-	}
-
 	&.has-icon {
 		padding: 6px; // Works for 24px icons. Smaller icons are vertically centered by flex alignments.
 

diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
@@ -184,7 +184,7 @@ export class PostPreviewButton extends Component {
 
 		return (
 			<Button
-				isSecondary
+				isTertiary
 				className="editor-post-preview"
 				href={ href }
 				target={ this.getWindowTarget() }