Nested modal handling

[sarayourfriend]

Problem

For WordPress/openverse-frontend#541 we'll need to be able to simulataneously have a full-screen mobile modal (matching the designs from @panchovm for Modal S presented here) and an "alert" type modal for the license information box in the filters selection.

Description

We'll need at least one new prop to indicate that the modal should be this new alert style (perhaps we can have a variant prop that is typed as 'fullscreen' | 'alert'?).

Additionally, we'll have to fix whatever issue is currently plagueing the teleport target that is causing the nested modal to close all the modals on the screen. You can test this out in storybook by adding a simple nested modal in the modal story. Everything that I'm seeing with the teleport component indicates that it should just work so I think there's something specifically wrong with the modal implementation that is causing it to fail at the moment.

Here's how it behaves at the moment:

Gravacao.de.Tela.2021-12-22.as.08.28.12.mov

It's hard to tell in the video but clicking the "nested modal" button causes the original modal to close, and then the first click on the original modal trigger does nothing. Clicking a second time will open the original modal.

Additional context

Implementation

• 🙋 I would be interested in implementing this feature.

[sarayourfriend]

This may actually be unnecessary. While working on WordPress/openverse-frontend#601 it seemed to work mostly okay, with some minor bugs in focusing the disclosure element on close, but nothing major. I'm going to downgrade this to low priority and unassign myself from this for now.