Polish tertiary actions, switches, save state (WordPress#10552)

* Polish Save Draft/Switch to Draft area
* Use a Button for Trash button
* Polish the toggles.

packages/components/src/button/index.js

@@ -15,6 +15,7 @@ export function Button( props, ref ) {
 		isPrimary,
 		isLarge,
 		isSmall,
+		isTertiary,
 		isToggled,
 		isBusy,
 		isDefault,
@@ -31,6 +32,7 @@ export function Button( props, ref ) {
 		'is-primary': isPrimary,
 		'is-large': isLarge,
 		'is-small': isSmall,
+		'is-tertiary': isTertiary,
 		'is-toggled': isToggled,
 		'is-busy': isBusy,
 		'is-link': isLink,

packages/components/src/button/style.scss

@@ -191,6 +191,30 @@
 		padding: 0 8px 1px;
 		font-size: 11px;
 	}
+
+	// Buttons that are text-based.
+	&.is-tertiary {
+		color: theme(outlines);
+
+		.dashicon {
+			display: inline-block;
+			flex: 0 0 auto;
+		}
+
+		// Ensure that even SVG icons that don't include the .dashicon class are colored.
+		svg {
+			fill: currentColor;
+			outline: none;
+		}
+
+		&:active:focus:enabled {
+			box-shadow: none;
+		}
+
+		&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
+			color: color(theme(outlines) shade(25%));
+		}
+	}
 }
 
 @keyframes components-button__busy-animation {

packages/components/src/form-toggle/style.scss

@@ -5,7 +5,7 @@ $toggle-border-width: 2px;
 .components-form-toggle {
 	position: relative;
 
-	// On/Off icon indicators
+	// On/Off icon indicators.
 	.components-form-toggle__on,
 	.components-form-toggle__off {
 		position: absolute;
@@ -19,10 +19,10 @@ $toggle-border-width: 2px;
 	}
 
 	.components-form-toggle__on {
-		left: $toggle-border-width * 3 + 2px; // indent 2px extra because icon is thinner
+		left: $toggle-border-width * 3 + 2px; // Indent 2px extra because icon is thinner.
 	}
 
-	// unchecked state
+	// Unchecked state.
 	.components-form-toggle__track {
 		content: "";
 		display: inline-block;
@@ -45,7 +45,7 @@ $toggle-border-width: 2px;
 		border-radius: 50%;
 		transition: 0.1s transform ease;
 		background-color: $dark-gray-300;
-		border: 5px solid $dark-gray-300; // has explicit border to act as a fill in Windows High Contrast Mode
+		border: 5px solid $dark-gray-300; // Has explicit border to act as a fill in Windows High Contrast Mode.
 	}
 
 	&:hover {
@@ -55,7 +55,7 @@ $toggle-border-width: 2px;
 
 		.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
+			border: 5px solid $dark-gray-300; // Has explicit border to act as a fill in Windows High Contrast Mode.
 		}
 
 		.components-form-toggle__off {
@@ -67,7 +67,7 @@ $toggle-border-width: 2px;
 	&.is-checked .components-form-toggle__track {
 		background-color: theme(toggle);
 		border: $toggle-border-width solid theme(toggle);
-		border: #{ $toggle-height / 2 } solid transparent; // expand the border to fake a solid in Windows High Contrast Mode
+		border: #{ $toggle-height / 2 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
 	}
 
 	&__input:focus + .components-form-toggle__track {
@@ -77,7 +77,7 @@ $toggle-border-width: 2px;
 	&.is-checked {
 		.components-form-toggle__thumb {
 			background-color: $white;
-			border-width: 0; // zero out the border color to make the thumb invisible in Windows High Contrast Mode
+			border-width: 0; // Zero out the border color to make the thumb invisible in Windows High Contrast Mode.
 			transform: translateX($toggle-width - ($toggle-border-width * 4) - ($toggle-height - ($toggle-border-width * 4)));
 		}
 
@@ -100,20 +100,20 @@ $toggle-border-width: 2px;
 	z-index: z-index(".components-form-toggle__input");
 }
 
-// Ensure on indicator works in normal and Windows high contrast mode both
+// Ensure on indicator works in normal and Windows high contrast mode both.
 .components-form-toggle .components-form-toggle__on {
-	// outlines show up in windows high contrast mode
+	// Outlines show up in windows high contrast mode.
 	outline: $border-width solid transparent;
 	outline-offset: -1px;
 
-	// this colors the indicator black, then inverts it for normal mode
+	// This colors the indicator black, then inverts it for normal mode.
 	border: $border-width solid $black;
-	filter: invert(100%) contrast(500%); // this makes the icon white for normal mode, and it makes it dark blue in Windows High Contrast Mode
+	filter: invert(100%) contrast(500%); // This makes the icon white for normal mode, and it makes it dark blue in Windows High Contrast Mode.
 }
 
 @supports (-ms-high-contrast-adjust: auto) {
-	// Edge stacks outlines on top of the SVG itself, and when showing them in high contrast mode it means they get inverted again
-	// Therefore, show a different style for the on indicator only in Edge and IE11
+	// Edge stacks outlines on top of the SVG itself, and when showing them in high contrast mode it means they get inverted again.
+	// Therefore, show a different style for the on indicator only in Edge and IE11.
 	.components-form-toggle .components-form-toggle__on {
 		filter: none;
 		border: $border-width solid $white;

packages/components/src/toggle-control/style.scss

@@ -1,4 +1,12 @@
 .components-toggle-control .components-base-control__field {
 	display: flex;
-	justify-content: space-between;
+	margin-bottom: $grid-size-small * 3;
+
+	.components-base-control__label {
+		order: 1;
+	}
+
+	.components-form-toggle {
+		margin-right: $grid-size-large;
+	}
 }

packages/edit-post/src/components/header/style.scss

@@ -94,7 +94,6 @@
 		background: $dark-gray-500;
 	}
 
-	&.editor-post-switch-to-draft,
 	&.editor-post-preview,
 	&.editor-post-publish-button,
 	&.editor-post-publish-panel__toggle {

packages/editor/src/components/post-saved-state/index.js

@@ -8,11 +8,12 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dashicon, IconButton } from '@wordpress/components';
+import { Dashicon, Button, IconButton } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { withSafeTimeout, compose } from '@wordpress/compose';
+import { withViewportMatch } from '@wordpress/viewport';
 
 /**
  * Internal dependencies
@@ -42,7 +43,19 @@ export class PostSavedState extends Component {
 	}
 
 	render() {
-		const { post, isNew, isScheduled, isPublished, isDirty, isSaving, isSaveable, onSave, isAutosaving, isPending } = this.props;
+		const {
+			post,
+			isNew,
+			isScheduled,
+			isPublished,
+			isDirty,
+			isSaving,
+			isSaveable,
+			onSave,
+			isAutosaving,
+			isPending,
+			isLargeViewport,
+		} = this.props;
 		const { forceSavedMessage } = this.state;
 		const hasPublishAction = get( post, [ '_links', 'wp:action-publish' ], false );
 		if ( isSaving ) {
@@ -84,15 +97,28 @@ export class PostSavedState extends Component {
 			return null;
 		}
 
+		const label = isPending ? __( 'Save as Pending' ) : __( 'Save Draft' );
+		if ( ! isLargeViewport ) {
+			return (
+				<IconButton
+					className="editor-post-save-draft"
+					label={ label }
+					onClick={ onSave }
+					shortcut={ displayShortcut.primary( 's' ) }
+					icon="cloud-upload"
+				/>
+			);
+		}
+
 		return (
-			<IconButton
+			<Button
 				className="editor-post-save-draft"
 				onClick={ onSave }
-				icon="cloud-upload"
 				shortcut={ displayShortcut.primary( 's' ) }
+				isTertiary
 			>
-				{ isPending ? __( 'Save as Pending' ) : __( 'Save Draft' ) }
-			</IconButton>
+				{ label }
+			</Button>
 		);
 	}
 }
@@ -126,4 +152,5 @@ export default compose( [
 		onSave: dispatch( 'core/editor' ).savePost,
 	} ) ),
 	withSafeTimeout,
+	withViewportMatch( { isLargeViewport: 'medium' } ),
 ] )( PostSavedState );

packages/editor/src/components/post-saved-state/style.scss

@@ -1,7 +1,7 @@
 .editor-post-saved-state {
 	display: flex;
 	align-items: center;
-	color: $dark-gray-500;
+	color: $light-gray-900; // Doesn't need to meet AA because button is disabled and it's supporting text.
 	overflow: hidden;
 
 	&.is-saving {
@@ -14,23 +14,37 @@
 	}
 }
 
+.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;
-	width: $icon-button-size - 8px;
 
 	.dashicon {
 		margin-right: 8px;
 	}
 
 	@include break-small() {
 		padding: 8px;
-		width: auto;
 		text-indent: inherit;
 
 		.dashicon {
 			margin-right: 4px;
 		}
 	}
 }
+
+.editor-post-save-draft {
+	@include break-small() {
+		.dashicon {
+			display: none;
+		}
+	}
+}

packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap

@@ -1,3 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `<WithSelect(WithDispatch(PostSwitchToDraftButton)) />`;
+
+exports[`PostSavedState should return Save button if edits to be saved 1`] = `
+<[object Object]
+  className="editor-post-save-draft"
+  isTertiary={true}
+  onClick={[MockFunction]}
+  shortcut="Ctrl+S"
+>
+  Save Draft
+</[object Object]>
+`;

packages/editor/src/components/post-saved-state/test/index.js

@@ -60,10 +60,12 @@ describe( 'PostSavedState', () => {
 				isDirty={ true }
 				isSaving={ false }
 				isSaveable={ true }
-				onSave={ saveSpy } />
+				isLargeViewport
+				onSave={ saveSpy }
+			/>
 		);
 
-		expect( wrapper.name() ).toBe( 'IconButton' );
+		expect( wrapper ).toMatchSnapshot();
 		wrapper.simulate( 'click' );
 		expect( saveSpy ).toHaveBeenCalled();
 	} );

packages/editor/src/components/post-switch-to-draft-button/index.js

@@ -27,9 +27,9 @@ function PostSwitchToDraftButton( { isSaving, isPublished, isScheduled, onClick
 	return (
 		<Button
 			className="editor-post-switch-to-draft"
-			isLarge
 			onClick={ onSwitch }
 			disabled={ isSaving }
+			isTertiary
 		>
 			{ __( 'Switch to Draft' ) }
 		</Button>

packages/editor/src/components/post-trash/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, Dashicon } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -14,9 +14,8 @@ function PostTrash( { isNew, postId, postType, ...props } ) {
 	const onClick = () => props.trashPost( postId, postType );
 
 	return (
-		<Button isLink className="editor-post-trash button-link-delete" onClick={ onClick }>
+		<Button className="editor-post-trash button-link-delete" onClick={ onClick } isDefault isLarge>
 			{ __( 'Move to trash' ) }
-			<Dashicon icon="trash" />
 		</Button>
 	);
 }

packages/editor/src/components/post-trash/style.scss

@@ -1,16 +1,10 @@
 .editor-post-trash.components-button {
-	margin-left: auto !important;
-	text-decoration: underline;
-	color: #a00;
-
-	.dashicon {
-		display: inline-block;
-		vertical-align: middle;
-		margin: -3px -4px 0 10px;
-	}
+	width: 100%;
+	color: darken($alert-red, 10%);
+	justify-content: center;
 
 	&:hover,
 	&:focus {
-		color: #dc3232;
+		color: darken($alert-red, 15%);
 	}
 }