Skip to content

Commit 4ce61ca

Browse files
devjiwonchoidevjiwonchoi
authored
[DevOverlay] Decouple Dialog component from Error Overlay (vercel#74638)
This PR decoupled the `Dialog` component with the "Error" overlay. Removed unused styles in the progress.
1 parent 2a604cd commit 4ce61ca

File tree

8 files changed

+127
-69
lines changed

8 files changed

+127
-69
lines changed

‎packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/Dialog.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@ export type DialogProps = {
66
type: 'error' | 'warning'
77
'aria-labelledby': string
88
'aria-describedby': string
9+
className?: string
910
onClose?: () => void
1011
}
1112

1213
const Dialog: React.FC<DialogProps> = function Dialog({
1314
children,
1415
type,
16+
className,
1517
onClose,
1618
...props
1719
}) {
@@ -81,6 +83,7 @@ const Dialog: React.FC<DialogProps> = function Dialog({
8183
aria-labelledby={props['aria-labelledby']}
8284
aria-describedby={props['aria-describedby']}
8385
aria-modal="true"
86+
className={className}
8487
>
8588
{children}
8689
</div>

‎packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,7 @@ const styles = css`
1010
margin-right: auto;
1111
margin-left: auto;
1212
13-
background: var(--color-background-100);
14-
border: 1px solid var(--color-gray-400);
15-
border-radius: var(--rounded-xl);
16-
box-shadow: var(--shadow-md);
17-
max-height: calc(100% - 56px);
18-
position: relative;
13+
z-index: 50;
1914
outline: none;
2015
}
2116

‎packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/body.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { noop as css } from '../../../helpers/noop-template'
2+
import { DialogBody } from '../../Dialog'
3+
4+
type ErrorOverlayDialogBodyProps = {
5+
children?: React.ReactNode
6+
onClose?: () => void
7+
}
8+
9+
export function ErrorOverlayDialogBody({
10+
children,
11+
}: ErrorOverlayDialogBodyProps) {
12+
return (
13+
<DialogBody className="nextjs-container-errors-body">{children}</DialogBody>
14+
)
15+
}
16+
17+
export const DIALOG_BODY_STYLES = css``

‎packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Dialog } from '../../Dialog/Dialog'
2+
import { noop as css } from '../../../helpers/noop-template'
3+
4+
type ErrorOverlayDialogProps = {
5+
children?: React.ReactNode
6+
onClose?: () => void
7+
}
8+
9+
export function ErrorOverlayDialog({
10+
children,
11+
onClose,
12+
}: ErrorOverlayDialogProps) {
13+
return (
14+
<Dialog
15+
type="error"
16+
aria-labelledby="nextjs__container_errors_label"
17+
aria-describedby="nextjs__container_errors_desc"
18+
onClose={onClose}
19+
className="error-overlay-dialog"
20+
>
21+
{children}
22+
</Dialog>
23+
)
24+
}
25+
26+
export const DIALOG_STYLES = css`
27+
.error-overlay-dialog {
28+
background: var(--color-background-100);
29+
border: 1px solid var(--color-gray-400);
30+
border-radius: var(--rounded-xl);
31+
box-shadow: var(--shadow-md);
32+
position: relative;
33+
}
34+
`

‎packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { DialogHeader } from '../../Dialog/DialogHeader'
2+
import { noop as css } from '../../../helpers/noop-template'
3+
4+
type ErrorOverlayDialogHeaderProps = {
5+
children?: React.ReactNode
6+
}
7+
8+
export function ErrorOverlayDialogHeader({
9+
children,
10+
}: ErrorOverlayDialogHeaderProps) {
11+
return (
12+
<DialogHeader className="nextjs-container-errors-header">
13+
{children}
14+
</DialogHeader>
15+
)
16+
}
17+
18+
export const DIALOG_HEADER_STYLES = css`
19+
.nextjs-container-errors-header {
20+
position: relative;
21+
}
22+
.nextjs-container-errors-header > h1 {
23+
font-size: var(--size-font-big);
24+
line-height: var(--size-font-bigger);
25+
font-weight: bold;
26+
margin: calc(var(--size-gap-double) * 1.5) 0;
27+
color: var(--color-title-h1);
28+
}
29+
.nextjs-container-errors-header small {
30+
font-size: var(--size-font-small);
31+
color: var(--color-accents-1);
32+
margin-left: var(--size-gap-double);
33+
}
34+
.nextjs-container-errors-header small > span {
35+
font-family: var(--font-stack-monospace);
36+
}
37+
.nextjs-container-errors-header > div > small {
38+
margin: 0;
39+
margin-top: var(--size-gap-half);
40+
}
41+
.nextjs-container-errors-header > p > a {
42+
color: inherit;
43+
font-weight: bold;
44+
}
45+
.nextjs-container-errors-header
46+
> .nextjs-container-build-error-version-status {
47+
position: absolute;
48+
top: var(--size-4);
49+
right: var(--size-4);
50+
}
51+
`

‎packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,7 @@ import type { VersionInfo } from '../../../../../../../../server/dev/parse-versi
44
import type { ErrorMessageType } from '../error-message/error-message'
55
import type { ErrorType } from '../error-type-label/error-type-label'
66

7-
import {
8-
Dialog,
9-
DialogHeader,
10-
DialogBody,
11-
DialogContent,
12-
DialogFooter,
13-
} from '../../Dialog'
7+
import { DialogContent, DialogFooter } from '../../Dialog'
148
import { Overlay } from '../../Overlay'
159
import {
1610
ErrorOverlayToolbar,
@@ -32,6 +26,13 @@ import {
3226
styles as floatingHeaderStyles,
3327
} from '../error-overlay-floating-header/error-overlay-floating-header'
3428

29+
import { ErrorOverlayDialog, DIALOG_STYLES } from '../dialog/dialog'
30+
import {
31+
ErrorOverlayDialogHeader,
32+
DIALOG_HEADER_STYLES,
33+
} from '../dialog/header'
34+
import { ErrorOverlayDialogBody, DIALOG_BODY_STYLES } from '../dialog/body'
35+
3536
type ErrorOverlayLayoutProps = {
3637
errorMessage: ErrorMessageType
3738
errorType: ErrorType
@@ -66,20 +67,16 @@ export function ErrorOverlayLayout({
6667
}: ErrorOverlayLayoutProps) {
6768
return (
6869
<Overlay fixed={isBuildError}>
69-
<Dialog
70-
type="error"
71-
aria-labelledby="nextjs__container_errors_label"
72-
aria-describedby="nextjs__container_errors_desc"
73-
onClose={onClose}
74-
>
70+
71+
<ErrorOverlayDialog onClose={onClose}>
7572
<ErrorOverlayFloatingHeader
7673
readyErrors={readyErrors}
7774
activeIdx={activeIdx}
7875
setActiveIndex={setActiveIndex}
7976
versionInfo={versionInfo}
8077
/>
8178
<DialogContent>
82-
<DialogHeader className="nextjs-container-errors-header">
79+
<ErrorOverlayDialogHeader>
8380
<div
8481
className="nextjs__container_errors__error_title"
8582
// allow assertion in tests before error rating is implemented
@@ -89,10 +86,10 @@ export function ErrorOverlayLayout({
8986
<ErrorOverlayToolbar error={error} debugInfo={debugInfo} />
9087
</div>
9188
<ErrorMessage errorMessage={errorMessage} />
92-
</DialogHeader>
93-
<DialogBody className="nextjs-container-errors-body">
94-
{children}
95-
</DialogBody>
89+
</ErrorOverlayDialogHeader>
90+
91+
<ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>
92+
9693
<DialogFooter>
9794
{/* TODO: errorCode should not be undefined whatsoever */}
9895
<ErrorOverlayFooter
@@ -105,12 +102,16 @@ export function ErrorOverlayLayout({
105102
errorsCount={readyErrors?.length ?? 0}
106103
activeIdx={activeIdx ?? 0}
107104
/>
108-
</Dialog>
105+
</ErrorOverlayDialog>
109106
</Overlay>
110107
)
111108
}
112109

113110
export const styles = css`
111+
${DIALOG_STYLES}
112+
${DIALOG_HEADER_STYLES}
113+
${DIALOG_BODY_STYLES}
114+
114115
${floatingHeaderStyles}
115116
${errorTypeLabelStyles}
116117
${errorMessageStyles}

‎packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,4 @@ export const BuildError: React.FC<BuildErrorProps> = function BuildError({
2424
)
2525
}
2626

27-
export const styles = css`
28-
.nextjs-container-errors-body footer {
29-
margin-top: var(--size-gap);
30-
}
31-
.nextjs-container-errors-body footer p {
32-
margin: 0;
33-
}
34-
35-
.nextjs-container-errors-body small {
36-
color: var(--color-font);
37-
}
38-
`
27+
export const styles = css``

‎packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -315,24 +315,6 @@ export const styles = css`
315315
.nextjs-error-with-static {
316316
bottom: calc(var(--size-gap-double) * 4.5);
317317
}
318-
.nextjs-container-errors-header {
319-
position: relative;
320-
}
321-
.nextjs-container-errors-header > h1 {
322-
font-size: var(--size-font-big);
323-
line-height: var(--size-font-bigger);
324-
font-weight: bold;
325-
margin: calc(var(--size-gap-double) * 1.5) 0;
326-
color: var(--color-title-h1);
327-
}
328-
.nextjs-container-errors-header small {
329-
font-size: var(--size-font-small);
330-
color: var(--color-accents-1);
331-
margin-left: var(--size-gap-double);
332-
}
333-
.nextjs-container-errors-header small > span {
334-
font-family: var(--font-stack-monospace);
335-
}
336318
p.nextjs__container_errors__link {
337319
color: var(--color-text-color-red-1);
338320
font-weight: 600;
@@ -343,14 +325,6 @@ export const styles = css`
343325
font-weight: 600;
344326
font-size: 15px;
345327
}
346-
.nextjs-container-errors-header > div > small {
347-
margin: 0;
348-
margin-top: var(--size-gap-half);
349-
}
350-
.nextjs-container-errors-header > p > a {
351-
color: inherit;
352-
font-weight: bold;
353-
}
354328
.nextjs-container-errors-body > h2:not(:first-child) {
355329
margin-top: calc(var(--size-gap-double) + var(--size-gap));
356330
}
@@ -392,12 +366,6 @@ export const styles = css`
392366
.nextjs-toast-hide-button:hover {
393367
opacity: 1;
394368
}
395-
.nextjs-container-errors-header
396-
> .nextjs-container-build-error-version-status {
397-
position: absolute;
398-
top: var(--size-4);
399-
right: var(--size-4);
400-
}
401369
.nextjs__container_errors_inspect_copy_button {
402370
cursor: pointer;
403371
background: none;

0 commit comments

Comments
 (0)