Skip to content

Modal: Add small top padding to the content so that avoid cutting off the visible outline when hovering items #51829

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
t-hamano merged 13 commits into from
Jun 27, 2023
Merged

Modal: Add small top padding to the content so that avoid cutting off the visible outline when hovering items #51829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4375c62
Site Editor: Fix focus cutoff in add template modal
t-hamano Jun 23, 2023
9e54d0a
Add padding-top to the modal content
t-hamano Jun 24, 2023
7e91b1e
Remove unnecessary padding-top
t-hamano Jun 24, 2023
bb2e9e9
Remove unnecessary padding-top
t-hamano Jun 24, 2023
5838981
Update changelog
t-hamano Jun 24, 2023
59058e5
Revert top padding from block patterns list
t-hamano Jun 24, 2023
f5041a0
Revert top padding from block patterns list
t-hamano Jun 24, 2023
009ba49
Remove unnecessary changes
t-hamano Jun 24, 2023
8f1e746
Remove unnecessary changes
t-hamano Jun 24, 2023
73ad6c9
Add CSS inline comment
t-hamano Jun 24, 2023
98d3bc7
Merge branch 'trunk' into fix/add-template-cutoff
t-hamano Jun 27, 2023
5726cf6
Change padding metrics
t-hamano Jun 27, 2023
c91ada2
Merge branch 'trunk' into fix/add-template-cutoff
t-hamano Jun 27, 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/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
- `Autocomplete`: Announce how many results are available to screen readers when suggestions list first renders ([#51018](https://github.com/WordPress/gutenberg/pull/51018)).
- `ConfirmDialog`: Ensure onConfirm isn't called an extra time when submitting one of the buttons using the keyboard ([#51730](https://github.com/WordPress/gutenberg/pull/51730)).
- `ZStack`: ZStack: fix component bounding box to match children ([#51836](https://github.com/WordPress/gutenberg/pull/51836)).
- `Modal`: Add small top padding to the content so that avoid cutting off the visible outline when hovering items ([#51829](https://github.com/WordPress/gutenberg/pull/51829)).

### Internal

Expand Down
5 changes: 3 additions & 2 deletions packages/components/src/modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
.components-modal__header {
box-sizing: border-box;
border-bottom: $border-width solid transparent;
padding: $grid-unit-30 $grid-unit-40 $grid-unit-15;
padding: $grid-unit-30 $grid-unit-40 $grid-unit-10;
display: flex;
flex-direction: row;
justify-content: space-between;
Expand Down Expand Up @@ -130,7 +130,8 @@
.components-modal__content {
flex: 1;
margin-top: $header-height + $grid-unit-15;
padding: 0 $grid-unit-40 $grid-unit-40;
// Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
overflow: auto;

&.hide-header {
Expand Down
3 changes: 0 additions & 3 deletions packages/edit-post/src/components/start-page-options/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
column-count: 2;
column-gap: $grid-unit-30;

// Small top padding required to avoid cutting off the visible outline when hovering items
padding-top: $border-width-focus-fallback;

@include break-medium() {
column-count: 3;
}
Expand Down
5 changes: 0 additions & 5 deletions packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,3 @@
}
}
}

.sidebar-navigation__rename-modal-form {
// Fix for input focus style being cut off by the modal.
padding-top: 1px;
}
3 changes: 0 additions & 3 deletions packages/edit-site/src/components/start-template-options/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,6 @@ $actions-height: 92px;
column-count: 2;
column-gap: $grid-unit-30;

// Small top padding required to avoid cutting off the visible outline when hovering items
padding-top: $border-width-focus-fallback;

@include break-medium() {
column-count: 3;
}
Expand Down