Skip to content

Commit a45cb6f

Browse files
RobinMalfaitRobinMalfait
authored
Remove deprecated DialogBackdrop and DialogOverlay components (#3171)
* remove `DialogBackdrop` and `DialogOverlay` We deprecated those components in v1.6, since they are no longer documented and this is a major release, we can safely get rid of it. * update changelog * migrate playground example to use `Dialog.Panel`
1 parent 1ae1af7 commit a45cb6f

File tree

8 files changed

+9
-467
lines changed

8 files changed

+9
-467
lines changed

‎packages/@headlessui-react/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
5353
- Deprecate the `entered` prop on the `Transition` component ([#3089](https://github.com/tailwindlabs/headlessui/pull/3089))
5454
- Deprecate dot notation for components ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887), [#3170](https://github.com/tailwindlabs/headlessui/pull/3170))
5555
- Add frozen value to `ComboboxOptions` component ([#3126](https://github.com/tailwindlabs/headlessui/pull/3126))
56+
- Remove deprecated `DialogBackdrop` and `DialogOverlay` components ([#3171](https://github.com/tailwindlabs/headlessui/pull/3171))
5657

5758
## [1.7.19] - 2024-04-15
5859

‎packages/@headlessui-react/src/components/dialog-backdrop/dialog-backdrop.tsx‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/@headlessui-react/src/components/dialog-overlay/dialog-overlay.tsx‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/@headlessui-react/src/components/dialog/dialog.test.tsx‎

Lines changed: 5 additions & 269 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,11 @@ import {
66
assertActiveElement,
77
assertDialog,
88
assertDialogDescription,
9-
assertDialogOverlay,
109
assertDialogTitle,
1110
assertPopoverPanel,
1211
DialogState,
1312
getByText,
1413
getDialog,
15-
getDialogBackdrop,
16-
getDialogOverlay,
17-
getDialogOverlays,
1814
getDialogs,
1915
getPopoverButton,
2016
PopoverState,
@@ -46,9 +42,7 @@ function TabSentinel(props: PropsOf<'button'>) {
4642

4743
describe('Safe guards', () => {
4844
it.each([
49-
['Dialog.Overlay', Dialog.Overlay],
5045
['Dialog.Title', Dialog.Title],
51-
['Dialog.Backdrop', Dialog.Backdrop],
5246
['Dialog.Panel', Dialog.Panel],
5347
])(
5448
'should error when we are using a <%s /> without a parent <Dialog />',
@@ -66,7 +60,6 @@ describe('Safe guards', () => {
6660
render(
6761
<Dialog autoFocus={false} open={false} onClose={console.log}>
6862
<button>Trigger</button>
69-
<Dialog.Overlay />
7063
<Dialog.Title />
7164
<p>Contents</p>
7265
<Dialog.Description />
@@ -553,148 +546,6 @@ describe('Rendering', () => {
553546
)
554547
})
555548

556-
describe('Dialog.Overlay', () => {
557-
it(
558-
'should be possible to render Dialog.Overlay using a render prop',
559-
suppressConsoleLogs(async () => {
560-
let overlay = jest.fn().mockReturnValue(null)
561-
function Example() {
562-
let [isOpen, setIsOpen] = useState(false)
563-
return (
564-
<>
565-
<button id="trigger" onClick={() => setIsOpen((v) => !v)}>
566-
Trigger
567-
</button>
568-
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
569-
<Dialog.Overlay>{overlay}</Dialog.Overlay>
570-
<TabSentinel />
571-
</Dialog>
572-
</>
573-
)
574-
}
575-
576-
render(<Example />)
577-
578-
assertDialogOverlay({
579-
state: DialogState.InvisibleUnmounted,
580-
attributes: { id: 'headlessui-dialog-overlay-2' },
581-
})
582-
583-
await click(document.getElementById('trigger'))
584-
585-
assertDialogOverlay({
586-
state: DialogState.Visible,
587-
attributes: { id: 'headlessui-dialog-overlay-2' },
588-
})
589-
expect(overlay).toHaveBeenCalledWith({ open: true })
590-
})
591-
)
592-
})
593-
594-
describe('Dialog.Backdrop', () => {
595-
it(
596-
'should throw an error if a Dialog.Backdrop is used without a Dialog.Panel',
597-
suppressConsoleLogs(async () => {
598-
function Example() {
599-
let [isOpen, setIsOpen] = useState(false)
600-
return (
601-
<>
602-
<button id="trigger" onClick={() => setIsOpen((v) => !v)}>
603-
Trigger
604-
</button>
605-
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
606-
<Dialog.Backdrop />
607-
<TabSentinel />
608-
</Dialog>
609-
</>
610-
)
611-
}
612-
613-
render(<Example />)
614-
615-
try {
616-
await click(document.getElementById('trigger'))
617-
618-
expect(true).toBe(false)
619-
} catch (e: unknown) {
620-
expect((e as Error).message).toBe(
621-
'A <Dialog.Backdrop /> component is being used, but a <Dialog.Panel /> component is missing.'
622-
)
623-
}
624-
})
625-
)
626-
627-
it(
628-
'should not throw an error if a Dialog.Backdrop is used with a Dialog.Panel',
629-
suppressConsoleLogs(async () => {
630-
function Example() {
631-
let [isOpen, setIsOpen] = useState(false)
632-
return (
633-
<>
634-
<button id="trigger" onClick={() => setIsOpen((v) => !v)}>
635-
Trigger
636-
</button>
637-
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
638-
<Dialog.Backdrop />
639-
<Dialog.Panel>
640-
<TabSentinel />
641-
</Dialog.Panel>
642-
</Dialog>
643-
</>
644-
)
645-
}
646-
647-
render(<Example />)
648-
649-
await click(document.getElementById('trigger'))
650-
})
651-
)
652-
653-
it(
654-
'should portal the Dialog.Backdrop',
655-
suppressConsoleLogs(async () => {
656-
function Example() {
657-
let [isOpen, setIsOpen] = useState(false)
658-
return (
659-
<>
660-
<button id="trigger" onClick={() => setIsOpen((v) => !v)}>
661-
Trigger
662-
</button>
663-
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
664-
<Dialog.Backdrop />
665-
<Dialog.Panel>
666-
<TabSentinel />
667-
</Dialog.Panel>
668-
</Dialog>
669-
</>
670-
)
671-
}
672-
673-
render(<Example />)
674-
675-
await click(document.getElementById('trigger'))
676-
677-
let dialog = getDialog()
678-
let backdrop = getDialogBackdrop()
679-
680-
expect(dialog).not.toBe(null)
681-
dialog = dialog as HTMLElement
682-
683-
expect(backdrop).not.toBe(null)
684-
backdrop = backdrop as HTMLElement
685-
686-
// It should not be nested
687-
let position = dialog.compareDocumentPosition(backdrop)
688-
expect(position & Node.DOCUMENT_POSITION_CONTAINED_BY).not.toBe(
689-
Node.DOCUMENT_POSITION_CONTAINED_BY
690-
)
691-
692-
// It should be a sibling
693-
expect(position & Node.DOCUMENT_POSITION_FOLLOWING).toBe(Node.DOCUMENT_POSITION_FOLLOWING)
694-
})
695-
)
696-
})
697-
698549
describe('Dialog.Title', () => {
699550
it(
700551
'should be possible to render Dialog.Title using a render prop',
@@ -1134,76 +985,6 @@ describe('Keyboard interactions', () => {
1134985
})
1135986

1136987
describe('Mouse interactions', () => {
1137-
it(
1138-
'should be possible to close a Dialog using a click on the Dialog.Overlay',
1139-
suppressConsoleLogs(async () => {
1140-
function Example() {
1141-
let [isOpen, setIsOpen] = useState(false)
1142-
return (
1143-
<>
1144-
<button id="trigger" onClick={() => setIsOpen((v) => !v)}>
1145-
Trigger
1146-
</button>
1147-
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
1148-
<Dialog.Overlay />
1149-
Contents
1150-
<TabSentinel />
1151-
</Dialog>
1152-
</>
1153-
)
1154-
}
1155-
render(<Example />)
1156-
1157-
// Open dialog
1158-
await click(document.getElementById('trigger'))
1159-
1160-
// Verify it is open
1161-
assertDialog({ state: DialogState.Visible })
1162-
1163-
// Click to close
1164-
await click(getDialogOverlay())
1165-
1166-
// Verify it is closed
1167-
assertDialog({ state: DialogState.InvisibleUnmounted })
1168-
})
1169-
)
1170-
1171-
it(
1172-
'should not close the Dialog when clicking on contents of the Dialog.Overlay',
1173-
suppressConsoleLogs(async () => {
1174-
function Example() {
1175-
let [isOpen, setIsOpen] = useState(false)
1176-
return (
1177-
<>
1178-
<button id="trigger" onClick={() => setIsOpen((v) => !v)}>
1179-
Trigger
1180-
</button>
1181-
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
1182-
<Dialog.Overlay>
1183-
<button>hi</button>
1184-
</Dialog.Overlay>
1185-
Contents
1186-
<TabSentinel />
1187-
</Dialog>
1188-
</>
1189-
)
1190-
}
1191-
render(<Example />)
1192-
1193-
// Open dialog
1194-
await click(document.getElementById('trigger'))
1195-
1196-
// Verify it is open
1197-
assertDialog({ state: DialogState.Visible })
1198-
1199-
// Click on an element inside the overlay
1200-
await click(getByText('hi'))
1201-
1202-
// Verify it is still open
1203-
assertDialog({ state: DialogState.Visible })
1204-
})
1205-
)
1206-
1207988
it(
1208989
'should be possible to close the dialog, and re-focus the button when we click outside on the body element',
1209990
suppressConsoleLogs(async () => {
@@ -1273,44 +1054,6 @@ describe('Mouse interactions', () => {
12731054
})
12741055
)
12751056

1276-
it(
1277-
'should stop propagating click events when clicking on the Dialog.Overlay',
1278-
suppressConsoleLogs(async () => {
1279-
let wrapperFn = jest.fn()
1280-
function Example() {
1281-
let [isOpen, setIsOpen] = useState(true)
1282-
return (
1283-
<div onClick={wrapperFn}>
1284-
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
1285-
Contents
1286-
<Dialog.Overlay />
1287-
<TabSentinel />
1288-
</Dialog>
1289-
</div>
1290-
)
1291-
}
1292-
1293-
render(<Example />)
1294-
1295-
await nextFrame()
1296-
1297-
// Verify it is open
1298-
assertDialog({ state: DialogState.Visible })
1299-
1300-
// Verify that the wrapper function has not been called yet
1301-
expect(wrapperFn).toHaveBeenCalledTimes(0)
1302-
1303-
// Click the Dialog.Overlay to close the Dialog
1304-
await click(getDialogOverlay())
1305-
1306-
// Verify it is closed
1307-
assertDialog({ state: DialogState.InvisibleUnmounted })
1308-
1309-
// Verify that the wrapper function has not been called yet
1310-
expect(wrapperFn).toHaveBeenCalledTimes(0)
1311-
})
1312-
)
1313-
13141057
it(
13151058
'should be possible to submit a form inside a Dialog',
13161059
suppressConsoleLogs(async () => {
@@ -1667,7 +1410,6 @@ describe('Mouse interactions', () => {
16671410
Trigger
16681411
</button>
16691412
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
1670-
<Dialog.Backdrop />
16711413
<Dialog.Panel>
16721414
<TabSentinel />
16731415
</Dialog.Panel>
@@ -1700,7 +1442,6 @@ describe('Mouse interactions', () => {
17001442
Trigger
17011443
</button>
17021444
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
1703-
<Dialog.Backdrop />
17041445
<Dialog.Panel>
17051446
<button id="inside">Inside</button>
17061447
<TabSentinel />
@@ -1733,7 +1474,6 @@ describe('Mouse interactions', () => {
17331474
Trigger
17341475
</button>
17351476
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
1736-
<Dialog.Backdrop />
17371477
<Dialog.Panel>
17381478
<button id="inside">Inside</button>
17391479
<TabSentinel />
@@ -1767,7 +1507,6 @@ describe('Mouse interactions', () => {
17671507
</button>
17681508
<div id="i-am-outside">this thing</div>
17691509
<Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
1770-
<Dialog.Backdrop />
17711510
<Dialog.Panel>
17721511
<button id="inside">Inside</button>
17731512
<TabSentinel />
@@ -1816,8 +1555,6 @@ describe('Nesting', () => {
18161555

18171556
return (
18181557
<Dialog autoFocus={false} open={open} onClose={onClose}>
1819-
<Dialog.Overlay />
1820-
18211558
<div>
18221559
<p>Level: {level}</p>
18231560
<button onClick={() => setShowChild(true)}>Open {level + 1} a</button>
@@ -1850,12 +1587,11 @@ describe('Nesting', () => {
18501587
}
18511588

18521589
it.each`
1853-
strategy | when | action
1854-
${'with `Escape`'} | ${'mounted'} | ${() => press(Keys.Escape)}
1855-
${'with `Outside Click`'} | ${'mounted'} | ${() => click(document.body)}
1856-
${'with `Click on Dialog.Overlay`'} | ${'mounted'} | ${() => click(getDialogOverlays().pop()!)}
1857-
${'with `Escape`'} | ${'always'} | ${() => press(Keys.Escape)}
1858-
${'with `Outside Click`'} | ${'always'} | ${() => click(document.body)}
1590+
strategy | when | action
1591+
${'with `Escape`'} | ${'mounted'} | ${() => press(Keys.Escape)}
1592+
${'with `Outside Click`'} | ${'mounted'} | ${() => click(document.body)}
1593+
${'with `Escape`'} | ${'always'} | ${() => press(Keys.Escape)}
1594+
${'with `Outside Click`'} | ${'always'} | ${() => click(document.body)}
18591595
`(
18601596
'should be possible to open nested Dialog components (visible when $when) and close them $strategy',
18611597
async ({ when, action }) => {

0 commit comments

Comments
 (0)