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

Update main toolbar buttons to all be compact #56635

Merged
merged 5 commits into from
Dec 1, 2023
Merged

Update main toolbar buttons to all be compact #56635

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e137e8c
Initial work.
jasmussen Nov 29, 2023
97caf80
Fix post editor.
jasmussen Nov 29, 2023
f9d757c
Site editor.
jasmussen Nov 29, 2023
098a161
Use variable.
jasmussen Nov 30, 2023
2d5aaf7
Snapshots.
jasmussen Dec 1, 2023
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
1 change: 1 addition & 0 deletions packages/block-editor/src/components/preview-options/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export default function PreviewOptions( {
disabled: ! isEnabled,
__experimentalIsFocusable: ! isEnabled,
children: viewLabel,
size: 'compact',
showTooltip: ! showIconLabels,
};
const menuProps = {
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-post/src/components/header/header-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
variant={ showIconLabels ? 'tertiary' : undefined }
aria-expanded={ isListViewOpen }
ref={ setListViewToggleElement }
size="compact"
/>
</>
);
Expand Down Expand Up @@ -159,17 +160,20 @@ function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
showIconLabels ? 'tertiary' : undefined
}
disabled={ isTextModeEnabled }
size="compact"
/>
) }
<ToolbarItem
as={ EditorHistoryUndo }
showTooltip={ ! showIconLabels }
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
/>
<ToolbarItem
as={ EditorHistoryRedo }
showTooltip={ ! showIconLabels }
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
/>
{ overflowItems }
</>
Expand Down
17 changes: 10 additions & 7 deletions packages/edit-post/src/components/header/header-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,17 +39,20 @@
// here to the original button styles
.edit-post-header-toolbar__left > .components-button.has-icon,
.edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
height: $button-size;
min-width: $button-size;
padding: 6px;
// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
// This is best fixed by making the mover control area a proper single toolbar group.
// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
height: $button-size-compact;
min-width: $button-size-compact;
padding: 4px;

&.is-pressed {
background: $gray-900;
}

&:focus:not(:disabled) {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
outline: 1px solid transparent;
outline: $border-width solid transparent;
}

&::before {
Expand Down Expand Up @@ -97,9 +100,9 @@
.edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
margin-right: $grid-unit-10;
// Special dimensions for this button.
min-width: 32px;
width: 32px;
height: 32px;
min-width: $button-size-compact;
width: $button-size-compact;
height: $button-size-compact;
padding: 0;

.show-icon-labels & {
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/components/header/more-menu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const MoreMenu = ( { showIconLabels } ) => {
toggleProps={ {
showTooltip: ! showIconLabels,
...( showIconLabels && { variant: 'tertiary' } ),
size: 'compact',
} }
>
{ ( { onClose } ) => (
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/header-edit-mode/document-actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
<Button
className="edit-site-document-actions__command"
onClick={ () => openCommandCenter() }
size="compact"
>
<HStack
className="edit-site-document-actions__title"
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.edit-site-document-actions {
display: flex;
align-items: center;
height: $button-size;
height: $button-size-compact;
justify-content: space-between;
// Flex items will, by default, refuse to shrink below a minimum
// intrinsic width. In order to shrink this flexbox item, and
Expand Down
6 changes: 6 additions & 0 deletions packages/edit-site/src/components/header-edit-mode/document-tools/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export default function DocumentTools( {
label={ showIconLabels ? shortLabel : longLabel }
showTooltip={ ! showIconLabels }
aria-expanded={ isInserterOpen }
size="compact"
/>
) }
{ isLargeViewport && (
Expand All @@ -142,17 +143,20 @@ export default function DocumentTools( {
showIconLabels ? 'tertiary' : undefined
}
disabled={ ! isVisualMode }
size="compact"
/>
) }
<ToolbarItem
as={ UndoButton }
showTooltip={ ! showIconLabels }
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
/>
<ToolbarItem
as={ RedoButton }
showTooltip={ ! showIconLabels }
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
/>
{ ! isDistractionFree && (
<ToolbarItem
Expand All @@ -171,6 +175,7 @@ export default function DocumentTools( {
showIconLabels ? 'tertiary' : undefined
}
aria-expanded={ isListViewOpen }
size="compact"
/>
) }
{ isZoomedOutViewExperimentEnabled &&
Expand All @@ -191,6 +196,7 @@ export default function DocumentTools( {
: 'zoom-out'
);
} }
size="compact"
/>
) }
</>
Expand Down
17 changes: 10 additions & 7 deletions packages/edit-site/src/components/header-edit-mode/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,17 +122,20 @@ $header-toolbar-min-width: 335px;
// here to the original button styles
.edit-site-header-edit-mode__toolbar > .components-button.has-icon,
.edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
height: $button-size;
min-width: $button-size;
padding: 6px;
// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
// This is best fixed by making the mover control area a proper single toolbar group.
// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
height: $button-size-compact;
min-width: $button-size-compact;
padding: 4px;

&.is-pressed {
background: $gray-900;
}

&:focus:not(:disabled) {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
outline: 1px solid transparent;
outline: $border-width solid transparent;
}

&::before {
Expand All @@ -143,9 +146,9 @@ $header-toolbar-min-width: 335px;
.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
margin-right: $grid-unit-10;
// Special dimensions for this button.
min-width: 32px;
width: 32px;
height: 32px;
min-width: $button-size-compact;
width: $button-size-compact;
height: $button-size-compact;
padding: 0;
}

Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/save-button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ export default function SaveButton( {
showTooltip={ showTooltip }
icon={ icon }
__next40pxDefaultSize={ __next40pxDefaultSize }
size="compact"
>
{ label }
</Button>
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/post-publish-button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ export class PostPublishButton extends Component {
className: 'editor-post-publish-panel__toggle',
isBusy: isSaving && isPublished,
variant: 'primary',
size: 'compact',
onClick: this.createOnClick( onClickToggle ),
};

Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/post-saved-state/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ export default function PostSavedState( {
}
onClick={ isDisabled ? undefined : () => savePost() }
variant="tertiary"
size="compact"
icon={ isLargeViewport ? undefined : cloudUpload }
// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
aria-label={ buttonAccessibleLabel }
Expand Down
4 changes: 2 additions & 2 deletions packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
<button
aria-disabled="true"
aria-label="Save draft"
class="components-button is-tertiary has-icon"
class="components-button is-compact is-tertiary has-icon"
type="button"
>
<svg
Expand All @@ -26,7 +26,7 @@ exports[`PostSavedState should return Save button if edits to be saved 1`] = `
<button
aria-disabled="false"
aria-label="Save draft"
class="components-button editor-post-save-draft is-tertiary"
class="components-button editor-post-save-draft is-compact is-tertiary"
type="button"
>
Save draft
Expand Down
1 change: 1 addition & 0 deletions packages/interface/src/components/complementary-area/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ function ComplementaryArea( {
icon={ showIconLabels ? check : icon }
showTooltip={ ! showIconLabels }
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
/>
) }
</PinnedItems>
Expand Down
1 change: 1 addition & 0 deletions packages/interface/src/components/more-menu-dropdown/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export default function MoreMenuDropdown( {
toggleProps={ {
tooltipPosition: 'bottom',
...toggleProps,
size: 'compact',
} }
>
{ ( onClose ) => children( onClose ) }
Expand Down
Loading