-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Site editor: bump the z-index of the rename modal #54277
Conversation
…dropdown popover component, which is set to 1000000 in the component stylesheet
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.
Oh, great catch! Just wondering if we should add another entry in _z-index.scss
for keeping track, rather than adding 1
to the .components-popover
value?
The +1 is unnecessary thanks to document tree order.
…' into update/rename-modal-bump-z-index # Conflicts: # packages/edit-site/src/components/template-actions/style.scss
Size Change: -1 B (0%) Total Size: 1.52 MB
ℹ️ View Unchanged
|
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.
Nice, thanks for the update!
This is testing well for me and has the right z-index:
Possibly for a follow-up, but I see that there are existing rules for .edit-site-list__rename-modal
and .edit-site-template__actions
over in components/list/style.scss
. Since this adds a stylesheet to template-actions/style.scss
, would it be good to co-locate the rules?
gutenberg/packages/edit-site/src/components/list/style.scss
Lines 132 to 144 in 119a279
.edit-site-list__rename-modal { | |
.components-base-control { | |
@include break-medium() { | |
width: $grid-unit * 40; | |
} | |
} | |
} | |
.edit-site-template__actions { | |
button:not(:last-child) { | |
margin-right: $grid-unit-10; | |
} | |
} |
Not a blocker though, LGTM! ✨
overlayClassName="edit-site-list__rename_modal" | ||
overlayClassName="edit-site-list__rename-modal" |
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.
Also, I wanted to say, eagle eyes here! I took me a few seconds of staring to see the typo fix 😄
How did I miss that? 🤦🏻 Much better to move the z-index rule to the existing stylesheet. Thank you! I'll do that here |
What?
This PR bumps the rename modal
z-index
to be one higher than the dropdown popover component, which is set to1000000
.I noticed this while working on #54271
Why?
So that the rename modal sits above the actions dropdown:
Testing Instructions
Create a custom template and pattern. In the site editor, click on the actions ellipsis in the individual views and rename. Also check the patterns grid.
To ensure that modal hovers over the open dropdown element, reduce the dimensions of your browser.
The modal and its background should be above the dropdown.
Thank you!
Screenshots or screencast