[Dialog] Provide an escape hatch for displaying backdrops on nested dialogs

[a-redbourbon]

Feature request

Summary

Currently nested dialogs hide their backdrop, which is a GREAT default. However, in certain situations we need to display the backdrop on the nested dialog, e.g. a dialog that is being fired from a Sidebar drawer.

Something like forceNestedBackdrop should be declarative enough to get this working.

Motivation

I need to fire a nested dialog from within a sidebar drawer (currently built with the Dialog primitive) - the drawer doesn't have its own backdrop, and the nested dialog needs it to be presented correctly. Both dialogs have different shapes so sharing backdrop settings from the parent is not possible.

Current Backdrop design forcefully hides the overlay when nested and there is no way to easily opt out of this behavior, so there is no easy way to position an overlay without working around nesting and breaking composition.

[mj12albert]

// no need to render nested backdrops
const shouldRender = !nested;
if (!shouldRender) {
  return null;
}

This is indeed very hard to work around 🤔

Perhaps we could render a nested backdrop if there isn't a higher backdrop present? That would avoid adding an extra prop, do you see any issues with this? @atomiks

We also have an open issue for a dedicated Drawer component with a ton of upvotes already which would also address this issue ~

[a-redbourbon]

Yeah! It's a very forceful impl. I really love how elegant it is 😅 but it's a bit harsh for composition.

Another option to avoid a prop could be to allow the consumer to leave out the Backdrop part to opt out when nesting.

Perhaps we could render a nested backdrop if there isn't a higher backdrop present? That would avoid adding an extra prop, do you see any issues with this? @atomiks

This would cause similar problems no? What if the drawer has a backdrop... then we're left without a way to separate the nested one visually