Skip to content

feat(OverlayProvider): support stacking #4360

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

Open
wants to merge 9 commits into
base: v3
Choose a base branch
from

Conversation

Barbapapazes
Copy link
Contributor

🔗 Linked issue

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to 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

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.
Siteproxy

Verified

This commit was signed with the committer’s verified signature.
Barbapapazes Estéban
@benjamincanac benjamincanac changed the title feat(Overlay): support stacking feat(OverlayProvider): support stacking Jun 16, 2025

Verified

This commit was signed with the committer’s verified signature.
Barbapapazes Estéban
Copy link
Member

@benjamincanac benjamincanac left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @Barbapapazes! Should we add an example to the docs as well?

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
@Barbapapazes
Copy link
Contributor Author

Thanks @Barbapapazes! Should we add an example to the docs as well?

Yes, I can add one!

Copy link

pkg-pr-new bot commented Jun 17, 2025

npm i https://pkg.pr.new/@nuxt/ui@4360

commit: 55cfbdc

Verified

This commit was signed with the committer’s verified signature.
Barbapapazes Estéban
@Barbapapazes
Copy link
Contributor Author

Thanks @Barbapapazes! Should we add an example to the docs as well?

done! (with additional refinement like preventing multiple overlays when using useOverlay)

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]' }"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't it be better to provide a real case example here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I change the timing to 200 to have something more realistic.


```ts
{
overlay: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of adding all of this manually, why not add a stacked prop to the OverlayProvider component? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

with a theme overlay-provider to allow customization?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, kinda like Toaster.vue I guess! What do you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes seems to be a better way

Verified

This commit was signed with the committer’s verified signature.
Barbapapazes Estéban

Verified

This commit was signed with the committer’s verified signature.
Barbapapazes Estéban
@Barbapapazes Barbapapazes force-pushed the feat/support-overlay-stacking branch from de9f13a to 82e615f Compare June 17, 2025 18:32
@@ -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 */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)?

Copy link
Contributor Author

@Barbapapazes Barbapapazes Jun 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@benjamincanac
Copy link
Member

@Barbapapazes Are you done on this or maybe do you want me to take over to finish the animation?

Verified

This commit was signed with the committer’s verified signature.
Barbapapazes Estéban

Verified

This commit was signed with the committer’s verified signature.
Barbapapazes Estéban
@Barbapapazes
Copy link
Contributor Author

@Barbapapazes Are you done on this or maybe do you want me to take over to finish the animation?

Yes, I'm done! 👌

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.

None yet

3 participants