Update the modal design #40781
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,6 +8,7 @@ | |
| background-color: rgba($black, 0.35); | ||
| z-index: z-index(".components-modal__screen-overlay"); | ||
| display: flex; | ||
| backdrop-filter: blur($grid-unit); | ||
|
|
||
| // This animates the appearance of the white background. | ||
| @include edit-post__fade-in-animation(); | ||
|
|
@@ -63,21 +64,21 @@ | |
| // modal screen). | ||
| .components-modal__header { | ||
| box-sizing: border-box; | ||
| border-bottom: $border-width solid transparent; | ||
| padding: 0 $grid-unit-40; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| height: $header-height + $grid-unit-20; | ||
| width: 100%; | ||
| z-index: z-index(".components-modal__header"); | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
|
|
||
| .components-modal__header-heading { | ||
| font-size: 1.2rem; | ||
|
There was a problem hiding this comment. It would be nice for things like this to be systematised, I'm aware of the experimental There was a problem hiding this comment. I'd personally love to see the I'm not sure if we need to first assess the type scale (and the rest of the styles), but otherwise I think we should slowly try to adopt them in other components, find out if they match our needs and make any necessary changes, before then rolling them out more widely across Gutenberg |
||
| font-weight: 600; | ||
| } | ||
|
|
||
|
|
@@ -90,6 +91,10 @@ | |
| position: relative; | ||
| left: $grid-unit-10; | ||
| } | ||
|
|
||
| .components-modal__content.has-scrolled-content:not(.hide-header) & { | ||
| border-bottom-color: $gray-300; | ||
| } | ||
| } | ||
|
|
||
| .components-modal__header-heading-container { | ||
|
|
@@ -113,26 +118,12 @@ | |
| // Modal contents. | ||
| .components-modal__content { | ||
| flex: 1; | ||
| margin-top: $header-height + $grid-unit-20; | ||
|
There was a problem hiding this comment. Just flagging that this change may have introduced other layout regressions in places where it was assumed that the Modal's header was One such example is the block pattern inserter/explorer modal, where in my testing I spotted a regression caused by the fact that the sidebar was positioned at
In general, consumers of the While a short-term fix would be to update the line of code linked above to use the updated Modal's header height, I would argue that the best way to fix this specific regression in the block pattern inserter / explorer is to rewrite the modal's internal layout in a way that avoids absolute positioning and hardcoded margins/positions. There was a problem hiding this comment.
I agree, the hardcoded height also causes issues where the modal title is long enough to wrap (uncommon but not impossible). Do you think we should do this as a part of this PR or elsewhere? There was a problem hiding this comment. Probably the best course of action is to:
|
||
| padding: 0 $grid-unit-40 $grid-unit-30; | ||
| overflow: auto; | ||
|
|
||
| &.hide-header { | ||
| margin-top: 0; | ||
| padding-top: $grid-unit-30; | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,11 +3,6 @@ | |
| margin: 0 0 2rem 0; | ||
| } | ||
|
|
||
| &__section-title { | ||
| font-size: 0.9rem; | ||
| font-weight: 600; | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| .edit-post-template__modal { | ||
| .components-base-control { | ||
| @include break-medium() { | ||
| width: $grid-unit * 40; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .edit-post-template__modal-actions { | ||
| margin-top: $grid-unit-15; | ||
| } | ||
|
|
||
| .edit-post-template-modal__tip { | ||
| padding: $grid-unit-20 $grid-unit-30; | ||
| background: $gray-100; | ||
| border-radius: $radius-block-ui; | ||
|
|
||
| @include break-medium() { | ||
| width: $grid-unit * 30; | ||
| } | ||
| } | ||
|
|
||
| .edit-post-template__notice { | ||
| margin: 0 0 $grid-unit-10 0; | ||
|
|
||
| .components-notice__content { | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| .edit-post-template__actions { | ||
| button:not(:last-child) { | ||
| margin-right: $grid-unit-10; | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,15 +11,6 @@ | |
| @include break-large() { | ||
| height: 70%; | ||
| } | ||
| } | ||
|
|
||
| // 2 column masonry layout. | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,11 +3,6 @@ | |
| margin: 0 0 2rem 0; | ||
| } | ||
|
|
||
| &__section-title { | ||
| font-size: 0.9rem; | ||
| font-weight: 600; | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -131,14 +131,6 @@ | |
| width: $grid-unit * 40; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .edit-site-list__rename-modal-actions { | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,10 +16,6 @@ | |
| @media (max-width: #{ ($break-medium - 1) }) { | ||
| .components-modal__content { | ||
| padding: 0; | ||
| } | ||
| } | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for adding an inline comment to explain how the
heightis computed here!I wonder if there's any way we could avoid using these hardcoded numbers altogether and use either variables, or a layout that intrinsically adopts the correct height.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree. Perhaps we can look into that when we address the border issue in this particular modal.