Merge pull request #2445 from WordPress/try/compact-save-indicator

Try a more compact save state indicator
WordPress · Aug 18, 2017 · d5f1b04 · d5f1b04
2 parents f777f79 + cbbd5dd
commit d5f1b04
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/editor/header/mode-switcher/style.scss b/editor/header/mode-switcher/style.scss
@@ -1,7 +1,8 @@
-#wpbody .editor-mode-switcher {	/* #wpbody for extra specificity */
+#wpbody .editor-mode-switcher {		// #wpbody for extra specificity
 	position: relative;
 	margin-right: $item-spacing;
-	padding-right: $item-spacing;
+	margin-left: -8px;	// use the full hit area of the select box, but maintain optical editor bar padding
+	padding-right: 2px;
 	color: $dark-gray-500;
 	align-items: center;
 	cursor: pointer;

diff --git a/editor/header/saved-state/index.js b/editor/header/saved-state/index.js
@@ -59,7 +59,8 @@ export function SavedState( { isNew, isPublished, isDirty, isSaving, isSaveable,
 
 	return (
 		<Button className={ classnames( className, 'button-link' ) } onClick={ onClick }>
-			{ __( 'Save Draft' ) }
+			<span className="editor-saved-state__mobile">{ __( 'Save' ) }</span>
+			<span className="editor-saved-state__desktop">{ __( 'Save Draft' ) }</span>
 		</Button>
 	);
 }

diff --git a/editor/header/saved-state/style.scss b/editor/header/saved-state/style.scss
@@ -6,6 +6,7 @@
 
 	.dashicon {
 		margin-right: 4px;
+		margin-left: -4px;
 	}
 
 	&.button-link {
@@ -21,3 +22,16 @@
 		}
 	}
 }
+
+.editor-saved-state__mobile {
+	@include break-small {
+		display: none;
+	}
+}
+
+.editor-saved-state__desktop {
+	display: none;
+	@include break-small {
+		display: inline;
+	}
+}
diff --git a/editor/header/saved-state/test/index.js b/editor/header/saved-state/test/index.js
@@ -67,7 +67,7 @@ describe( 'SavedState', () => {
 		);
 
 		expect( wrapper.name() ).toBe( 'Button' );
-		expect( wrapper.childAt( 0 ).text() ).toBe( 'Save Draft' );
+		expect( wrapper.childAt( 0 ).text() ).toBe( 'Save' );
 		wrapper.simulate( 'click' );
 		expect( statusSpy ).toHaveBeenCalledWith( 'draft' );
 		expect( saveSpy ).toHaveBeenCalled();
@@ -87,7 +87,7 @@ describe( 'SavedState', () => {
 		);
 
 		expect( wrapper.name() ).toBe( 'Button' );
-		expect( wrapper.childAt( 0 ).text() ).toBe( 'Save Draft' );
+		expect( wrapper.childAt( 0 ).text() ).toBe( 'Save' );
 		wrapper.simulate( 'click' );
 		expect( statusSpy ).not.toHaveBeenCalled();
 		expect( saveSpy ).toHaveBeenCalled();