SelectDropdown: Fix zIndex issue + adjust values in zIndex registry (#…

…242)
ItsJonQ · Jan 21, 2021 · 9fc4c97 · 9fc4c97
1 parent 97b85e3
commit 9fc4c97
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 15 deletions.
diff --git a/packages/components/src/Dropdown/DropdownMenuCard.js b/packages/components/src/Dropdown/DropdownMenuCard.js
@@ -3,6 +3,7 @@ import {
 	ContextSystemProvider,
 	useContextSystem,
 } from '@wp-g2/context';
+import { cx } from '@wp-g2/styles';
 import React from 'react';
 
 import { Card } from '../Card';
@@ -14,14 +15,18 @@ import * as styles from './Dropdown.styles';
  * @param {import('react').Ref<any>} forwardedRef
  */
 function DropdownMenuCard(props, forwardedRef) {
-	const { children, elevation = 3, ...otherProps } = useContextSystem(
-		props,
-		'DropdownMenuCard',
-	);
+	const {
+		children,
+		className,
+		elevation = 3,
+		...otherProps
+	} = useContextSystem(props, 'DropdownMenuCard');
+
+	const classes = cx(styles.Card, className);
 
 	return (
 		<Card
-			className={styles.Card}
+			className={classes}
 			elevation={elevation}
 			{...otherProps}
 			ref={forwardedRef}

diff --git a/packages/components/src/__tests__/__snapshots__/Components.test.js.snap b/packages/components/src/__tests__/__snapshots__/Components.test.js.snap
@@ -11547,7 +11547,7 @@ exports[`props should render DropdownMenu 1`] = `
   outline: none;
   padding: 0;
   position: relative;
-  z-index: 9998;
+  z-index: 1000000;
   min-width: 200px;
   opacity: 0;
   -webkit-transform-origin: top center;
@@ -11607,7 +11607,7 @@ exports[`props should render DropdownMenu with css prop 1`] = `
   outline: none;
   padding: 0;
   position: relative;
-  z-index: 9998;
+  z-index: 1000000;
   min-width: 200px;
   opacity: 0;
   -webkit-transform-origin: top center;
@@ -11667,7 +11667,7 @@ exports[`props should render DropdownMenu with css prop 2`] = `
   outline: none;
   padding: 0;
   position: relative;
-  z-index: 9998;
+  z-index: 1000000;
   min-width: 200px;
   opacity: 0;
   -webkit-transform-origin: top center;
@@ -11738,6 +11738,11 @@ exports[`props should render DropdownMenuCard 1`] = `
   outline: none;
   border-radius: 2px;
   border-radius: var(--wp-g2-card-border-radius);
+  z-index: 1000000;
+  max-height: 50vh;
+  min-height: 24px;
+  outline: none;
+  position: absolute;
 }
 
 @media (prefers-reduced-motion) {
@@ -11982,6 +11987,11 @@ exports[`props should render DropdownMenuCard with css prop 1`] = `
   outline: none;
   border-radius: 2px;
   border-radius: var(--wp-g2-card-border-radius);
+  z-index: 1000000;
+  max-height: 50vh;
+  min-height: 24px;
+  outline: none;
+  position: absolute;
 }
 
 @media (prefers-reduced-motion) {
@@ -12226,6 +12236,11 @@ exports[`props should render DropdownMenuCard with css prop 2`] = `
   outline: none;
   border-radius: 2px;
   border-radius: var(--wp-g2-card-border-radius);
+  z-index: 1000000;
+  max-height: 50vh;
+  min-height: 24px;
+  outline: none;
+  position: absolute;
   background: red;
   padding: 27px;
 }
@@ -27748,6 +27763,7 @@ exports[`props should render SelectDropdown 1`] = `
   font-weight: normal;
   font-weight: var(--wp-g2-font-weight);
   margin: 0;
+  z-index: 1000000;
   outline: none;
 }
 
@@ -27786,6 +27802,11 @@ exports[`props should render SelectDropdown 1`] = `
   outline: none;
   border-radius: 2px;
   border-radius: var(--wp-g2-card-border-radius);
+  z-index: 1000000;
+  max-height: 50vh;
+  min-height: 24px;
+  outline: none;
+  position: absolute;
   display: none;
   width: 100%;
   min-width: 200px;
@@ -28513,6 +28534,7 @@ exports[`props should render SelectDropdown with css prop 1`] = `
   font-weight: normal;
   font-weight: var(--wp-g2-font-weight);
   margin: 0;
+  z-index: 1000000;
   outline: none;
 }
 
@@ -28551,6 +28573,11 @@ exports[`props should render SelectDropdown with css prop 1`] = `
   outline: none;
   border-radius: 2px;
   border-radius: var(--wp-g2-card-border-radius);
+  z-index: 1000000;
+  max-height: 50vh;
+  min-height: 24px;
+  outline: none;
+  position: absolute;
   display: none;
   width: 100%;
   min-width: 200px;
@@ -29280,6 +29307,7 @@ exports[`props should render SelectDropdown with css prop 2`] = `
   font-weight: normal;
   font-weight: var(--wp-g2-font-weight);
   margin: 0;
+  z-index: 1000000;
   outline: none;
 }
 
@@ -29318,6 +29346,11 @@ exports[`props should render SelectDropdown with css prop 2`] = `
   outline: none;
   border-radius: 2px;
   border-radius: var(--wp-g2-card-border-radius);
+  z-index: 1000000;
+  max-height: 50vh;
+  min-height: 24px;
+  outline: none;
+  position: absolute;
   display: none;
   width: 100%;
   min-width: 200px;

diff --git a/packages/components/src/select-dropdown/__tests__/__snapshots__/index.js.snap b/packages/components/src/select-dropdown/__tests__/__snapshots__/index.js.snap
@@ -414,6 +414,7 @@ exports[`props should render correctly 1`] = `
   font-weight: normal;
   font-weight: var(--wp-g2-font-weight);
   margin: 0;
+  z-index: 1000000;
   outline: none;
 }
 
@@ -452,6 +453,11 @@ exports[`props should render correctly 1`] = `
   outline: none;
   border-radius: 2px;
   border-radius: var(--wp-g2-card-border-radius);
+  z-index: 1000000;
+  max-height: 50vh;
+  min-height: 24px;
+  outline: none;
+  position: absolute;
   display: none;
   width: 100%;
   min-width: 200px;

diff --git a/packages/components/src/select-dropdown/select-dropdown-styles.js b/packages/components/src/select-dropdown/select-dropdown-styles.js
@@ -1,11 +1,16 @@
-import { css } from '@wp-g2/styles';
+import { css, ui } from '@wp-g2/styles';
 
 import * as baseFieldStyles from '../BaseField/BaseField.styles';
 
 export const SelectDropdown = css`
 	position: relative;
 `;
 
+export const Popover = css`
+	${ui.zIndex('Dropdown')};
+	outline: none;
+`;
+
 export const MenuWrapper = css`
 	outline: none;
 `;

diff --git a/packages/components/src/select-dropdown/use-select-dropdown.js b/packages/components/src/select-dropdown/use-select-dropdown.js
@@ -109,7 +109,6 @@ export function useSelectDropdown(props) {
 		getLabelProps,
 		getMenuProps,
 		getToggleButtonProps,
-		highlightedIndex,
 		isOpen,
 		selectedItem,
 	} = useSelect({
@@ -177,7 +176,7 @@ export function useSelectDropdown(props) {
 	const popoverProps = {
 		...ui.$('SelectDropdownPopover'),
 		'aria-hidden': !isOpen,
-		className: styles.MenuWrapper,
+		className: styles.Popover,
 		ref: popoverRef,
 		style: {
 			maxWidth: isInline ? maxWidthProp : sizes.width,

diff --git a/packages/styles/src/mixins/z-index.js b/packages/styles/src/mixins/z-index.js
@@ -1,9 +1,14 @@
 // Z-Index System
+
+/**
+ * Roughly matching the z-index layers index from @wordpress/base-styles
+ * https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_z-index.scss
+ */
 const Z_INDEX_REGISTRY = {
-	Tooltip: 999999,
-	Popover: 9999,
-	Dropdown: 9998,
-	Modal: 999,
+	Tooltip: 1000002,
+	Popover: 1000000,
+	Dropdown: 1000000,
+	Modal: 100000,
 	ControlFocus: 1,
 };