Implement sibling <Dialog /> components
#3242
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
RobinMalfait
force-pushed
the
feat/sibling-dialogs
branch
from
df01773
to
e8beb1a
Compare
RobinMalfait
force-pushed
the
feat/sibling-dialogs
branch
from
c472123
to
b2d4042
Compare
By making use of the new `useHierarchy` hook.
They are now replaced by the new `useHierarchy` hook.
This way we can scope the hierarchy inside of the `useOutsideClick` hook. This now ensures that we only enable the `useOutsideClick` on the top-most element (the one that last enabled it).
No need to setup focus feature flags and then disable it all again if demo mode is enabled.
|
|
thecrypticace
approved these changes
May 27, 2024
This is not necessary.
Because it might not be super obvious that we are going to close the `<Dialog />`.
This is necessary to make sure that a component like a `<MenuItems anchor />` is rendered inside of the `<Dialog />` and not as a sibling. While this all works from a functional perspective, if you rely on a CSS variable that was defined on the `<Dialog />` and you use it in the `<MenuItems />` then without this change it wouldn't work.
This was referenced May 27, 2024
|
Thhaaaaannkkkk yooouuuuuuu guys! 🎉 |
|
When this refactor will be applied to vue version? |
This was referenced Jul 27, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This PR refactors, restructures and simplifies some internal workings and as a side effect allows us to render "sibling dialogs" which has been a common request (and source of bugs) in the past.
The internals work by keeping track of a shared "stack", the moment an internal
useIsTopLayerhook is used (and enabled) it adds an item to the stack. The hook then returns whether it currently is the top layer or not.This allows us to render a
<Dialog />component from anywhere and the last one that is opened will be the top-most<Dialog />(inspired by the native top-layer).Pressing esc, or clicking outside of a
<Dialog />will close the top most one only regardless from where it was rendered.This new internal hook is also used in other components such as the
<Menu />component. If you render a<Menu />in a<Dialog />, then pressing esc only closes the<Menu />. Pressing esc again closes the<Dialog />. (This behavior already worked, but it now Just Works™ because of this)This should not break any existing code where
<Dialog />components are nested because the inner one will be rendered after the outer one which makes it the top one.Fixes: #2876