more control over z-index with modals

[jillesvangurp]

Is your feature request related to a problem? Please describe.

I have a need for nested popups/dialiogs/etc. The current implementations of modals and other things with a z-index hard code their z-index with a constant. This cannot be styled. Any styling you add for this with e.g. tailwind is simply ignored.

Describe the solution you'd like

Add a z-index parameter to anything that uses these constants that takes an zIndex:Int?=null and falls back to the constant so users can override the zIndex on their modals, popups, etc.

Alternatively, let the user style this explicitly via the baseClass so that they can control this via e.g. tailwind. This currently doesn't work because of the hard coded defaults conflicting with this.

Describe alternatives you've considered

I'm currently working around modals because they simply conflict with what I'm trying to do, which is to have fine grained control over what is on top of what.

Additional context

-

[Lysander]

Sounds reasonable - because of the new portalling approach (which is the only solution to solve clipping issues) the stacking context of some z-indexed container is levered out I assume.

We have paid attention to this at the "core", as portal offers already some zIndex-parameter. The missing piece is to offer some common property within the "floating" components.

Here is what this might look in the API-Scetch of modal:

modal() {
    var restoreFocus: Boolean
    var setInitialFocus: InitialFocus = InsistToSet // DoNotSet, TryToSet, InsistToSet    

    // !!! we need to add this !!!
    var zIndex: Int

    // inherited by `OpenClose`
    val openState: DatabindingProperty<Boolean>
    val opened: Flow<Boolean>
    val close: SimpleHandler<Unit>
    val open: SimpleHandler<Unit>
    val toggle: SimpleHandler<Unit>

    modalPanel() {
        modalOverlay() { }
        modalTitle() { }
        modalDescription() { } // use multiple times

        // setInitialFocus() within one tag is possible
    }
}

This property should appear in the APIs of:

• Listbox
• Menu
• PopOver
• Tooltip
• Modal
• Toast

We should think about, whether a simple Int is sufficient, or we should craft a dedicated Property, which makes it easier to pass / use the predefined constants in portal.kt.