Modal popover for report and license definition

[fcoveram]

Problem

As reported in #569, reporting content is currently made from a popover that looks broken on small screens. Based on the recent Design Library updates, we can improve this, and also the license definition popover, by reusing the component merged in #2860

Issues related

• Report of a broken popover in Content report popover appears over the pages modal #569
• The basis for a future suggested in Integrate user reporting flow from Results Page #645
• Modal specs in Update the external search modal and items #2860

Proposal

Search results page

Since the license description element is toggled from the drawer in small screens, I have two ideas that I would like your thoughts on.

v1. Replace drawer with the license

In this first version, once you click on the license’s question icon, the drawer disappears and is replaced by the license popover. You can see how the results grid is visible behind the modal layer.

v2. Push the drawer behind modal opaque layer

The second idea is to push the drawer behind the modal layer to avoid losing the context of where users displayed the info from. See how the drawer remains behind the dark layer.

I am more drawn to this version as contexts in modals play a key role.

From LG and beyond

On bigger screens, the license description popover is displayed as in the current flow.

Single result page

In the single result page, the popover shows up as in the current flow.

Popovers

As described in #2860, the following specs are still valid:

• Popover is centered, full width, and has a max value of 400px.
• On xs , horizontal margins 24px

However, I noticed that we did not consider a scrollable popover for those cases where its height overflows the device screen. For that case, I tried the following:

The spacings mirror the ones applied to the current component, but instead of wrapping the content with a single element, the popover's header is separated to keep it sticky when scrolling down. Below a screenshot of dev mode.

Mockups

Figma file: Modal popover for report and license definition

[openverse-bot]

Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

This issue or pull request has been labeled: "🖼️ aspect: design"

Thus the following users have been cc'd because of the following labels:

• WordPress/gutenberg-design: 🖼️ aspect: design
• WordPress/openverse: 🖼️ aspect: design

To subscribe or unsubscribe from this label, edit the .github/subscribe-to-label.json configuration file.

Learn more.

[sarayourfriend]

FWIW I agree that the additional context in v2 makes a lot of sense to me. As a bonus, it would also reduce the number of visual changes happening on the screen as you click into each license popover and back to the filters.

[fcoveram]

The mockups for v2 (Push the drawer behind the modal opaque layer) were updated with the latest changes and are ready for dev.

[zackkrida]

This looks great, thank you @fcoveram

[obulat]

Blocked by the code freeze during Nuxt 3 migration.