Page MenuHomePhabricator

Popover: Add Popover component to Codex
Open, Needs TriagePublic

Assigned To
None
Authored By
DTorsani-WMF
Apr 24 2024, 6:41 PM
Referenced Files
F41713387: Captura de pantalla 2024-01-24 a las 11.34.07.png
Apr 24 2024, 6:41 PM
F41713386: Captura de pantalla 2024-01-24 a las 11.34.53.png
Apr 24 2024, 6:41 PM
F41713385: Captura de pantalla 2024-01-24 a las 11.34.31.png
Apr 24 2024, 6:41 PM
F37121012: Captura de pantalla 2023-06-27 a las 15.43.37.png
Apr 24 2024, 6:41 PM
F37114658: image.png
Apr 24 2024, 6:41 PM
F34408574: image.png
Apr 24 2024, 6:41 PM
F34408572: image.png
Apr 24 2024, 6:41 PM
F37670383: Screenshot 2023-09-07 at 19.19.59.png
Apr 24 2024, 6:41 PM
Tokens
"Yellow Medal" token, awarded by CCiufo-WMF.

Description

Background

We need to implement the Popover component in Codex.

The need for this component stems from having an existing Popover in OOUI and conversation from the Tooltip task.

Description

Popover component provides a localized container based on a trigger to provide long for information, layouts, and interactive elements.

User stories

  • As a user, I need additional space to provide information or interactivity based on an existing element on the page.

Potential use cases

Screenshot 2023-09-07 at 19.19.59.png (350×912 px, 57 KB)
Wikidata Query Builder uses the Popover component from the WiKit design system (in deprecation).
image.png (356×878 px, 39 KB)
image.png (298×758 px, 31 KB)
Tooltips in OOUI, seen on Special:Preferences > Notifications (Desktop and mobile)
image.png (384×722 px, 62 KB)
Growth implementation in Vue (See related task T340199)
Captura de pantalla 2023-06-27 a las 15.43.37.png (330×880 px, 32 KB)
Popover in WMDE Wikit
Captura de pantalla 2024-01-24 a las 11.34.31.png (1×2 px, 1 MB)
Captura de pantalla 2024-01-24 a las 11.34.53.png (1×2 px, 1 MB)
Captura de pantalla 2024-01-24 a las 11.34.07.png (1×2 px, 1 MB)
Popups with different content in Wikipedia.
Captura de pantalla 2023-06-27 a las 15.43.37.png (330×880 px, 32 KB)
Popover in WMDE Wikit

Acceptance criteria

Minimum viable product

This task covers the minimum viable product (MVP) version of this component. MVP includes basic layout, default states, and most important functionality.

MVP scope

  • ???

Design

  • Implement the component in Figma

Code

  • Implement the Vue component in Codex
  • Implement the CSS-only component in Codex (optional -- TBD as part of refinement)