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

Popover component #366

Closed sarayourfriend closed 2 years ago

sarayourfriend commented 3 years ago

Figma design here: https://www.figma.com/file/GIIQ4sDbaToCfFQyKMvzr8/Openverse-Design-Library?node-id=411%3A2176

We'll use Popper.js to simplify the popover positioning logic. A Vue example for implementation is here: https://vuecomponent.com/integrations/popperjs.html

Probably also a good idea to reference the WAI-ARIA spec and other implementations like Reakit:

https://github.com/reakit/reakit/tree/master/packages/reakit/src/Popover https://github.com/reakit/reakit/tree/master/packages/reakit/src/Dialog#non-modal-dialogs

sarayourfriend commented 2 years ago

Just wanted to note that the dropdown for the search suggestions should not use the same popover component.

Instead it is a combobox and should use something like downshift (except there isn't a version for Vue so I guess we'll have to re-write that outselves as well)