Terra-core: Allow Overlay above SlidePanel

[noahbenham]

Issue Description

CareAware Connect would like to use LoadingOverlay above all parts of SlidePanel, including the panel part. This is currently not possible without manually overriding the z-index of the overlay.

This is because Overlay has a z-index of 100 and SlidePanel's panel has a z-index of 500.

I'd like to propose introducing a prop to dictate whether Overlay has a larger z-index. Considerations will need to be made for whether Overlay covers modals in this scenario.

Issue Type

• [ ] New Feature
• [x] Enhancement
• [ ] Bug
• [ ] Other

Expected Behavior

Overlay covers both single and multi-panel SlidePanel mode

Current Behavior

Overlay is hidden in single slide panel mode

Steps to Reproduce

N/A

Environment

• Component Version:
• Browser Name and Version: Chrome 61.0.3163.100 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): macOS 10.12.6 (16G29)

[bjankord]

+1 on adding a prop to overlay to manually override is z-index.

[nickpith]

We have discovered this issue when doing some work. Is this really an enhancement that requires a prop to control or really a defect?

To me, I don't understand a valid use case where you would want this behavior where the overlay does not cover up everything on the page including the slide panel or menu in the application layout? Can someone provide one?

[noahbenham]

I'm inclined to agree with @nickpith here. If there are valid use cases, I would still expect the primary use case to be the overlay covering everything.

For what it's worth, consumers can do something like..

const overlayStyle = { zIndex: '999' };
<Overlay style={overlayStyle} />

However, this has been open for 6 months now. Should this be prioritized?

[bjankord]

@neilpfeiffer Any thoughts on making the overlay always appear over everything.

[neilpfeiffer]

Discussed with @dkasper-was-taken as to technical issues. If a overlay is presented from a SlidePanel, or any container with it's position set by transform, the fullscreen overlay does not work as intended (loses context of original document positioning).

As a generally concept, we probably want to avoid opening up the option to add zIndex as prop and leave up to consumers without a central governing strategy, which would create an accidental and uncontrolled "king-of-the-hill" situation when multiple higher-order components are combined onto one page or within one application.

Possible option that solves for both concerns is to add a new type of fullscreen overlay that is portaled and at a z-index of 9999 or similar. For current passivity, we could keep the isRelativeToContainer prop since it is widely used (eventually deprecate & remove), and introduce a new prop, something like relativeTo: container, fullscreen, portal (final names pending) keeping the first two as-is with current behavior and z-index and introducing the third type as new (portaled version will be similar to AbstractModal).