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

Template pattern modal: remove internal modal classnames #50655

Merged
merged 3 commits into from
May 16, 2023
Merged

Template pattern modal: remove internal modal classnames #50655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
207fddd
Template pattern modal: remove internal modal classnames
ciampo May 16, 2023
2b405c8
Update snapshots
ciampo May 16, 2023
cf9fb0b
CHANGELOG
ciampo May 16, 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
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Internal

- `Modal`: Remove children container's unused class name ([#50655](https://github.com/WordPress/gutenberg/pull/50655)).

## 24.0.0 (2023-05-10)

### Breaking Changes
Expand Down
7 changes: 1 addition & 6 deletions packages/components/src/modal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,12 +252,7 @@ function UnforwardedModal(
) }
</div>
) }
<div
ref={ childrenContainerRef }
className="components-modal__children-container"
>
{ children }
</div>
<div ref={ childrenContainerRef }>{ children }</div>
</div>
</div>
</StyleProvider>
Expand Down
4 changes: 1 addition & 3 deletions ...es/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
</svg>
</button>
</div>
<div
class="components-modal__children-container"
>
<div>
<section
class="edit-post-keyboard-shortcut-help-modal__section edit-post-keyboard-shortcut-help-modal__main-shortcuts"
>
Expand Down
8 changes: 2 additions & 6 deletions packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,9 +102,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
</svg>
</button>
</div>
<div
class="components-modal__children-container"
>
<div>
<div
class="interface-preferences__tabs"
>
Expand Down Expand Up @@ -725,9 +723,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
</svg>
</button>
</div>
<div
class="components-modal__children-container"
>
<div>
<div
class="components-navigator-provider interface-preferences__provider emotion-0 emotion-1"
data-wp-c16t="true"
Expand Down
41 changes: 20 additions & 21 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
@@ -1,28 +1,27 @@
.edit-site-start-template-options__modal {
.components-modal__content {
padding-bottom: 0;
}
$actions-height: 92px;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The main way the resulting layout is achieved in this PR is:

  • by making the actions bar absolute positioned, so that it's always stuck at the bottom of the modal
  • by using a fixed height (instead of padding top/bottom) to resize the actions bar
  • by using that same height as extra padding bottom in the modal content, to preserve correct overflow scroll behaviour


.components-modal__children-container {
display: flex;
height: 100%;
flex-direction: column;

.edit-site-start-template-options__modal__actions {
margin-top: auto;
position: sticky;
bottom: 0;
background-color: $white;
margin-left: - $grid-unit-40;
margin-right: - $grid-unit-40;
padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
border-top: 1px solid $gray-300;
z-index: z-index(".edit-site-start-template-options__modal__actions");
}
.edit-site-start-template-options__modal {
.edit-site-start-template-options__modal__actions {
position: absolute;
bottom: 0;
width: 100%;
height: $actions-height;
background-color: $white;
margin-left: - $grid-unit-40;
margin-right: - $grid-unit-40;
padding-left: $grid-unit-40;
padding-right: $grid-unit-40;
border-top: 1px solid $gray-300;
z-index: z-index(".edit-site-start-template-options__modal__actions");
}

.block-editor-block-patterns-list {
padding-bottom: $grid-unit-40;
// Since the actions container is positioned absolutely,
// this padding bottom ensures that the content wrapper will properly
// detect overflowing content and start showing scrollbars at the right
// moment. Without this padding, the content would render under the actions
// bar without causing the wrapper to show a scrollbar.
padding-bottom: $actions-height;
}
}

Expand Down