Cross library popover issue

[bbogdanov]

Hi guys, since the issue I'm presenting is combination of Clarity Core and Clarity Angular I'm assuming here is a good place for it but feel free to move it.

Describe the bug

The issue appears when we use a Clarity Core element that uses CdsInternalStaticOverlay and a Clarity Angular component that uses ClrPopover.

In a nutshell the Core overlay has a bigger z-index and that reflects in Clarity Angular popover to go underneath Core overlay or not be visible while a Core overlay is presented on the screen (when overlay is fullscreen).

I discover this while using a cds-modal with a clr-combobox.

Here are two repros for v13.13.0 and v15.0.0.rc-1:

• https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-ng14-7ev9xs?file=src%2Fstyles.scss (v15)
• https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-ng14-daqs6u?file=src%2Fstyles.scss (v13)

How to reproduce

Steps to reproduce the behavior:

1. Use one of the links provided above
2. When the page loads, expand the application screen until you see the cds-modal in the middle of the app
3. Click the combobox inside the modal
4. Observe how the combobox options are going underneath the modal

Expected behavior

The overlays of the two libraries to be aligned and working a harmony whitout overlaping each other.

e.g. In the repros above the combobox options to be on top of the modal.

Versions

Clarity version:

• [x] v12.x
• [x] v13.x
• [x] v15.x

Additional notes

There should be some single point of truth of what the z-index value should be. For a short term updating the z-index in one of them could do the work but I suggest covering this up with some tests so we don't get into this again.

[Jinnie]

Thanks for reporting. We need to explore the possibility to reuse a common solution for our popovers. Whether it will be the one from Core, or a 3rd party one, we need to do some research first.