Add transition prop to <Dialog /> component

[RobinMalfait]

This PR adds a transition prop to the <Dialog /> component. Internally it uses the <Transition /> and <TransitionChild /> components to coordinate the transitions.

The <Dialog /> itself will be wrapped in a <Transition />, the <DialogPanel /> will be wrapped in a <TransitionChild />, and to make the backdrop transition happen we re-introduced the <DialogBackdrop /> component which is a div wrapped in a <TransitionChild />.

Recently we introduced data-* attribute based transitions (#3273) to simplify transitions. This also introduced the transition prop on components such as:

• ComboboxOptions
• DisclosurePanel
• ListboxOptions
• MenuItems
• PopoverPanel

This PR now also adds it to the <Dialog /> component. This is what a migration could look like:

<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>

↓↓↓↓↓ Converted to use data-* attributes

<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>

↓↓↓↓↓ Using the new transition prop

<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>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 20, 2024 3:31pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 20, 2024 3:31pm