Stackable - support injecting a custom z-index to an ancestor of multiple Stackables

[yairEO]

Allow changing the initial z-index for a all <Stackable> components within a common ancestor.

In the below image, all the "pink" boxed should appear above the white boxes:

Proposed solution:

By exposing the context it would allow doing this: (Stackable.Provider points to the context provider)

export default () => (
    <>
        <div class='higher'>
            <Stackable.Provider value={{zIndex: 50}}>
                <Stackable className='stacking special'/>
                <Stackable className='stacking special'/>
                <div class='deep_deep_child_somewhere'>
                    <Stackable className='stacking special'/>
                </div>
            </Stackable.Provider>
        </div>

        <Stackable className='stacking '>
            <Stackable className='stacking'>
                <Stackable className='stacking'/>
            </Stackable>
        </Stackable>
    </>
);

A use-case would be a site's header with popups or dropdowns which are implemented with Stackable and their z-index should start from a minimum value which is above the rest of the website's main content area.

Clearly custom z-index value can be given as a prop for every Stackable component within the common .higher ancestor, but is not a "clean" solution as lift the whole initial z-index entirely, as a "group".

[ykadosh]

I think this is already possible using the zIndex prop. Here's a sandbox.

<div>
    <Stackable className="stacking special" zIndex={20} />
</div>
<div>
    <Stackable className="stacking">
        <Stackable className="stacking">
            <Stackable className="stacking" />
        </Stackable>
    </Stackable>
</div>

[yairEO]

@ykadosh - Yes it is possible for a single Stackable but not to a group of unknown number of them which are coded within a specific area in a webpage, for a example, a header section with many tooltips and popups which should all appear above any other Stackable that originates within the content area, below the header section.

It is possible to manually modify each of these Stackable (which are not nested within each-other) and have the same result mentioned above, a developer (in a team) might not be aware this should be done for every new Stackable component written within a certain area of the webpage/app

[ykadosh]

I see, in that case context makes sense.