[components] Improve DefaultDialog

sanity-io · Oct 6, 2020 · c3b32d8 · c3b32d8
1 parent beadb0f
commit c3b32d8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 20 deletions.
diff --git a/packages/@sanity/components/src/dialogs/DefaultDialog.css b/packages/@sanity/components/src/dialogs/DefaultDialog.css
@@ -73,7 +73,6 @@
 }
 
 .card {
-  position: relative;
   composes: shadow-24dp from 'part:@sanity/base/theme/shadows-style';
   border-radius: var(--dialog-border-radius);
   animation-name: reveal;
@@ -180,20 +179,12 @@
 .content {
   composes: scrollY from 'part:@sanity/base/theme/layout/scrolling-style';
   border-radius: var(--dialog-border-radius) var(--dialog-border-radius) 0 0;
-  box-sizing: border-box;
   background-color: var(--component-bg);
   color: var(--component-text-color);
 
-  @nest .root[data-dialog-padding='small'] & {
-    padding: var(--small-padding);
-  }
-
-  @nest .root[data-dialog-padding='medium'] & {
-    padding: var(--medium-padding);
-  }
-
-  @nest .root[data-dialog-padding='large'] & {
-    padding: var(--large-padding);
+  @nest .header + & {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
   }
 }
 
@@ -202,9 +193,18 @@
   border-radius: var(--dialog-border-radius);
 }
 
-.header + .content {
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
+.contentWrapper {
+  @nest .root[data-dialog-padding='small'] & {
+    padding: var(--medium-padding) var(--small-padding);
+  }
+
+  @nest .root[data-dialog-padding='medium'] & {
+    padding: var(--large-padding) var(--medium-padding);
+  }
+
+  @nest .root[data-dialog-padding='large'] & {
+    padding: var(--extra-large-padding) var(--large-padding);
+  }
 }
 
 .title {

diff --git a/packages/@sanity/components/src/dialogs/DefaultDialog.tsx b/packages/@sanity/components/src/dialogs/DefaultDialog.tsx
@@ -5,7 +5,7 @@ import {ClickOutside} from 'part:@sanity/components/click-outside'
 import {ContainerQuery} from 'part:@sanity/components/container-query'
 import styles from 'part:@sanity/components/dialogs/default-style'
 import {Portal} from 'part:@sanity/components/portal'
-import React, {useCallback, useRef} from 'react'
+import React, {useCallback} from 'react'
 import Escapable from '../utilities/Escapable'
 import Stacked from '../utilities/Stacked'
 import {DefaultDialogActions} from './DefaultDialogActions'
@@ -44,8 +44,6 @@ function DefaultDialog(props: DefaultDialogProps) {
     title
   } = props
 
-  const contentRef = useRef<HTMLDivElement | null>(null)
-
   const className = classNames(
     styles.root,
     actions && actions.length > 0 && styles.hasFunctions,
@@ -127,8 +125,8 @@ function DefaultDialog(props: DefaultDialogProps) {
                       </div>
                     )}
 
-                    <div className={contentClassName} ref={contentRef}>
-                      {children}
+                    <div className={contentClassName}>
+                      <div className={styles.contentWrapper}>{children}</div>
                     </div>
 
                     {actions && actions.length > 0 && (