Page MenuHomePhabricator

[DESIGN] WF authoring design: Z300 selector + collapsed/expanded states
Closed, ResolvedPublic

Assigned To
Authored By
DSmit-WMF
Apr 15 2026, 3:28 PM
Referenced Files
F81672398: Screenshot 2026-05-15 at 15.35.30.png
Fri, May 15, 1:37 PM
F81672397: Screenshot 2026-05-15 at 15.36.53.png
Fri, May 15, 1:37 PM
F81662930: Screenshot 2026-05-15 at 14.47.47.png
Fri, May 15, 12:49 PM
F81660495: Screenshot 2026-05-15 at 14.35.33.png
Fri, May 15, 12:49 PM
F81224396: Screenshot 2026-05-13 at 18.35.07.png
May 13 2026, 4:36 PM
F81224397: Screenshot 2026-05-13 at 18.35.14.png
May 13 2026, 4:36 PM
F81224395: Screenshot 2026-05-13 at 18.35.19.png
May 13 2026, 4:36 PM
F81218304: Screenshot 2026-05-13 at 17.28.18.png
May 13 2026, 3:30 PM

Description

Design the Wikifunctions authoring experience for the Commons Image Data (Z300) type.

In scope:

  1. Z300 selector — lookup/search component for finding and selecting a Commons image by title or keyword; shows thumbnail preview in results
  2. Collapsed state (ZObjectToString) — how a Z300 value appears inside a collapsed function call (e.g. image icon + file title)
  3. Expanded state — full editor view with the current image selection and thumbnail preview
  4. Empty/unset state — "Select Commons image" CTA when no image is selected yet

Out of scope:

  • How the rendered image figure appears in run-result views (separate design ticket)
  • AW editor design (T423441)

Event Timeline

DSmit-WMF triaged this task as Medium priority.
DSmit-WMF renamed this task from [DESIGN] WF authoring/run-result display design to [DESIGN] Supporting Images - WF authoring/run-result display design.Apr 16 2026, 10:17 AM
DSmit-WMF renamed this task from [DESIGN] Supporting Images - WF authoring/run-result display design to [DESIGN] WF authoring design: Z300 selector + collapsed/expanded states.May 13 2026, 10:08 AM
DSmit-WMF updated the task description. (Show Details)

Selector of Z300/Z310

Screenshot 2026-05-13 at 17.29.12.png (640×400 px, 32 KB)
Screenshot 2026-05-13 at 17.28.18.png (722×1,000 px, 173 KB)
Load empty selectorSearching...

Collapse/expanded

Screenshot 2026-05-13 at 18.35.19.png (898×664 px, 51 KB)
Screenshot 2026-05-13 at 18.35.14.png (912×618 px, 51 KB)
Screenshot 2026-05-13 at 18.35.07.png (920×410 px, 39 KB)
expanded fullexpandedcollapsed

Concern: the thumbnail is so small. its not a very good preview of images to see if its the one the user actually wants.

Screenshot 2026-05-15 at 14.35.33.png (1,296×1,118 px, 458 KB)
Screenshot 2026-05-15 at 14.47.47.png (1,102×1,178 px, 380 KB)
Idea 1: when selected show a thumbnail preview underneath the selectorIdea 2: fetch a 120px wide thumbnail and show it as 80px width in dropdown

Other ideas?

Final discussed solution:

Screenshot 2026-05-15 at 15.36.53.png (1,306×1,040 px, 304 KB)
Screenshot 2026-05-15 at 15.35.30.png (1,276×1,056 px, 563 KB)
thumbnail sizecombined with preview

Alright will implement this as part of https://phabricator.wikimedia.org/T423446. Design ticket can be closed then