Change default tag from div to Fragment on Transition components

[RobinMalfait]

This PR changes the default tag for the Transition, TransitionRoot, and TransitionChild components from div to Fragment.

The rational behind this change is that the Transition component is a component that "configures" the transition of its children but it was rendering its own div instead. If you want to transition the component you are wrapping, you required as={Fragment}. In practice this tends to be what happens most often.

Especially, now in Headless UI v2, a lot of components like Dialog, PopoverPanel, ListboxOptions, ComboboxOptions and MenuItems are portalled to a different place in the DOM. This means that the Transition is happening on a div with no children.

Before:

<Transition
  show={isOpen}
  className="bg-white rounded-lg"
  enter="transition duration-200 ease-out"
  enterFrom="scale-95 opacity-0"
  enterTo="scale-100 opacity-100"
  leave="transition duration-300 ease-out"
  leaveFrom="scale-100 opacity-100"
  leaveTo="scale-95 opacity-0"
>
  {/* ... */}
</Transition>

With this change:

  <Transition
    show={isOpen}
-   className="bg-white rounded-lg"
    enter="transition duration-200 ease-out"
    enterFrom="scale-95 opacity-0"
    enterTo="scale-100 opacity-100"
    leave="transition duration-300 ease-out"
    leaveFrom="scale-100 opacity-100"
    leaveTo="scale-95 opacity-0"
  >
+   <div className="bg-white rounded-lg">
      {/* ... */}
+   </div>
  </Transition>

[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	Apr 19, 2024 2:12pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 19, 2024 2:12pm