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

Fix inconsistent complementary header styles #61331

Merged
merged 19 commits into from
May 8, 2024
Merged

Fix inconsistent complementary header styles #61331

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
7773280
Use compact buttons, proper gap
richtabor May 2, 2024
26be3d9
Reuse existing class for heading
richtabor May 2, 2024
d118258
Remove unused class
richtabor May 2, 2024
fc87dcc
Remove unnecessary negative margin top
richtabor May 2, 2024
0acb116
Use small variant for close in complementary area
richtabor May 2, 2024
2d1ec05
Remove unused styles
richtabor May 2, 2024
e2c8823
Emulate 'compact' button size, as Dropdown does not support it
richtabor May 2, 2024
2df7de6
Reduce padding right to account for close buttons holistically
richtabor May 2, 2024
1107ee5
Remove targeted padding right
richtabor May 2, 2024
f3daf21
Add default gap between controls in complementary header
richtabor May 2, 2024
ceaab04
Remove negative margin override, no longer necessary
richtabor May 2, 2024
b958b1c
Only make the close icon small
richtabor May 2, 2024
c3e7460
Use same font weight as tabs for complementary area
richtabor May 2, 2024
26c0944
Use compact pin/unpin button
richtabor May 2, 2024
97f6377
Revert "Reuse existing class for heading"
richtabor May 7, 2024
1354096
Add back the style
richtabor May 7, 2024
b748cf8
Pass toggleProps compact size
richtabor May 7, 2024
8d3941d
Tweak inline comment.
richtabor May 8, 2024
d2eadf0
Remove unnecessary - margin top
richtabor May 8, 2024
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: 0 additions & 4 deletions packages/edit-post/src/components/sidebar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,3 @@
}
}
}

.edit-post-sidebar__panel {
margin-top: -1px;
}
6 changes: 5 additions & 1 deletion packages/edit-site/src/components/global-styles/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,11 @@ function GlobalStylesActionMenu() {

return (
<GlobalStylesMenuFill>
<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>
<DropdownMenu
icon={ moreVertical }
label={ __( 'More' ) }
toggleProps={ { size: 'compact' } }
>
{ ( { onClose } ) => (
<>
<MenuGroup>
Expand Down
7 changes: 6 additions & 1 deletion packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,10 @@ export default function GlobalStylesSidebar() {
closeLabel={ __( 'Close Styles' ) }
panelClassName="edit-site-global-styles-sidebar__panel"
header={
<Flex className="edit-site-global-styles-sidebar__header">
<Flex
className="edit-site-global-styles-sidebar__header"
gap={ 1 }
>
<FlexBlock style={ { minWidth: 'min-content' } }>
<h2 className="edit-site-global-styles-sidebar__header-title">
richtabor marked this conversation as resolved.
Show resolved Hide resolved
{ __( 'Styles' ) }
Expand All @@ -151,6 +154,7 @@ export default function GlobalStylesSidebar() {
}
disabled={ shouldClearCanvasContainerView }
onClick={ toggleStyleBook }
size="compact"
/>
</FlexItem>
<FlexItem>
Expand All @@ -162,6 +166,7 @@ export default function GlobalStylesSidebar() {
isPressed={
isRevisionsOpened || isRevisionsStyleBookOpened
}
size="compact"
/>
</FlexItem>
<GlobalStylesMenuSlot />
Expand Down
1 change: 0 additions & 1 deletion packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
padding-left: 0;
padding-right: $grid-unit-20;

.components-button.has-icon {
padding: 0;
Expand Down
11 changes: 0 additions & 11 deletions packages/edit-site/src/components/sidebar-edit-mode/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,6 @@
margin: 0;
}

.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
margin-left: 0;
}

.edit-site-global-styles-sidebar__reset-button.components-button {
margin-left: auto;
}

.edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
font-size: $default-font-size * 1.2;
font-weight: 500;
Expand Down Expand Up @@ -104,6 +96,3 @@
}
}

.edit-site-sidebar__panel {
margin-top: -1px;
}
richtabor marked this conversation as resolved.
Show resolved Hide resolved
11 changes: 2 additions & 9 deletions packages/interface/src/components/complementary-area-header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@

.interface-complementary-area-header {
background: $white;
padding-right: $grid-unit-05;
padding-right: $grid-unit-15; // Reduced padding to account for close buttons.
gap: $grid-unit-10; // Always ensure space between contents and close buttons.

.interface-complementary-area-header__title {
margin: 0;
Expand All @@ -36,11 +37,3 @@
}
}
}

// This overrides the negative margins between two consecutives panels.
// since the first panel is hidden.
.components-panel__header + .interface-complementary-area-header {
@include break-medium() {
margin-top: 0;
}
}
2 changes: 2 additions & 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 @@ -302,6 +302,7 @@ function ComplementaryArea( {
smallScreenTitle={ smallScreenTitle }
toggleButtonProps={ {
label: closeLabel,
size: 'small',
shortcut: toggleShortcut,
scope,
identifier,
Expand Down Expand Up @@ -329,6 +330,7 @@ function ComplementaryArea( {
}
isPressed={ isPinned }
aria-expanded={ isPinned }
size="compact"
/>
) }
</>
Expand Down
1 change: 1 addition & 0 deletions packages/interface/src/components/complementary-area/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@

h2 {
font-size: $default-font-size;
font-weight: 500;
color: $gray-900;
margin-bottom: 1.5em;
}
Expand Down
Loading