Preview Button: Remove the separator and border, and reduce the size …

…of the icon. (#20683) * Removes the separator and border from the preview toggle. * Updates button to always says "Preview". * Adjust external link icon. * Removed the "View" group label and put the external icon first.
WordPress · Mar 13, 2020 · c5d792a · c5d792a
1 parent bdaead2
commit c5d792a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 44 deletions.
diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
@@ -71,12 +71,12 @@ exports[`core/embed block edit matches snapshot 1`] = `
           focusable="false"
           height="24"
           role="img"
-          viewBox="-2 -2 24 24"
+          viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M9 3h8v8l-2-1V6.92l-5.6 5.59-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z"
+            d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"
           />
         </svg>
       </a>

diff --git a/packages/edit-post/src/components/preview-options/index.js b/packages/edit-post/src/components/preview-options/index.js
@@ -17,7 +17,7 @@ import {
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PostPreviewButton } from '@wordpress/editor';
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { external, check } from '@wordpress/icons';
 
 const downArrow = (
@@ -43,17 +43,6 @@ export default function PreviewOptions( {
 		return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType();
 	}, [] );
 
-	const translateDropdownButtonText = () => {
-		switch ( deviceType ) {
-			case 'Tablet':
-				return __( 'Tablet' );
-			case 'Mobile':
-				return __( 'Mobile' );
-			default:
-				return __( 'Desktop' );
-		}
-	};
-
 	const isSaveable = useSelect( ( select ) => {
 		return select( 'core/editor' ).isEditedPostSaveable();
 	}, [] );
@@ -77,15 +66,13 @@ export default function PreviewOptions( {
 					aria-expanded={ isOpen }
 					disabled={ ! isSaveable }
 				>
-					{ translateDropdownButtonText() }
-					<div className="editor-post-preview__button-separator">
-						{ downArrow }
-					</div>
+					{ __( 'Preview' ) }
+					{ downArrow }
 				</Button>
 			) }
 			renderContent={ () => (
 				<>
-					<MenuGroup label={ _x( 'View', 'noun' ) }>
+					<MenuGroup>
 						<MenuItem
 							className="editor-post-preview__button-resize"
 							onClick={ () => setPreviewDeviceType( 'Desktop' ) }
@@ -119,8 +106,8 @@ export default function PreviewOptions( {
 									forcePreviewLink={ forcePreviewLink }
 									textContent={
 										<>
-											{ __( 'Preview externally' ) }
 											<Icon icon={ external } />
+											{ __( 'Preview in new tab' ) }
 										</>
 									}
 								/>

diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss
@@ -1,19 +1,21 @@
 .editor-post-preview__dropdown {
 	display: none;
 	margin-right: $grid-unit-15;
-	box-shadow: inset 0 0 0 $border-width $light-gray-secondary;
-	border-radius: $radius-block-ui;
 	padding: 0;
 }
 
 .editor-post-preview__button-toggle {
 	display: flex;
 	justify-content: space-between;
-	padding: 0 0 0 $grid-unit-15;
+	padding: 0 $grid-unit-10 0 $grid-unit-15;
 
 	&:focus:not(:disabled) {
 		box-shadow: inset 0 0 0 1px $white, 0 0 0 2px color($theme-color);
 	}
+
+	svg {
+		margin-left: $grid-unit-05;
+	}
 }
 
 .editor-post-preview__button-resize.editor-post-preview__button-resize {
@@ -24,15 +26,6 @@
 	}
 }
 
-.editor-post-preview__button-separator {
-	border-left: $border-width solid $light-gray-secondary;
-	padding: 6px;
-	margin-left: $grid-unit-15;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
 .editor-post-preview__dropdown-content {
 	.components-popover__content {
 		overflow-y: visible;
@@ -53,11 +46,15 @@
 }
 
 .editor-post-preview__button-external {
-	padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10;
+	padding-left: $grid-unit-10;
 	margin-right: auto;
 	width: 100%;
 	display: flex;
-	justify-content: space-between;
+	justify-content: flex-start;
+
+	svg {
+		margin-right: $grid-unit-10;
+	}
 }
 
 @include break-small() {

diff --git a/packages/icons/src/library/external.js b/packages/icons/src/library/external.js
@@ -4,8 +4,8 @@
 import { Path, SVG } from '@wordpress/primitives';
 
 const external = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
-		<Path d="M9 3h8v8l-2-1V6.92l-5.6 5.59-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z" />
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z" />
 	</SVG>
 );
 

diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
@@ -3036,12 +3036,12 @@ exports[`Storyshots Components/ExternalLink Default 1`] = `
     focusable="false"
     height={24}
     role="img"
-    viewBox="-2 -2 24 24"
+    viewBox="0 0 24 24"
     width={24}
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M9 3h8v8l-2-1V6.92l-5.6 5.59-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z"
+      d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"
     />
   </svg>
 </a>
@@ -10945,38 +10945,38 @@ exports[`Storyshots Icons/Icon Library 1`] = `
       focusable="false"
       height={24}
       role="img"
-      viewBox="-2 -2 24 24"
+      viewBox="0 0 24 24"
       width={24}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 3h8v8l-2-1V6.92l-5.6 5.59-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z"
+        d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"
       />
     </svg>
     <svg
       aria-hidden="true"
       focusable="false"
       height={36}
       role="img"
-      viewBox="-2 -2 24 24"
+      viewBox="0 0 24 24"
       width={36}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 3h8v8l-2-1V6.92l-5.6 5.59-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z"
+        d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"
       />
     </svg>
     <svg
       aria-hidden="true"
       focusable="false"
       height={48}
       role="img"
-      viewBox="-2 -2 24 24"
+      viewBox="0 0 24 24"
       width={48}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 3h8v8l-2-1V6.92l-5.6 5.59-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z"
+        d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"
       />
     </svg>
   </div>