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.

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

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

Merged
merged 13 commits into from
Jun 27, 2023
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
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
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
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
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;
}
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