Improve disclosure component for state creating content, add options to control a transition's initial and after-end classes #862
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
This PR changes the headless disclosure to only render its panel's content once and then show/hide it based on styling. Currently, the panel's content is rendered every time the disclosure is opened/closed.
Warning
In order to achieve this, the headless component no longer controls the panel's visibility. All styling is now solely done by the implementor of a headless discloure and needs to be adjusted accordingly. Thus, the changes introduced in this PR are api breaking!
Additionally, the
transition
function forFlow
-based transitions has been extended to allow optional control over initial classes and classes that should be present after the leave-transition has ended. This is useful to allow transitions on an element's visibility which are normally not possible using pure CSS.Disclosure
As mentioned earlier, the headless disclosure no longer creates a mount-point for its panel to re-render based on the open-state. Instead, it now only provides the state and leaves the styling to the implementor.
This is necessary due to multiple reasons:
Migration
In order to migrate an existing disclosure component, styling information for the opened/closed states must be provided.
Find different migration scenarios below.
Note
All examples below are using Tailwind CSS. However, you are free to use any CSS framework, or even plain CSS, as well.
1) The disclosure to migrate does not use transitions
In this case, the appropriate styling for the opened/closed states needs to be added. No existing styles have to be adjusted.
This can be as easy as simply providing basic styles via the
className
function.Before:
disclosurePanel { // some content }
After:
2) The existing disclosure makes use of transitions
In this case, the existing
transition
call needs to be adjusted in order to provide visible/hidden classes. As mentioned in the beginning, this function has been adjusted accordingly.Before:
After:
Closes #754