[DevOverlay] Decouple Dialog component from Error Overlay

vercel · Jan 8, 2025 · 1055ba5 · 1055ba5
1 parent daa0478
commit 1055ba5
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 65 deletions.
diff --git a/...c/client/components/react-dev-overlay/_experimental/internal/components/Dialog/Dialog.tsx b/...c/client/components/react-dev-overlay/_experimental/internal/components/Dialog/Dialog.tsx
@@ -6,12 +6,14 @@ export type DialogProps = {
   type: 'error' | 'warning'
   'aria-labelledby': string
   'aria-describedby': string
+  className?: string
   onClose?: () => void
 }
 
 const Dialog: React.FC<DialogProps> = function Dialog({
   children,
   type,
+  className,
   onClose,
   ...props
 }) {
@@ -92,6 +94,7 @@ const Dialog: React.FC<DialogProps> = function Dialog({
       aria-labelledby={props['aria-labelledby']}
       aria-describedby={props['aria-describedby']}
       aria-modal="true"
+      className={className}
     >
       {children}
     </div>

diff --git a/...rc/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts b/...rc/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts
@@ -10,11 +10,6 @@ const styles = css`
     margin-right: auto;
     margin-left: auto;
 
-    background: var(--color-background-100);
-    border: 1px solid var(--color-gray-400);
-    border-radius: var(--rounded-xl);
-    box-shadow: var(--shadow-md);
-
     z-index: 50;
     outline: none;
     overflow-y: hidden;

diff --git a/...ponents/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog-body.tsx b/...ponents/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog-body.tsx
@@ -0,0 +1,24 @@
+import { noop as css } from '../../../helpers/noop-template'
+import { DialogBody } from '../../Dialog'
+
+type ErrorOverlayDialogBodyProps = {
+  children?: React.ReactNode
+  onClose?: () => void
+}
+
+export function ErrorOverlayDialogBody({
+  children,
+}: ErrorOverlayDialogBodyProps) {
+  return (
+    <DialogBody className="nextjs-container-errors-body">{children}</DialogBody>
+  )
+}
+
+export const styles = css`
+  .error-overlay-dialog {
+    background: var(--color-background-100);
+    border: 1px solid var(--color-gray-400);
+    border-radius: var(--rounded-xl);
+    box-shadow: var(--shadow-md);
+  }
+`
diff --git a/...nents/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog-header.tsx b/...nents/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog-header.tsx
@@ -0,0 +1,51 @@
+import { DialogHeader } from '../../Dialog/DialogHeader'
+import { noop as css } from '../../../helpers/noop-template'
+
+type ErrorOverlayDialogHeaderProps = {
+  children?: React.ReactNode
+}
+
+export function ErrorOverlayDialogHeader({
+  children,
+}: ErrorOverlayDialogHeaderProps) {
+  return (
+    <DialogHeader className="nextjs-container-errors-header">
+      {children}
+    </DialogHeader>
+  )
+}
+
+export const styles = css`
+  .nextjs-container-errors-header {
+    position: relative;
+  }
+  .nextjs-container-errors-header > h1 {
+    font-size: var(--size-font-big);
+    line-height: var(--size-font-bigger);
+    font-weight: bold;
+    margin: calc(var(--size-gap-double) * 1.5) 0;
+    color: var(--color-title-h1);
+  }
+  .nextjs-container-errors-header small {
+    font-size: var(--size-font-small);
+    color: var(--color-accents-1);
+    margin-left: var(--size-gap-double);
+  }
+  .nextjs-container-errors-header small > span {
+    font-family: var(--font-stack-monospace);
+  }
+  .nextjs-container-errors-header > div > small {
+    margin: 0;
+    margin-top: var(--size-gap-half);
+  }
+  .nextjs-container-errors-header > p > a {
+    color: inherit;
+    font-weight: bold;
+  }
+  .nextjs-container-errors-header
+    > .nextjs-container-build-error-version-status {
+    position: absolute;
+    top: var(--size-4);
+    right: var(--size-4);
+  }
+`
diff --git a/...t/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx b/...t/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx
@@ -0,0 +1,33 @@
+import { Dialog } from '../../Dialog/Dialog'
+import { noop as css } from '../../../helpers/noop-template'
+
+type ErrorOverlayDialogProps = {
+  children?: React.ReactNode
+  onClose?: () => void
+}
+
+export function ErrorOverlayDialog({
+  children,
+  onClose,
+}: ErrorOverlayDialogProps) {
+  return (
+    <Dialog
+      type="error"
+      aria-labelledby="nextjs__container_errors_label"
+      aria-describedby="nextjs__container_errors_desc"
+      onClose={onClose}
+      className="error-overlay-dialog"
+    >
+      {children}
+    </Dialog>
+  )
+}
+
+export const styles = css`
+  .error-overlay-dialog {
+    background: var(--color-background-100);
+    border: 1px solid var(--color-gray-400);
+    border-radius: var(--rounded-xl);
+    box-shadow: var(--shadow-md);
+  }
+`
diff --git a/...ay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx b/...ay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
@@ -4,13 +4,7 @@ import type { VersionInfo } from '../../../../../../../../server/dev/parse-versi
 import type { ErrorMessageType } from '../error-message/error-message'
 import type { ErrorType } from '../error-type-label/error-type-label'
 
-import {
-  Dialog,
-  DialogHeader,
-  DialogBody,
-  DialogContent,
-  DialogFooter,
-} from '../../Dialog'
+import { DialogBody, DialogContent, DialogFooter } from '../../Dialog'
 import { Overlay } from '../../Overlay'
 import {
   ErrorOverlayToolbar,
@@ -31,6 +25,11 @@ import {
   ErrorOverlayFloatingHeader,
   styles as floatingHeaderStyles,
 } from '../error-overlay-floating-header/error-overlay-floating-header'
+import { ErrorOverlayDialog, styles as dialogStyles } from '../dialog/dialog'
+import {
+  ErrorOverlayDialogHeader,
+  styles as dialogHeaderStyles,
+} from '../dialog/dialog-header'
 
 type ErrorOverlayLayoutProps = {
   errorMessage: ErrorMessageType
@@ -72,14 +71,10 @@ export function ErrorOverlayLayout({
         setActiveIndex={setActiveIndex}
         versionInfo={versionInfo}
       />
-      <Dialog
-        type="error"
-        aria-labelledby="nextjs__container_errors_label"
-        aria-describedby="nextjs__container_errors_desc"
-        onClose={onClose}
-      >
+
+      <ErrorOverlayDialog onClose={onClose}>
         <DialogContent>
-          <DialogHeader className="nextjs-container-errors-header">
+          <ErrorOverlayDialogHeader>
             <div
               className="nextjs__container_errors__error_title"
               // allow assertion in tests before error rating is implemented
@@ -89,7 +84,7 @@ export function ErrorOverlayLayout({
               <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />
             </div>
             <ErrorMessage errorMessage={errorMessage} />
-          </DialogHeader>
+          </ErrorOverlayDialogHeader>
           <DialogBody className="nextjs-container-errors-body">
             {children}
           </DialogBody>
@@ -101,7 +96,8 @@ export function ErrorOverlayLayout({
             />
           </DialogFooter>
         </DialogContent>
-      </Dialog>
+      </ErrorOverlayDialog>
+
       <ErrorOverlayBottomStacks
         errorsCount={readyErrors?.length ?? 0}
         activeIdx={activeIdx ?? 0}
@@ -111,6 +107,8 @@ export function ErrorOverlayLayout({
 }
 
 export const styles = css`
+  ${dialogStyles}
+  ${dialogHeaderStyles}
   ${floatingHeaderStyles}
   ${errorTypeLabelStyles}
   ${errorMessageStyles}

diff --git a/...t/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx b/...t/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx
@@ -24,15 +24,4 @@ export const BuildError: React.FC<BuildErrorProps> = function BuildError({
   )
 }
 
-export const styles = css`
-  .nextjs-container-errors-body footer {
-    margin-top: var(--size-gap);
-  }
-  .nextjs-container-errors-body footer p {
-    margin: 0;
-  }
-
-  .nextjs-container-errors-body small {
-    color: var(--color-font);
-  }
-`
+export const styles = css``
diff --git a/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx b/.../next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx
@@ -313,24 +313,6 @@ export const styles = css`
   .nextjs-error-with-static {
     bottom: calc(var(--size-gap-double) * 4.5);
   }
-  .nextjs-container-errors-header {
-    position: relative;
-  }
-  .nextjs-container-errors-header > h1 {
-    font-size: var(--size-font-big);
-    line-height: var(--size-font-bigger);
-    font-weight: bold;
-    margin: calc(var(--size-gap-double) * 1.5) 0;
-    color: var(--color-title-h1);
-  }
-  .nextjs-container-errors-header small {
-    font-size: var(--size-font-small);
-    color: var(--color-accents-1);
-    margin-left: var(--size-gap-double);
-  }
-  .nextjs-container-errors-header small > span {
-    font-family: var(--font-stack-monospace);
-  }
   p.nextjs__container_errors__link {
     color: var(--color-text-color-red-1);
     font-weight: 600;
@@ -341,14 +323,6 @@ export const styles = css`
     font-weight: 600;
     font-size: 15px;
   }
-  .nextjs-container-errors-header > div > small {
-    margin: 0;
-    margin-top: var(--size-gap-half);
-  }
-  .nextjs-container-errors-header > p > a {
-    color: inherit;
-    font-weight: bold;
-  }
   .nextjs-container-errors-body > h2:not(:first-child) {
     margin-top: calc(var(--size-gap-double) + var(--size-gap));
   }
@@ -390,12 +364,6 @@ export const styles = css`
   .nextjs-toast-hide-button:hover {
     opacity: 1;
   }
-  .nextjs-container-errors-header
-    > .nextjs-container-build-error-version-status {
-    position: absolute;
-    top: var(--size-4);
-    right: var(--size-4);
-  }
   .nextjs__container_errors_inspect_copy_button {
     cursor: pointer;
     background: none;