-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add `transition` prop to `Dialog`
Internally this will make sure that the `Dialog` itself gets wrapped in a `<Transition />` component.
Next, the `<DialogPanel>` will also be wrapped in a `<TransitionChild />` component.
We also re-introduce the `DialogBackdrop` that will also be wrapped in a
`<TransitionChild />` component based on the `transition` prop of the
`Dialog`.
This simplifies the `<Dialog />` component, especially now that we can
use transitions with data attributes.
E.g.:
```tsx
<Transition show={open}>
<Dialog onClose={setOpen}>
<TransitionChild
enter="ease-in-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div />
</TransitionChild>
<TransitionChild
enter="ease-in-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in-out duration-300"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<DialogPanel>
{/* … */}
</DialogPanel>
</TransitionChild>
</Dialog>
</Transition>
```
↓↓↓↓↓
```tsx
<Transition show={open}>
<Dialog onClose={setOpen}>
<TransitionChild>
<div className="ease-in-out duration-300 data-[closed]:opacity-0 data-[closed]:scale-95" />
</TransitionChild>
<TransitionChild>
<DialogPanel className="ease-in-out duration-300 data-[closed]:opacity-0 data-[closed]:scale-95 bg-white">
{/* … */}
</DialogPanel>
</TransitionChild>
</Dialog>
</Transition>
```
↓↓↓↓↓
```tsx
<Dialog transition open={open} onClose={setOpen}>
<DialogBackdrop className="ease-in-out duration-300 data-[closed]:opacity-0 data-[closed]:scale-95" />
<DialogPanel className="ease-in-out duration-300 data-[closed]:opacity-0 data-[closed]:scale-95 bg-white">
{/* … */}
</DialogPanel>
</Dialog>
```
* update test now that we expose `DialogBackdrop`
* add built-in `<Dialog transition />` playground example
* update changelog- Loading branch information
1 parent
1c3f9a6
commit cf0c535
Showing
4 changed files
with
131 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
playgrounds/react/pages/dialog/dialog-built-in-transition.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react' | ||
| import { useState } from 'react' | ||
| import { Button } from '../../components/button' | ||
| import { classNames } from '../../utils/class-names' | ||
|
|
||
| export default function Home() { | ||
| let [isOpen, setIsOpen] = useState(false) | ||
| let [transition, setTransition] = useState(true) | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="flex gap-4 p-12"> | ||
| <Button onClick={() => setIsOpen((v) => !v)}>Toggle!</Button> | ||
| <Button onClick={() => setTransition((v) => !v)}> | ||
| <span>Toggle transition</span> | ||
| <span | ||
| className={classNames( | ||
| 'ml-2 inline-flex size-4 rounded-md', | ||
| transition ? 'bg-green-500' : 'bg-red-500' | ||
| )} | ||
| ></span> | ||
| </Button> | ||
| </div> | ||
|
|
||
| <Dialog | ||
| open={isOpen} | ||
| transition={transition} | ||
| onClose={() => setIsOpen(false)} | ||
| className="relative z-50" | ||
| > | ||
| <DialogBackdrop className="fixed inset-0 bg-black/30 duration-500 ease-out data-[closed]:opacity-0" /> | ||
| <div className="fixed inset-0 flex w-screen items-center justify-center p-4"> | ||
| <DialogPanel className="w-full max-w-lg space-y-4 bg-white p-12 duration-500 ease-out data-[closed]:scale-95 data-[closed]:opacity-0"> | ||
| <h1 className="text-2xl font-bold">Dialog</h1> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar, nunc nec | ||
| vehicula fermentum, nunc sapien tristique ipsum, nec facilisis dolor sapien non dui. | ||
| Nullam vel sapien ultrices, lacinia felis sit amet, fermentum odio. Nullam vel sapien | ||
| ultrices, lacinia felis sit amet, fermentum odio. | ||
| </p> | ||
| <Button onClick={() => setIsOpen(false)}>Close</Button> | ||
| </DialogPanel> | ||
| </div> | ||
| </Dialog> | ||
| </> | ||
| ) | ||
| } |