Polish sidebar controls (#23578)

* Polish tab focus. * Polish status & visibility, refactor "is-destructive". * Polish checkbox. * Polish toggle control. * Radio control. * Polish post publish position. * Outline tertiary buttons in high contrast mode.
WordPress · Jul 2, 2020 · 4fe793a · 4fe793a
1 parent 0e9c21f
commit 4fe793a
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 72 deletions.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -289,26 +289,28 @@
 
 @mixin checkbox-control {
 	@include input-control;
-	border: $border-width + 1 solid $medium-gray-text;
+	border: $border-width solid $dark-gray-primary;
 	margin-right: $grid-unit-15;
 	transition: none;
 	border-radius: $radius-block-ui;
 
 	&:focus {
-		border-color: $medium-gray-text;
-		box-shadow: 0 0 0 1px $medium-gray-text;
+		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) var(--wp-admin-theme-color);
+
+		// Only visible in Windows High Contrast mode.
+		outline: 2px solid transparent;
 	}
 
 	&:checked {
 		background: var(--wp-admin-theme-color);
 		border-color: var(--wp-admin-theme-color);
-	}
 
-	&:checked:focus {
-		box-shadow: 0 0 0 $border-width-focus $medium-gray-text;
+		// Hide default checkbox styles in IE.
+		&::-ms-check {
+			opacity: 0;
+		}
 	}
 
-
 	&:checked::before,
 	&[aria-checked="mixed"]::before {
 		margin: -3px -5px;
@@ -343,45 +345,40 @@
 				font-size: 21px;
 			}
 		}
-
-		&:focus {
-			box-shadow: 0 0 0 $border-width-focus $dark-gray-500;
-		}
 	}
 }
 
 @mixin radio-control {
 	@include input-control;
-	border: $border-width + 1 solid $medium-gray-text;
+	border: $border-width solid $dark-gray-primary;
 	margin-right: $grid-unit-15;
 	transition: none;
 	border-radius: $radius-round;
 
 	&:checked::before {
-		width: 6px;
-		height: 6px;
-		margin: 6px 0 0 6px;
+		width: 7px;
+		height: 7px;
+		margin: 8px 0 0 8px;
 		background-color: $white;
 
 		@include break-medium() {
-			margin: 3px 0 0 3px;
+			width: 6px;
+			height: 6px;
+			margin: 4px 0 0 4px;
 		}
 	}
 
 	&:focus {
-		border-color: $medium-gray-text;
-		box-shadow: 0 0 0 1px $medium-gray-text;
+		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) var(--wp-admin-theme-color);
+
+		// Only visible in Windows High Contrast mode.
+		outline: 2px solid transparent;
 	}
 
 	&:checked {
 		background: var(--wp-admin-theme-color);
 		border-color: var(--wp-admin-theme-color);
 	}
-
-	&:checked:focus {
-		box-shadow: 0 0 0 $border-width-focus $medium-gray-text;
-	}
-
 }
 
 /**

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -154,6 +154,9 @@
 			display: inline-block;
 			flex: 0 0 auto;
 		}
+
+		// Windows High Contrast mode.
+		outline: 1px dotted transparent;
 	}
 
 	/**
@@ -191,9 +194,26 @@
 		}
 	}
 
-	// Link buttons that are red to indicate destructive behavior.
-	&.is-link.is-destructive {
-		color: $alert-red;
+	/**
+	 * Buttons that indicate destructive actions.
+	 */
+
+	&.is-destructive {
+		color: darken($alert-red, 15%);
+
+		&.is-secondary {
+			box-shadow: inset 0 0 0 $border-width darken($alert-red, 15%);
+		}
+
+		&:hover:not(:disabled),
+		&:active:not(:disabled) {
+			color: darken($alert-red, 20%);
+			box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%);
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus darken($alert-red, 20%);
+		}
 	}
 
 	&:not([aria-disabled="true"]):active {

diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
@@ -26,9 +26,8 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	transition: 0.1s border-color ease-in-out;
 	@include reduce-motion("transition");
 
-
 	&:focus {
-		box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) var(--wp-admin-theme-color);
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -44,10 +43,6 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 		}
 	}
 
-	&:focus:checked {
-		border: none;
-	}
-
 	&:checked::before {
 		content: none;
 	}

diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
@@ -1,6 +1,6 @@
 $toggle-width: 36px;
 $toggle-height: 18px;
-$toggle-border-width: 2px;
+$toggle-border-width: 1px;
 
 .components-form-toggle {
 	position: relative;
@@ -13,7 +13,7 @@ $toggle-border-width: 2px;
 		box-sizing: border-box;
 		vertical-align: top;
 		background-color: $white;
-		border: $toggle-border-width solid $dark-gray-300;
+		border: $toggle-border-width solid $dark-gray-primary;
 		width: $toggle-width;
 		height: $toggle-height;
 		border-radius: $toggle-height / 2;
@@ -25,30 +25,15 @@ $toggle-border-width: 2px;
 		display: block;
 		position: absolute;
 		box-sizing: border-box;
-		top: $toggle-border-width * 2;
-		left: $toggle-border-width * 2;
-		width: $toggle-height - ($toggle-border-width * 4);
-		height: $toggle-height - ($toggle-border-width * 4);
+		top: $toggle-border-width * 3;
+		left: $toggle-border-width * 3;
+		width: $toggle-height - ($toggle-border-width * 6);
+		height: $toggle-height - ($toggle-border-width * 6);
 		border-radius: 50%;
 		transition: 0.1s transform ease;
 		@include reduce-motion("transition");
-		background-color: $dark-gray-300;
-		border: 5px solid $dark-gray-300; // Has explicit border to act as a fill in Windows High Contrast Mode.
-	}
-
-	&:hover {
-		.components-form-toggle__track {
-			border: $toggle-border-width solid $dark-gray-500;
-		}
-
-		.components-form-toggle__thumb {
-			background-color: $dark-gray-500;
-			border: 5px solid $dark-gray-300; // Has explicit border to act as a fill in Windows High Contrast Mode.
-		}
-
-		.components-form-toggle__off {
-			color: $dark-gray-500;
-		}
+		background-color: $dark-gray-primary;
+		border: 5px solid $dark-gray-primary; // Has explicit border to act as a fill in Windows High Contrast Mode.
 	}
 
 	// Checked state.
@@ -58,7 +43,7 @@ $toggle-border-width: 2px;
 		border: #{ $toggle-height / 2 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
 	}
 
-	&__input:focus + .components-form-toggle__track {
+	.components-form-toggle__input:focus + .components-form-toggle__track {
 		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) var(--wp-admin-theme-color);
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.

diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
@@ -133,15 +133,16 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-top: 20px;
+	margin-top: $grid-unit-10;
+	min-height: $button-size;
 
 	select {
 		// Necessary for select to respond to flexbox
 		min-width: 0;
 	}
 
 	label {
-		margin-right: 10px;
+		margin-right: $grid-unit-15;
 		flex-shrink: 0;
 		max-width: 75%;
 	}

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -34,7 +34,7 @@
 		z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
 		top: $admin-bar-height;
 		left: auto;
-		width: $sidebar-width;
+		width: $sidebar-width + $border-width;
 		border-left: $border-width solid $light-gray-500;
 		transform: translateX(+100%);
 		animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;

diff --git a/packages/edit-post/src/components/sidebar/post-schedule/index.js b/packages/edit-post/src/components/sidebar/post-schedule/index.js
@@ -23,7 +23,7 @@ export function PostSchedule() {
 								className="edit-post-post-schedule__toggle"
 								onClick={ onToggle }
 								aria-expanded={ isOpen }
-								isLink
+								isTertiary
 							>
 								<PostScheduleLabel />
 							</Button>

diff --git a/packages/edit-post/src/components/sidebar/post-schedule/style.scss b/packages/edit-post/src/components/sidebar/post-schedule/style.scss
@@ -1,6 +1,12 @@
 .edit-post-post-schedule {
 	width: 100%;
 	position: relative;
+	justify-content: left;
+
+	span {
+		display: block;
+		width: 35%;
+	}
 }
 
 .components-button.edit-post-post-schedule__toggle {

diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js
@@ -29,7 +29,7 @@ export function PostVisibility() {
 									aria-expanded={ isOpen }
 									className="edit-post-post-visibility__toggle"
 									onClick={ onToggle }
-									isLink
+									isTertiary
 								>
 									<PostVisibilityLabel />
 								</Button>

diff --git a/packages/edit-post/src/components/sidebar/post-visibility/style.scss b/packages/edit-post/src/components/sidebar/post-visibility/style.scss
@@ -1,5 +1,11 @@
 .edit-post-post-visibility {
 	width: 100%;
+	justify-content: left;
+
+	span {
+		display: block;
+		width: 35%;
+	}
 }
 
 .edit-post-post-visibility__dialog .components-popover__content {

diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -43,6 +43,8 @@
 
 	&:focus {
 		box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color);
+		position: relative;
+		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
 	}
 
 	&.is-active:focus {

diff --git a/packages/editor/src/components/post-trash/index.js b/packages/editor/src/components/post-trash/index.js
@@ -14,8 +14,13 @@ function PostTrash( { isNew, postId, postType, ...props } ) {
 	const onClick = () => props.trashPost( postId, postType );
 
 	return (
-		<Button className="editor-post-trash is-link" onClick={ onClick }>
-			{ __( 'Move to Trash' ) }
+		<Button
+			className="editor-post-trash"
+			isDestructive
+			isTertiary
+			onClick={ onClick }
+		>
+			{ __( 'Move to trash' ) }
 		</Button>
 	);
 }

diff --git a/packages/editor/src/components/post-trash/style.scss b/packages/editor/src/components/post-trash/style.scss
@@ -1,11 +1,3 @@
 .editor-post-trash.components-button {
-	color: darken($alert-red, 15%);
-	border-color: darken($alert-red, 15%);
-	justify-content: center;
-
-	&:not(:disabled):not([aria-disabled="true"]):hover,
-	&:not([aria-disabled="true"]):focus {
-		color: darken($alert-red, 20%);
-		border-color: darken($alert-red, 20%);
-	}
+	margin-left: -6px; // Optically align the button with elements above.
 }