Skip to content

Commit

Permalink
Modal: Add small top padding to the content so that avoid cutting off…
Browse files Browse the repository at this point in the history
… the visible outline when hovering items (#51829)

* Site Editor: Fix focus cutoff in add template modal

* Add padding-top to the modal content

* Remove unnecessary padding-top

* Remove unnecessary padding-top

* Update changelog

* Revert top padding from block patterns list

* Revert top padding from block patterns list

* Remove unnecessary changes

* Remove unnecessary changes

* Add CSS inline comment

* Change padding metrics
  • Loading branch information
t-hamano authored Jun 27, 2023
1 parent 636164d commit 86b4800
Show file tree
Hide file tree
Showing 5 changed files with 4 additions and 13 deletions.
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

0 comments on commit 86b4800

Please sign in to comment.