Popover Overlay

[createwithjames]

Description

In Nuxt UI v2, the Popover component included an overlay option, allowing developers to add a backdrop behind the popover when opened. However, this functionality is missing in v3.

Adding overlay support would improve usability by preventing interactions with the background content and providing a nice user experience in scenarios where the popover is used as a modal-like element.

Expected Behaviour

• A new overlay prop (boolean) should be available in the Popover component.
• When overlay is true, a semi-transparent backdrop should be rendered behind the popover.
• Clicking the overlay should close the popover (unless dismissible is false).

Use Case

• Prevent background interactions when the popover is active.
• Improve accessibility by visually separating the popover from background content.
• Maintain consistency with Nuxt UI v2 functionality.

Current Workaround

Developers currently have to manually add an overlay element and handle its behaviour separately, which is less efficient and inconsistent with other Nuxt UI components that support overlays.

Proposed Solution

Reintroduce the overlay functionality from v2, ensuring it aligns with the new architecture in v3.

Would be great to get feedback on whether this aligns with the roadmap for v3. Thanks!

FYI - I also have a branch that's pretty much ready for PR

Additional context

No response

[benjamincanac]

There is no overlay at the moment but you can use the modal prop to prevent interactions with the background: https://ui.nuxt.com/components/popover#props

[createwithjames]

Thanks for the clarification! I had a go at implementing the overlay enhancement myself and have a branch ready for review. Since this is my first time contributing to open source, I’d really appreciate some guidance on the right process for submitting this.

Would you be able to point me to the best place to open a PR and any specific contribution guidelines I should follow? Looking forward to your feedback!

[HugoRCD]

@createwithjames https://ui.nuxt.com/getting-started/contribution