Commits on Jun 20, 2024

1. 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>
   ```

   

   RobinMalfait committed Jun 20, 2024
   Configuration menu

   • View commit details
   • Copy full SHA for 275c3cb
   • Browse repository at this point

   Copy the full SHA

   275c3cb View commit details

   Browse the repository at this point in the history

2. update test now that we expose DialogBackdrop

   

   RobinMalfait committed Jun 20, 2024
   Configuration menu

   • View commit details
   • Copy full SHA for 95247d4
   • Browse repository at this point

   Copy the full SHA

   95247d4 View commit details

   Browse the repository at this point in the history

3. add built-in <Dialog transition /> playground example

   

   RobinMalfait committed Jun 20, 2024
   Configuration menu

   • View commit details
   • Copy full SHA for 02029f0
   • Browse repository at this point

   Copy the full SHA

   02029f0 View commit details

   Browse the repository at this point in the history

4. update changelog

   

   RobinMalfait committed Jun 20, 2024
   Configuration menu

   • View commit details
   • Copy full SHA for ddd0a71
   • Browse repository at this point

   Copy the full SHA

   ddd0a71 View commit details

   Browse the repository at this point in the history