Fix z-index issues for document editor text-area and toolbar

.changeset/lucky-parrots-tell.md

@@ -0,0 +1,6 @@
+---
+'@keystone-ui/modals': minor
+'@keystone-6/fields-document': minor
+---
+
+Fixed z-index issues occurring when pop-overs in document editor text-area or the toolbar overlapped other fields and buttons. 

design-system/packages/modals/src/Blanket.tsx

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 
 import { HTMLAttributes, forwardRef } from 'react';
-import { jsx, keyframes, useTheme } from '@keystone-ui/core';
+import { jsx, keyframes } from '@keystone-ui/core';
 
 const fadeInAnim = keyframes({
   from: {
@@ -12,8 +12,6 @@ const fadeInAnim = keyframes({
 const easing = 'cubic-bezier(0.2, 0, 0, 1)';
 
 export const Blanket = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
-  const theme = useTheme();
-
   return (
     <div
       ref={ref}
@@ -25,7 +23,6 @@ export const Blanket = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>
         position: 'fixed',
         right: 0,
         top: 0,
-        zIndex: theme.elevation.e400,
       }}
       {...props}
     />

design-system/packages/modals/src/DrawerBase.tsx

@@ -89,7 +89,6 @@ export const DrawerBase = ({
           style={{
             transition: `opacity 150ms linear`,
             ...blanketTransition[transitionState],
-            zIndex: theme.elevation.e400,
           }}
         />
         <FocusLock autoFocus returnFocus onActivation={activateFocusLock}>
@@ -112,7 +111,6 @@ export const DrawerBase = ({
                 top: 0,
                 transition: `transform 150ms ${easing}`,
                 width: DRAWER_WIDTHS[width],
-                zIndex: theme.elevation.e400,
 
                 // flex layout must be applied here so content will grow/shrink properly
                 display: 'flex',

packages/fields-document/src/DocumentEditor/Toolbar.tsx

@@ -188,7 +188,7 @@ const ToolbarContainer = ({ children }: { children: ReactNode }) => {
         paddingTop: spacing.small,
         position: 'sticky',
         top: 0,
-        zIndex: 30,
+        zIndex: 2,
       }}
     >
       <ToolbarGroup>{children}</ToolbarGroup>

packages/fields-document/src/DocumentEditor/link.tsx

@@ -5,7 +5,7 @@ import { ReactEditor, RenderElementProps, useFocused, useSelected } from 'slate-
 import { Editor, Node, Range, Transforms } from 'slate';
 import { forwardRef, memo, useEffect, useMemo, useState } from 'react';
 
-import { jsx, Portal, useTheme } from '@keystone-ui/core';
+import { jsx, useTheme } from '@keystone-ui/core';
 import { useControlledPopover } from '@keystone-ui/popover';
 import { Tooltip } from '@keystone-ui/tooltip';
 import { LinkIcon } from '@keystone-ui/icons/icons/LinkIcon';
@@ -123,51 +123,49 @@ export const LinkElement = ({
         {children}
       </a>
       {((selected && delayedFocused) || focusedInInlineDialog) && (
-        <Portal>
-          <InlineDialog
-            {...dialog.props}
-            ref={dialog.ref}
-            onFocus={() => {
-              setFocusedInInlineDialog(true);
-            }}
-            onBlur={() => {
-              setFocusedInInlineDialog(false);
-              setLocalForceValidation(true);
-            }}
-          >
-            <div css={{ display: 'flex', flexDirection: 'column' }}>
-              <ToolbarGroup>
-                <input
-                  css={{ fontSize: typography.fontSize.small, width: 240 }}
-                  value={href}
-                  onChange={event => {
-                    setNode({ href: event.target.value });
-                  }}
-                />
-                <Tooltip content="Open link in new tab" weight="subtle">
-                  {attrs => (
-                    <ToolbarButton
-                      as="a"
-                      onMouseDown={event => {
-                        event.preventDefault();
-                      }}
-                      href={href}
-                      target="_blank"
-                      rel="noreferrer"
-                      variant="action"
-                      {...attrs}
-                    >
-                      {externalLinkIcon}
-                    </ToolbarButton>
-                  )}
-                </Tooltip>
-                {separator}
-                <UnlinkButton onUnlink={unlink} />
-              </ToolbarGroup>
-              {showInvalidState && <span css={{ color: 'red' }}>Please enter a valid URL</span>}
-            </div>
-          </InlineDialog>
-        </Portal>
+        <InlineDialog
+          {...dialog.props}
+          ref={dialog.ref}
+          onFocus={() => {
+            setFocusedInInlineDialog(true);
+          }}
+          onBlur={() => {
+            setFocusedInInlineDialog(false);
+            setLocalForceValidation(true);
+          }}
+        >
+          <div css={{ display: 'flex', flexDirection: 'column' }}>
+            <ToolbarGroup>
+              <input
+                css={{ fontSize: typography.fontSize.small, width: 240 }}
+                value={href}
+                onChange={event => {
+                  setNode({ href: event.target.value });
+                }}
+              />
+              <Tooltip content="Open link in new tab" weight="subtle">
+                {attrs => (
+                  <ToolbarButton
+                    as="a"
+                    onMouseDown={event => {
+                      event.preventDefault();
+                    }}
+                    href={href}
+                    target="_blank"
+                    rel="noreferrer"
+                    variant="action"
+                    {...attrs}
+                  >
+                    {externalLinkIcon}
+                  </ToolbarButton>
+                )}
+              </Tooltip>
+              {separator}
+              <UnlinkButton onUnlink={unlink} />
+            </ToolbarGroup>
+            {showInvalidState && <span css={{ color: 'red' }}>Please enter a valid URL</span>}
+          </div>
+        </InlineDialog>
       )}
     </span>
   );

packages/fields-document/src/DocumentEditor/primitives/inline-dialog.tsx

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { jsx, useTheme } from '@keystone-ui/core';
+import { jsx, Portal, useTheme } from '@keystone-ui/core';
 import { HTMLAttributes, forwardRef } from 'react';
 
 type Props = {
@@ -21,7 +21,7 @@ export const InlineDialog = forwardRef<HTMLDivElement, Props>(({ isRelative, ...
       }
     : {};
 
-  return (
+  let dialog = (
     <div
       ref={ref}
       contentEditable={false}
@@ -32,10 +32,15 @@ export const InlineDialog = forwardRef<HTMLDivElement, Props>(({ isRelative, ...
         padding: spacing.small,
         position: 'absolute',
         userSelect: 'none',
-        zIndex: 1,
         ...relativeStyles,
       }}
       {...props}
     />
   );
+
+  if (isRelative) {
+    return dialog;
+  }
+
+  return <Portal>{dialog}</Portal>;
 });