Skip to content

Update main toolbar buttons to all be compact #56635

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

Merged
jasmussen 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 1 commit
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
Prev Previous commit
Next Next commit
Site editor.
  • Loading branch information
@jasmussen
jasmussen committed Dec 1, 2023
commit f9d757c46f005baab3cad6bc491f11cf736c7a05
1 change: 0 additions & 1 deletion 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 @@ -46,7 +46,6 @@
min-width: 32px;
padding: 4px;


&.is-pressed {
background: $gray-900;
}
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: 32px;
Copy link
Contributor

@ciampo ciampo Nov 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could use the $button-size-compact sass variable here

Copy link
Contributor Author

@jasmussen jasmussen Nov 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one! Done.

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
11 changes: 7 additions & 4 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: 32px;
min-width: 32px;
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
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/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