Skip to content

Commit 965a335

Browse files
RobinMalfaitRobinMalfait
committed
update playgrounds to reflect tag change
1 parent c2215f7 commit 965a335

File tree

16 files changed

+29
-22
lines changed

16 files changed

+29
-22
lines changed

‎playgrounds/react/pages/dialog/dialog-scroll-issue.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { Dialog, Transition } from '@headlessui/react'
2-
import { Fragment, useState } from 'react'
2+
import { useState } from 'react'
33

44
function MyDialog({ open, close }) {
55
return (
66
<>
7-
<Transition show={open} as={Fragment}>
7+
<Transition show={open}>
88
<Dialog onClose={close} className="relative z-50">
99
<Transition.Child
10-
as={Fragment}
1110
enter="transition duration-500 ease-out"
1211
enterFrom="opacity-0"
1312
enterTo="opacity-100"

‎playgrounds/react/pages/dialog/dialog.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Dialog, Menu, Portal, Transition } from '@headlessui/react'
2-
import { Fragment, useState } from 'react'
2+
import { useState } from 'react'
33
import Flatpickr from 'react-flatpickr'
44
import { Button } from '../../components/button'
55
import { classNames } from '../../utils/class-names'
@@ -64,7 +64,6 @@ export default function Home() {
6464
<Transition
6565
data-debug="Dialog"
6666
show={isOpen}
67-
as={Fragment}
6867
beforeEnter={() => console.log('[Transition] Before enter')}
6968
afterEnter={() => console.log('[Transition] After enter')}
7069
beforeLeave={() => console.log('[Transition] Before leave')}
@@ -79,7 +78,6 @@ export default function Home() {
7978
<div className="fixed inset-0 z-10 overflow-y-auto">
8079
<div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
8180
<Transition.Child
82-
as={Fragment}
8381
enter="ease-out duration-300"
8482
enterFrom="opacity-0"
8583
enterTo="opacity-75"

‎playgrounds/react/pages/dialog/scrollable-dialog.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Dialog, Transition } from '@headlessui/react'
22
import { ExclamationIcon } from '@heroicons/react/outline'
3-
import { Fragment, useRef, useState } from 'react'
3+
import { useRef, useState } from 'react'
44

55
export default function Example() {
66
const [open, setOpen] = useState(false)
@@ -18,10 +18,9 @@ export default function Example() {
1818
Open Dialog
1919
</button>
2020
</div>
21-
<Transition.Root show={open} as={Fragment}>
21+
<Transition.Root show={open}>
2222
<Dialog as="div" className="relative z-10" initialFocus={cancelButtonRef} onClose={setOpen}>
2323
<Transition.Child
24-
as={Fragment}
2524
enter="ease-out duration-300"
2625
enterFrom="opacity-0"
2726
enterTo="opacity-100"
@@ -35,7 +34,6 @@ export default function Example() {
3534
<div className="fixed inset-0 z-10 overflow-y-auto">
3635
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
3736
<Transition.Child
38-
as={Fragment}
3937
enter="ease-out duration-300"
4038
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
4139
enterTo="opacity-100 translate-y-0 sm:scale-100"

‎playgrounds/react/pages/dialog/scrollable-page-with-dialog.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Dialog, Transition } from '@headlessui/react'
2-
import { Fragment, useState } from 'react'
2+
import { useState } from 'react'
33

44
export default function Home() {
55
let [isOpen, setIsOpen] = useState(false)
@@ -37,7 +37,6 @@ export default function Home() {
3737
<Transition
3838
data-debug="Dialog"
3939
show={isOpen}
40-
as={Fragment}
4140
beforeEnter={() => console.log('[Transition] Before enter')}
4241
afterEnter={() => console.log('[Transition] After enter')}
4342
beforeLeave={() => console.log('[Transition] Before leave')}
@@ -52,7 +51,6 @@ export default function Home() {
5251
<div className="fixed inset-0 z-10 overflow-y-auto">
5352
<div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
5453
<Transition.Child
55-
as={Fragment}
5654
enter="ease-out duration-300"
5755
enterFrom="opacity-0"
5856
enterTo="opacity-75"
@@ -69,6 +67,7 @@ export default function Home() {
6967
</Transition.Child>
7068

7169
<Transition.Child
70+
as="div"
7271
enter="ease-out transform duration-300"
7372
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
7473
enterTo="opacity-100 translate-y-0 sm:scale-100"

‎playgrounds/react/pages/listbox/listbox-with-pure-tailwind.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Listbox, Transition } from '@headlessui/react'
2-
import { Fragment, useEffect, useState } from 'react'
2+
import { useEffect, useState } from 'react'
33

44
let people = [
55
'Wade Cooper',
@@ -60,7 +60,6 @@ export default function Home() {
6060
</span>
6161

6262
<Transition
63-
as={Fragment}
6463
enter="transition duration-500 ease-out"
6564
enterFrom="transform scale-95 opacity-0"
6665
enterTo="transform scale-100 opacity-100"

‎playgrounds/react/pages/menu/menu-with-transition.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Menu, Transition } from '@headlessui/react'
2-
import { Fragment } from 'react'
32
import { Button } from '../../components/button'
43
import { classNames } from '../../utils/class-names'
54

@@ -30,7 +29,6 @@ export default function Home() {
3029
</span>
3130

3231
<Transition
33-
as={Fragment}
3432
enter="transition duration-500 ease-out"
3533
enterFrom="transform scale-95 opacity-0"
3634
enterTo="transform scale-100 opacity-100"

‎playgrounds/react/pages/popover/popover.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Popover, Portal, Transition } from '@headlessui/react'
2-
import React, { Fragment, forwardRef } from 'react'
2+
import React, { forwardRef } from 'react'
33
import { usePopper } from '../../utils/hooks/use-popper'
44

55
let Button = forwardRef(
@@ -33,7 +33,6 @@ export default function Home() {
3333
<Popover.Group as="nav" aria-label="Mythical University" className="flex space-x-3">
3434
<Popover as="div" className="relative">
3535
<Transition
36-
as={Fragment}
3736
enter="transition ease-out duration-300 transform"
3837
enterFrom="opacity-0"
3938
enterTo="opacity-100"

‎playgrounds/react/pages/transitions/appear.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export default function AppearExample() {
1818
<span className="mb-2">Initial render</span>
1919
<div className="grid max-w-6xl grid-cols-4 gap-4">
2020
<Transition
21+
as="div"
2122
show={show}
2223
appear={true}
2324
unmount={true}
@@ -50,6 +51,7 @@ export default function AppearExample() {
5051
</Transition>
5152

5253
<Transition
54+
as="div"
5355
show={show}
5456
appear={false}
5557
unmount={true}
@@ -82,6 +84,7 @@ export default function AppearExample() {
8284
</Transition>
8385

8486
<Transition
87+
as="div"
8588
show={show}
8689
appear={true}
8790
unmount={false}
@@ -114,6 +117,7 @@ export default function AppearExample() {
114117
</Transition>
115118

116119
<Transition
120+
as="div"
117121
show={show}
118122
appear={false}
119123
unmount={false}
@@ -152,6 +156,7 @@ export default function AppearExample() {
152156
<span className="mb-2">Not on the initial render</span>
153157
<div className="grid max-w-6xl grid-cols-4 gap-4">
154158
<Transition
159+
as="div"
155160
show={show}
156161
appear={true}
157162
unmount={true}
@@ -184,6 +189,7 @@ export default function AppearExample() {
184189
</Transition>
185190

186191
<Transition
192+
as="div"
187193
show={show}
188194
appear={false}
189195
unmount={true}
@@ -216,6 +222,7 @@ export default function AppearExample() {
216222
</Transition>
217223

218224
<Transition
225+
as="div"
219226
show={show}
220227
appear={true}
221228
unmount={false}
@@ -248,6 +255,7 @@ export default function AppearExample() {
248255
</Transition>
249256

250257
<Transition
258+
as="div"
251259
show={show}
252260
appear={false}
253261
unmount={false}

‎playgrounds/react/pages/transitions/component-examples/dropdown.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ function Dropdown() {
4444
</div>
4545

4646
<Transition
47+
as="div"
4748
show={isOpen}
4849
enter="transition ease-out duration-75"
4950
enterFrom="transform opacity-0 scale-95"

‎playgrounds/react/pages/transitions/component-examples/modal.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export default function Home() {
4141
</div>
4242

4343
<Transition
44+
as="div"
4445
show={isOpen}
4546
className="fixed inset-0 z-10 overflow-y-auto"
4647
beforeEnter={() => {
@@ -78,6 +79,7 @@ export default function Home() {
7879
{/* This element is to trick the browser into centering the modal contents. */}
7980
<span className="hidden sm:inline-block sm:h-screen sm:align-middle"></span>&#8203;
8081
<Transition.Child
82+
as="div"
8183
className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle"
8284
role="dialog"
8385
aria-modal="true"

0 commit comments

Comments
 (0)