-
Notifications
You must be signed in to change notification settings - Fork 159
feat(overlay) use popover in overlay service #16835
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
base: master
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR modernizes the overlay service by adopting the native Popover API to manage element layering, replacing the traditional z-index approach. The implementation adds the popover="manual" attribute to overlay wrapper elements and uses showPopover()/hidePopover() methods to control visibility in the browser's top layer.
Changes:
- Added Popover API integration with
showPopover()call before positioning andhidePopover()during cleanup - Removed z-index styling in favor of browser-managed top layer positioning
- Added comprehensive style overrides to reset browser default popover styles while maintaining custom overlay positioning
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| projects/igniteui-angular/core/src/services/overlay/overlay.ts | Implements Popover API calls in show/hide logic with proper error handling and browser compatibility checks |
| projects/igniteui-angular/core/src/core/styles/components/overlay/_overlay-theme.scss | Removes z-index properties and adds popover attribute styles to override browser defaults |
Use
popoverglobal attribute to show the overlay. We are adding the attribute to overlay wrapper element and show the overlay by callingshowPopover.Closes #16824
Additional information (check all that apply):
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)