Page MenuHomePhabricator

Popover: add a WIP component
Closed, ResolvedPublic3 Estimated Story Points

Description

Overview

Add an initial barebones version of the component with minimal to no customizations.

  • A container with content.
  • An icon-only close button closes the popover container.
  • The container is a floating element that can be teleported to a target element if provided (via provide/inject), otherwise, teleportation defaults to the <body> element. Teleportation is enabled via Vue <Teleport> and can be disabled via its disabled prop.
  • The target element triggers the Popover to show and hide.

Acceptance Criteria

  • Add a container with one slot.
  • Add a close button prop.
  • Set up Vue teleportation via provide/inject and fallback behavior.
  • Add a prop to disable teleportation and render the element in its place.
  • Demonstrate how to use Popover in the Sandbox demo page.

Event Timeline

Change #1121006 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] Popover: Add WIP component

https://gerrit.wikimedia.org/r/1121006

lwatson changed the task status from Open to In Progress.Feb 19 2025, 3:22 PM
lwatson claimed this task.

Some design notes on the demo:

  • Let's set the Popover to appear 4px away from its trigger, similarly to MenuButton.
  • Clicking outside of the Popover should close it, whether clicking something else interactive or clicking anywhere outside the Popover itself.
  • Spacing between the buttons in the footer should be 12px instead of 16px.

@DTorsani-WMF Thanks! I updated the spacing between Popover and its trigger and the spacing between buttons. On a separate local branch, I'm working on a solution to handle the clicks outside the popover but it's not working as expected. My work-in-progress solution closes the popover when clicks are outside the popover but no longer closes it when you click on the trigger element (toggle button).

Change #1121006 merged by jenkins-bot:

[design/codex@main] Popover: Add WIP component

https://gerrit.wikimedia.org/r/1121006

Change #1124526 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/core@master] Update Codex from v1.20.2 to v1.20.3

https://gerrit.wikimedia.org/r/1124526

Change #1124526 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.20.2 to v1.20.3

https://gerrit.wikimedia.org/r/1124526

Test wiki on Patch demo by LWatson-WMF using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/1f500859d0/w/