Callout needs z-layering fine tuning

[erjohnms]

Callout component doesn't allow for top level class name or fine tuning of its z-index. We have a layering situation where the callout of a background element appears on top of a modal dialog. It should be layered behind the modal dialog but on top of everything else and I don't see an easy way to control the z-ordering of this specific callout without impacting all callouts on the page.

I experimented with doNotLayer but that caused a lot of overflow issues and so didn't seem like a way to work around it.

I also don't want to mess with the z-layering of our modal dialog framework. So this is a feature request to give me a way to be able to specify a layer for this specific callout that places it in-between the two while still allowing callouts that belong to the dialog to appear on top of it.

Like this:

[micahgodbolt]

Yeah, doNotLayer controls weather the callout is placed into a 'Layer' component or just rendered directly into the DOM.

[vertonghenb]

Same issues with Fullscreen modes.

Example if you're using Fullscreen from "react-full-screen", the Tooltip, Contextmenu's etc everything that uses the Layer component are not shown since a fullscreen component requires the Z-index of 2147483647 (max) since the component are rendered outside the main div you'll have issues...

//No workaround (yet)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Fabric React!

[stale]

This issue has been automatically closed because it has not had recent activity after being marked as stale. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to Fabric React!
Why am I receiving this notification?