Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add transition prop to DialogPanel and DialogBackdrop components #3309

Merged
merged 15 commits into from
Jun 20, 2024

Conversation

RobinMalfait
Copy link
Member

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.

Copy link

vercel bot commented Jun 20, 2024

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

RobinMalfait and others added 15 commits June 21, 2024 00:35
This will allow us to reset the `OpenClosedProvider` and reset the
"boundary". This is important when we want to wrap a `Dialog` inside of
a `Transition` that exists in another component that is wrapped in a
transition itself.

This will be used in let's say a `DisclosurePanel`:

```tsx
<Disclosure>              // OpenClosedProvider
  <Transition>
    <DisclosurePanel>     // ResetOpenClosedProvider
      <Dialog />          // Can safely wrap `<Dialog />` in `<Transition />`
    </DisclosurePanel>
  </Transition>
</Disclosure>
```
This prop allows us to enabled / disable the `Transition` functionality.
E.g.: expose the underlying data attributes.

But it will still setup a `Transition` boundary for coordinating the
`TransitionChild` components.
+ add `transition` props to the `Dialog`, `DialogPanel` and `DialogBackdrop`

This will allow us individually control the transition on each element,
but also setup the transition boundary on the `Dialog` for coordination
purposes.
This technically means most or all of them can be removed from InternalDialog but we can do that later
I’m not 100% sure this is right but it seems like it might be given that `static` implies it’s always rendered.
Already validated by `Dialog` itself
The reason this test is flawed and why it's safe to delete it:

This test opened the dialog, then clicked on an element outside of the
dialog to close it and prove that we correctly focused that new element
instead of going to the button that opened the dialog in the first
place.

This test used to work before marked the rest of the page as `inert`.
Right now we mark the rest of the page as `inert`, so running this in a
real browser means that we can't click or focus an element outside of
the `dialog` simply because the rest of the page is inert.

The reason it fails all of a sudden is that the introduction of
`<Transition>` around the `<Dialog>` by default purely delays the
mounting just enough to record different elements to try and restore
focus to.

That said, this test clicked outside of a dialog and focused that
element which can't work in a real browser because the element can't be
interacted with at all.
@RobinMalfait RobinMalfait force-pushed the feat/transition-dialog-backdrop-and-panel branch from 393949d to deaf348 Compare June 20, 2024 22:36
@RobinMalfait RobinMalfait merged commit 07ba551 into main Jun 20, 2024
8 checks passed
@RobinMalfait RobinMalfait deleted the feat/transition-dialog-backdrop-and-panel branch June 20, 2024 22:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants