Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preview Button: Remove the separator and border, and reduce the size of the icon. #20683

Merged
merged 6 commits into from
Mar 13, 2020
Merged

Preview Button: Remove the separator and border, and reduce the size of the icon. #20683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3e58709
Remove the separator and border, and reduce the size of the icon.
shaunandrews Mar 6, 2020
9784964
Removing the className and the dynamic label. Now the button always s…
shaunandrews Mar 9, 2020
c9abc7e
Move the svg sizing to the `header` component and adjusting the exter…
shaunandrews Mar 9, 2020
e252cfb
Removed the "View" group label, put the external icon first, and upda…
shaunandrews Mar 9, 2020
18643a3
Massage the pixels, update icon.
jasmussen Mar 13, 2020
a54e452
Update snapshots.
jasmussen Mar 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/block-library/src/embed/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,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>
Expand Down
23 changes: 5 additions & 18 deletions packages/edit-post/src/components/preview-options/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand All @@ -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();
}, [] );
Expand All @@ -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' ) }
Expand Down Expand Up @@ -119,8 +106,8 @@ export default function PreviewOptions( {
forcePreviewLink={ forcePreviewLink }
textContent={
<>
{ __( 'Preview externally' ) }
<Icon icon={ external } />
{ __( 'Preview in new tab' ) }
</>
}
/>
Expand Down
25 changes: 11 additions & 14 deletions packages/edit-post/src/components/preview-options/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
Expand All @@ -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() {
Expand Down
4 changes: 2 additions & 2 deletions packages/icons/src/library/external.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);

Expand Down
16 changes: 8 additions & 8 deletions storybook/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -11021,38 +11021,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>
Expand Down