search

WordPress / openverse-frontend

The gateway to the Openverse. Openverse is a search tool for CC-licensed and public domain content across the internet.
https://wordpress.org/openverse
MIT License
72 stars 64 forks source link

Add license definition in filter sidebar #541

Closed fcoveram closed 2 years ago

fcoveram commented 2 years ago

Problem

The current mockups do not have the license definition in the Licenses section, and we need to show a license explanation and a link to the license description per license.

Alternatives

This proposal adds a right-aligned help icon showing the license definition in a box. The interaction goes as it follows:

  1. On hover, the help icon turns dark-charcoal and a tooltip appears on its left.
  2. On click, the license explanation box appears top-aligned to the license checkbox.
  3. Clicking outside the license explanation box closes the box.
  4. Clicking on a different help icon closes the current box and opens the new one.

Here is a video showing the interaction. As noticed below, the checkbox state (enabled, disabled) does not affect the license explanation interaction.

https://user-images.githubusercontent.com/895819/146779058-a98903b0-5ed6-496d-9c36-bcdb9415bb0c.mp4

Additional context

The popover design has a shadow popover style from the WordPress Design Library.

sarayourfriend commented 2 years ago

This looks good to me, but my initial gut reaction is that the popup feels "far away" from the question mark circle icon that triggers it opening. Gutenberg has similar interactions that open popovers to the side, but the triggers for them all seem to be wider, so the popover is more likely within the immediate vision of a user.

https://user-images.githubusercontent.com/24264157/146839961-8b528490-0b77-4d1b-b6bf-acd3d14a60b7.mov

The biggest thing that helps with this for sighted users is probably the animation visible in the video above. I wonder if we could do a similar thing?

Also a note for implementers: our popover doesn't currently support arbitrary placement like this. I think it could be done by making the popover relative to the checkbox as a whole group, but it would require a new prop to explicitly pass the "anchor" element for the popover to use. Right now it just uses the disclosure/trigger element, which in this case would just be the circle question mark icon.

We'll also need to add a prop for configuring the gutter size to displace the popover far enough away from the checkbox "row" so that it appears over the search results.

@panchovm for mobile, will this also open a modal? If so we'll be getting into the territory of stacked modals as the filters themselves appear inside a modal. We'll need to do some refactoring to the modal component to accomodate this. It shouldn't be too bad I don't think. Potentially we could just create a second modal teleport location inside the filters modal specifically for rendering these, but I don't think that's ideal. Reakit has a strategy for managing multiple modals that works, if we can lift the implementation details from there that would be ideal.

fcoveram commented 2 years ago

It's worth trying the popover animation to see how related it feels to the action. I tried placing it above and below as usual, but the outcome does not look good and covers other filters.

CleanShot 2021-12-21 at 09 34 04@2x

Popovers on mobile

Regarding popovers in general, I was thinking of that while designing this, and it seems reasonable to find a single solution for all popovers on mobile.

The audio format selection and the report content have similar interactions (as shown in WordPress/openverse-frontend#543). And for the safe browsing filter (shown in WordPress/openverse#636), moving it to the filter modal in a new category/section seems good as it belongs to the same concept of reducing results, and it does not split the search result layout.

CleanShot 2021-12-21 at 09 41 41@2x
fcoveram commented 2 years ago

I am still iterating on this and I think that placing the popover above and right-aligned to the question symbols solves the popover interaction on desktop and mobile. Here is a prototype for the two breakpoints.

The component has the same content and interactions on both breakpoints. The mobile version also applies to the reporting content flow (#543) and it might work well for the format selection in audio.

Desktop

https://user-images.githubusercontent.com/895819/147097662-09e3b0a5-5157-440d-b9da-9d65fd529de7.mp4

Mobile

https://user-images.githubusercontent.com/895819/147097690-815f4c3e-2af7-4ff7-9711-a58696c77dde.mov

sarayourfriend commented 2 years ago

Love it! From a technical perspective it'll still be a popover on desktop and a modal on mobile, but I think that's totally doable.

fcoveram commented 2 years ago

Perfect. I will update the Releases and Design Library files.

The Releases and Design Library files were updated with the new component.