feat(OverlayProvider): support stacking #4360
Conversation
benjamincanac
changed the title
There was a problem hiding this comment.
Thanks @Barbapapazes! Should we add an example to the docs as well?
Co-authored-by: Benjamin Canac <[email protected]>
Yes, I can add one! |
commit: |
done! (with additional refinement like preventing multiple overlays when using see https://x.com/soubiran_/status/1934965903566798972 and replies with @HugoRCD |
| <template> | ||
| <UModal | ||
| title="A Modal" | ||
| :ui="{ footer: 'justify-end', content: 'data-[state=open]:animate-[light-slide-in-from-bottom_600ms_ease-out] data-[state=closed]:animate-[light-slide-out-to-bottom_600ms_ease-in]' }" |
There was a problem hiding this comment.
Wouldn't it be better to provide a real case example here?
There was a problem hiding this comment.
I change the timing to 200 to have something more realistic.
docs/content/3.components/modal.md
Outdated
|
|
||
| ```ts | ||
| { | ||
| overlay: { |
There was a problem hiding this comment.
Instead of adding all of this manually, why not add a stacked prop to the OverlayProvider component? 🤔
There was a problem hiding this comment.
with a theme overlay-provider to allow customization?
There was a problem hiding this comment.
Yes, kinda like Toaster.vue I guess! What do you think?
There was a problem hiding this comment.
Yes seems to be a better way
Barbapapazes
force-pushed
the
feat/support-overlay-stacking
branch
from
de9f13a to
82e615f
Compare
| @@ -32,3 +32,28 @@ html[data-module="ui-pro"] .ui-only, | |||
| html[data-module="ui"] .ui-pro-only { | |||
| display: none; | |||
| } | |||
|
|
|||
| /* For better modals stacking visual experience */ | |||
There was a problem hiding this comment.
What happens by default if we don't specify these? Just an idea but maybe we could add a stacked prop to the UModal component as well to use those animations (which would be defined inside keyframe.css)?
There was a problem hiding this comment.
by default, it uses the animation scale-in which does not looks really great. but I agree that we can add a new props to modal with a new animation (that looks better in that specific case).
🔗 Linked issue
❓ Type of change
📚 Description
Hello 👋,
This PR introduces two variables on the dynamic component in the OverlayProvider component in order to allow clean modal stacking.
Related to https://soubiran.dev/posts/a-journey-to-craft-interactive-ui-experiences-with-dialogs
📝 Checklist