Change z-index override logic for popovers. (#17696)

* Change z-index override logic for popovers. * Undo gradient formatting. * Remove import of deleted file. * Remove empty file, fix reference to deleted zindex
WordPress · Oct 3, 2019 · f8f451f · f8f451f
1 parent 64439e6
commit f8f451f
Show file tree

Hide file tree

Showing 13 changed files with 24 additions and 22 deletions.
diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
@@ -90,14 +90,12 @@ $z-layers: (
 	// #adminmenuwrap { z-index: 9990 }
 	".components-popover": 1000000,
 
-	// Shows adminbar quicklink submenu above bottom popover:
-	// #wpadminbar ul li {z-index: 99999;}
-	".components-popover:not(.is-mobile).is-bottom": 99990,
-
-	// Shows above edit post sidebar; Specificity needs to be higher than 3 classes.
-	".block-editor__container .components-popover.components-color-palette__picker.is-bottom": 100001,
-	".block-editor__container .components-popover.components-font-size-picker__dropdown-content.is-bottom": 100001,
-	".edit-post-post-visibility__dialog.components-popover.is-bottom": 100001,
+	// ...Except for popovers immediately beneath wp-admin menu on large breakpoints
+	".components-popover.block-editor-inserter__popover": 99998,
+	".components-popover.table-of-contents__popover": 99998,
+	".components-popover.block-editor-block-navigation__popover": 99998,
+	".components-popover.edit-post-more-menu__content": 99998,
+	".components-popover.block-editor-rich-text__inline-format-toolbar": 99998,
 
 	".components-autocomplete__results": 1000000,
 

diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -22,6 +22,7 @@ function BlockNavigationDropdown( { hasBlocks, isDisabled } ) {
 
 	return	(
 		<Dropdown
+			contentClassName="editor-block-navigation__popover block-editor-block-navigation__popover"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<>
 					{ isEnabled && <KeyboardShortcuts

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
@@ -85,3 +85,7 @@ $tree-item-height: 36px;
 		background: $light-gray-300;
 	}
 }
+
+.components-popover.block-editor-block-navigation__popover {
+	z-index: z-index(".components-popover.block-editor-block-navigation__popover");
+}
diff --git a/packages/block-editor/src/components/font-sizes/style.scss b/packages/block-editor/src/components/font-sizes/style.scss
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -69,6 +69,10 @@ $block-inserter-search-height: 38px;
 	border-bottom-color: $white;
 }
 
+.components-popover.block-editor-inserter__popover {
+	z-index: z-index(".components-popover.block-editor-inserter__popover");
+}
+
 .components-popover input[type="search"].block-editor-inserter__search {
 	display: block;
 	margin: $grid-size-large;

diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
@@ -55,7 +55,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .components-popover.block-editor-rich-text__inline-format-toolbar {
 	// Set z-index as if it's displayed on the bottom, otherwise the block
 	// switcher popover might overlap if displayed on the bottom.
-	z-index: z-index(".components-popover:not(.is-mobile).is-bottom");
+	z-index: z-index(".components-popover.block-editor-rich-text__inline-format-toolbar");
 
 	.components-popover__content {
 		min-width: auto;

diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -17,7 +17,6 @@
 @import "./components/color-palette/control.scss";
 @import "./components/contrast-checker/style.scss";
 @import "./components/default-block-appender/style.scss";
-@import "./components/font-sizes/style.scss";
 @import "./components/inner-blocks/style.scss";
 @import "./components/inserter-with-shortcuts/style.scss";
 @import "./components/inserter/style.scss";

diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
@@ -123,7 +123,6 @@ $arrow-size: 8px;
 
 		&.is-bottom {
 			top: 100%;
-			z-index: z-index(".components-popover:not(.is-mobile).is-bottom");
 		}
 
 		&.is-middle {

diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
@@ -6,7 +6,6 @@
 @import "./checkbox-control/style.scss";
 @import "./circular-option-picker/style.scss";
 @import "./color-indicator/style.scss";
-@import "./color-palette/style.scss";
 @import "./color-picker/style.scss";
 @import "./dashicon/style.scss";
 @import "./date-time/style.scss";

diff --git a/packages/edit-post/src/components/header/more-menu/style.scss b/packages/edit-post/src/components/header/more-menu/style.scss
@@ -33,3 +33,7 @@
 		padding: 0;
 	}
 }
+
+.components-popover.edit-post-more-menu__content {
+	z-index: z-index(".components-popover.edit-post-more-menu__content");
+}
diff --git a/packages/editor/src/components/post-visibility/style.scss b/packages/editor/src/components/post-visibility/style.scss
@@ -32,7 +32,3 @@
 		margin-left: 28px;
 	}
 }
-
-.edit-post-post-visibility__dialog.components-popover.is-bottom {
-	z-index: z-index(".edit-post-post-visibility__dialog.components-popover.is-bottom");
-}
diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss
@@ -2,6 +2,10 @@
 	min-width: 380px;
 }
 
+.components-popover.table-of-contents__popover {
+	z-index: z-index(".components-popover.table-of-contents__popover");
+}
+
 .table-of-contents__popover {
 	.components-popover__content {
 		padding: $grid-size-large;