Increase admin submenu z-index

GoogleForCreators · Oct 7, 2022 · f770075 · f770075
1 parent ffc7c72
commit f770075
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/packages/design-system/src/components/index.js b/packages/design-system/src/components/index.js
@@ -26,7 +26,7 @@ export { Input, BaseInput } from './input';
 export { LoadingBar, LOADING_INDICATOR_CLASS } from './loadingBar';
 export { LoadingSpinner } from './loadingSpinner';
 export { MediaInput, MEDIA_VARIANTS } from './mediaInput';
-export { Modal, ModalGlobalStyle, OVERLAY_CLASS } from './modal';
+export { Modal, ModalGlobalStyle, OVERLAY_CLASS, BODY_CLASS } from './modal';
 export { NumericInput } from './input/numericInput';
 export * from './menu';
 export * from './pill';

diff --git a/packages/design-system/src/components/modal/index.js b/packages/design-system/src/components/modal/index.js
@@ -22,6 +22,7 @@ import ReactModal from 'react-modal';
 import PropTypes from 'prop-types';
 import { createGlobalStyle, ThemeContext } from 'styled-components';
 
+export const BODY_CLASS = 'WebStories_ReactModal__Body--open';
 export const CONTENT_CLASS = 'WebStories_ReactModal__Content';
 export const OVERLAY_CLASS = 'WebStories_ReactModal__Overlay';
 

diff --git a/packages/wp-story-editor/src/theme.js b/packages/wp-story-editor/src/theme.js
@@ -17,7 +17,7 @@
  * External dependencies
  */
 import { createGlobalStyle } from 'styled-components';
-import { OVERLAY_CLASS } from '@googleforcreators/design-system';
+import { OVERLAY_CLASS, BODY_CLASS } from '@googleforcreators/design-system';
 
 /**
  * Internal dependencies
@@ -33,4 +33,13 @@ export const GlobalStyle = createGlobalStyle`
   body.folded .${OVERLAY_CLASS} {
     left: ${MENU_FOLDED_WIDTH}px !important;
   }
+
+  /* Increase submenu z-index from 3 to 15 so it's above the modal overlay (z-index 10).
+  .${BODY_CLASS} {
+    #adminmenu .wp-has-current-submenu .wp-submenu,
+    #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
+    #adminmenu .wp-has-current-submenu.opensub .wp-submenu {
+      z-index: 15;
+    }
+  }
 `;