Add `transition` prop to `DialogPanel` and `DialogBackdrop` components

[RobinMalfait]

This PR is a continuation of #3307

In #3307 we introduced the transition prop on the Dialog component. But to make the API more consistent with the other components we want to be explicit and add the transition prop to the elements where the data attributes are being used.

This means that instead of enabling it on the Dialog directly, you add the transition prop to the individual components:

<Dialog open={open} onClose={setOpen}>
  <DialogBackdrop transition className="ease-in-out duration-300 data-[closed]:opacity-0 data-[closed]:scale-95" />

  <DialogPanel transition className="ease-in-out duration-300 data-[closed]:opacity-0 data-[closed]:scale-95 bg-white">
    {/* … */}
  </DialogPanel>
</Dialog>

It's only needed on the Dialog component directly if you also want to transition this component.

[vercel[bot]]

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 10:37pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 20, 2024 10:37pm