[chore] Migrate to using Sanity UI's Layer and Portal components.

sanity-io · Jan 20, 2021 · 5931b1e · 5931b1e
1 parent 25d87bf
commit 5931b1e
Show file tree

Hide file tree

Showing 71 changed files with 723 additions and 575 deletions.
diff --git a/packages/@sanity/base/src/__legacy/@sanity/components/dialogs/DefaultDialog.css b/packages/@sanity/base/src/__legacy/@sanity/components/dialogs/DefaultDialog.css
@@ -25,19 +25,29 @@
 }
 
 .root {
-  composes: flexCenter from 'part:@sanity/base/theme/layout/positioning-style';
-  position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
+  right: 0;
   outline: none;
 
+  /* Override Sanity UI */
+  @nest &.root {
+    position: absolute;
+  }
+
   @media (--max-screen-medium) {
     position: fixed;
     bottom: auto;
   }
 }
 
+.containerQuery {
+  composes: flexCenter from 'part:@sanity/base/theme/layout/positioning-style';
+  width: 100%;
+  height: 100%;
+}
+
 .overlay {
   composes: frosted from 'part:@sanity/base/theme/layout/backgrounds-style';
 
@@ -93,36 +103,36 @@
   display: flex;
   flex-direction: column;
 
-  @nest .root:not([data-dialog-size]) {
+  @nest .root:not([data-dialog-size]) & {
     width: initial;
     height: initial;
   }
 
-  @nest .root[data-dialog-size='small'][data-container-min~='medium'] & {
+  @nest .root[data-dialog-size='small'] > .containerQuery[data-container-min~='medium'] & {
     max-width: 20rem;
   }
 
-  @nest .root[data-dialog-size='medium'][data-container-min~='medium'] & {
+  @nest .root[data-dialog-size='medium'] > .containerQuery[data-container-min~='medium'] & {
     width: 27rem;
   }
 
-  @nest .root[data-dialog-size='medium'][data-container-min~='default'] & {
+  @nest .root[data-dialog-size='medium'] > .containerQuery[data-container-min~='default'] & {
     width: 33rem;
   }
 
-  @nest .root[data-dialog-size='medium'][data-container-min~='large'] & {
+  @nest .root[data-dialog-size='medium'] > .containerQuery[data-container-min~='large'] & {
     width: 35rem;
   }
 
-  @nest .root[data-dialog-size='large'][data-container-min~='medium'] & {
+  @nest .root[data-dialog-size='large'] > .containerQuery[data-container-min~='medium'] & {
     width: 28rem;
   }
 
-  @nest .root[data-dialog-size='large'][data-container-min~='default'] & {
+  @nest .root[data-dialog-size='large'] > .containerQuery[data-container-min~='default'] & {
     width: 40rem;
   }
 
-  @nest .root[data-dialog-size='large'][data-container-min~='large'] & {
+  @nest .root[data-dialog-size='large'] > .containerQuery[data-container-min~='large'] & {
     width: 50rem;
   }
 }
@@ -136,12 +146,15 @@
 }
 
 .header {
-  position: relative;
+  /* Override Sanity UI */
+  @nest &.header {
+    position: relative;
+  }
+
   background-color: var(--dialog-header-color);
   color: var(--dialog-header-color--inverted);
   border-radius: var(--dialog-border-radius) var(--dialog-border-radius) 0 0;
   padding: var(--medium-padding);
-  z-index: 10;
   line-height: 0;
   display: flex;
   align-items: center;
@@ -247,11 +260,15 @@
 
 .floatingCloseButtonContainer {
   composes: shadow-6dp from 'part:@sanity/base/theme/shadows-style';
-  position: absolute;
+
+  /* Override Sanity UI */
+  @nest &.floatingCloseButtonContainer {
+    position: absolute;
+  }
+
   border: 0;
   top: 0;
   right: 0;
-  z-index: 1;
   background-color: var(--component-bg);
   color: var(--component-text-color);
   transform: translate(50%, -50%);
@@ -263,13 +280,16 @@
 }
 
 .footer {
+  /* Override Sanity UI */
+  @nest &.footer {
+    position: relative;
+  }
+
   box-sizing: border-box;
   padding: var(--medium-padding);
   background-color: var(--component-bg);
   color: var(--component-text-color);
   border-radius: 0 0 var(--dialog-border-radius) var(--dialog-border-radius);
-  position: relative;
-  z-index: 10;
   display: flex;
   align-items: center;
   flex-shrink: 0;

diff --git a/packages/@sanity/base/src/__legacy/@sanity/components/dialogs/DefaultDialog.tsx b/packages/@sanity/base/src/__legacy/@sanity/components/dialogs/DefaultDialog.tsx
@@ -1,14 +1,13 @@
 /* eslint-disable react/no-unused-prop-types */
 
+import {Layer, Portal, useClickOutside, useLayer} from '@sanity/ui'
 import classNames from 'classnames'
 import CloseIcon from 'part:@sanity/base/close-icon'
 import Button from 'part:@sanity/components/buttons/default'
 import {ContainerQuery} from 'part:@sanity/components/container-query'
 import styles from 'part:@sanity/components/dialogs/default-style'
-import {Layer, useLayer} from 'part:@sanity/components/layer'
 import {ScrollContainer} from 'part:@sanity/components/scroll'
 import React, {createElement, useCallback, useEffect, useState} from 'react'
-import {useClickOutside} from '../hooks'
 import {DefaultDialogActions} from './DefaultDialogActions'
 import {DialogAction, DialogColor} from './types'
 
@@ -29,7 +28,21 @@ interface DefaultDialogProps {
 }
 
 function DefaultDialog(props: DefaultDialogProps) {
-  return <Layer>{createElement(DefaultDialogChildren, props)}</Layer>
+  const {actions, className: classNameProp, color, padding = 'medium', size = 'medium'} = props
+  const hasActions = actions && actions.length > 0
+
+  return (
+    <Portal>
+      <Layer
+        className={classNames(styles.root, hasActions && styles.hasFunctions, classNameProp)}
+        data-dialog-color={color}
+        data-dialog-padding={padding}
+        data-dialog-size={size}
+      >
+        {createElement(DefaultDialogChildren, props)}
+      </Layer>
+    </Portal>
+  )
 }
 
 export default DefaultDialog
@@ -39,34 +52,29 @@ function DefaultDialogChildren(props: DefaultDialogProps) {
     actions,
     actionsAlign,
     children,
-    className: classNameProp,
     color,
     onAction,
     onClose,
     onClickOutside,
     onEscape,
-    padding = 'medium',
     showCloseButton = true,
-    size = 'medium',
     title,
   } = props
 
-  const layer = useLayer()
-  const isTopLayer = layer.depth === layer.size
+  const {isTopLayer} = useLayer()
   const [cardElement, setCardElement] = useState<HTMLDivElement | null>(null)
   const renderCloseButton = onClose && showCloseButton
   const renderFloatingCloseButton = !title && renderCloseButton
   const contentClassName =
     actions && actions.length > 0 ? styles.content : styles.contentWithoutFooter
 
-  useClickOutside(
-    useCallback(() => {
-      if (isTopLayer) {
-        if (onClickOutside) onClickOutside()
-      }
-    }, [isTopLayer, onClickOutside]),
-    [cardElement]
-  )
+  const handleClickOutside = useCallback(() => {
+    if (isTopLayer) {
+      if (onClickOutside) onClickOutside()
+    }
+  }, [isTopLayer, onClickOutside])
+
+  useClickOutside(handleClickOutside, [cardElement])
 
   const closeButtonColor =
     color && ['danger', 'success', 'warning'].includes(color) ? 'white' : undefined
@@ -88,33 +96,26 @@ function DefaultDialogChildren(props: DefaultDialogProps) {
     }
   }, [isTopLayer, onClose, onEscape])
 
-  const hasActions = actions && actions.length > 0
-
   return (
-    <ContainerQuery
-      className={classNames(styles.root, hasActions && styles.hasFunctions, classNameProp)}
-      data-dialog-color={color}
-      data-dialog-padding={padding}
-      data-dialog-size={size}
-    >
+    <ContainerQuery className={styles.containerQuery}>
       <div className={styles.overlay} />
 
-      <div className={styles.card} ref={setCardElement}>
+      <Layer className={styles.card} ref={setCardElement}>
         <div className={styles.inner}>
           {renderFloatingCloseButton && (
-            <div className={styles.floatingCloseButtonContainer}>
+            <Layer className={styles.floatingCloseButtonContainer}>
               <Button
                 icon={CloseIcon}
                 kind="simple"
                 onClick={onClose}
                 padding="small"
                 title="Close"
               />
-            </div>
+            </Layer>
           )}
 
           {title && (
-            <div className={styles.header}>
+            <Layer className={styles.header}>
               <div className={styles.title}>
                 <h1>{title}</h1>
               </div>
@@ -132,24 +133,24 @@ function DefaultDialogChildren(props: DefaultDialogProps) {
                   />
                 </div>
               )}
-            </div>
+            </Layer>
           )}
 
           <ScrollContainer className={contentClassName}>
             <div className={styles.contentWrapper}>{children}</div>
           </ScrollContainer>
 
           {actions && actions.length > 0 && (
-            <div className={styles.footer}>
+            <Layer className={styles.footer}>
               <DefaultDialogActions
                 actions={actions}
                 actionsAlign={actionsAlign}
                 onAction={onAction}
               />
-            </div>
+            </Layer>
           )}
         </div>
-      </div>
+      </Layer>
     </ContainerQuery>
   )
 }
diff --git a/packages/@sanity/base/src/__legacy/@sanity/components/dialogs/FullscreenDialog.css b/packages/@sanity/base/src/__legacy/@sanity/components/dialogs/FullscreenDialog.css
@@ -1,7 +1,11 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
-  position: absolute;
+  /* Override Sanity UI */
+  @nest &.root {
+    position: absolute;
+  }
+
   top: 0;
   bottom: 0;
   left: 0;