Page MenuHomePhabricator

TypedLists: Design and implement a better indication of empty (zero-black) state
Closed, ResolvedPublic

Description

when creating a new type (or when adding a typed list to an existing object) we don't signal that the typed list is empty

CleanShot 2023-07-04 at 15.24.59@2x.png (1×2 px, 170 KB)

same applies when we expand the typed list

CleanShot 2023-07-04 at 15.27.46@2x.png (984×1 px, 65 KB)

we should probably design an empty placeholder.

design proposal

for edit mode we'll show a "0 items" placeholder both in collapsed and expanded mode

CleanShot 2024-03-27 at 10.42.19@2x.jpg (1×1 px, 134 KB)

when editors add a new item to an empty list we'll hide/remove the "0 items" placeholder

CleanShot 2024-03-27 at 10.47.09@2x.jpg (1×1 px, 216 KB)

in read mode we'll show a "0 items" placeholder botn in collapsed and expanded mode

CleanShot 2024-03-27 at 10.47.47@2x.jpg (396×770 px, 23 KB)

nice to have

translators have been confused by the label "List items". they were unsure if the meaning is "List (noun) of items" or "List (verb) the items". to address this i'd like to suggest a change in the labels:

  • "List items type" becomes "Item type", to also echo the existing "Value type" label
  • "List items" becomes "Items"

design specs

https://www.figma.com/file/LuyZ6GFzrmczP5Hhy4OXEb/T341069-Typed-list-zero-blank-state?type=design&node-id=0%3A1&mode=design&t=cI6ETPjm0bykdlx3-1

Event Timeline

Jdforrester-WMF renamed this task from Add zero-black state for typed lists to TypedLists: Design and implement a better indication of empty (zero-black) state.Oct 5 2023, 5:03 PM

this task is also valid for read mode, in this example i published an empty list

image.png (728×1 px, 105 KB)
image.png (850×1 px, 117 KB)

DVrandecic triaged this task as Medium priority.Mar 21 2024, 5:24 PM
DVrandecic moved this task from Needs Product/Design to Backlog on the Abstract Wikipedia team board.
AAlhazwani-WMF removed a project: Design.
AAlhazwani-WMF updated the task description. (Show Details)

found the existing task on empty list, lemme know what you think of the proposed design in the task description @gengh!

@gengh: What OKR is this part of? Or do you think this is essential work? If neither, I think this should go to the engineering backlog?

@Jdforrester-WMF I was thinking on moving this to the engineering backlog, although I'm aware that it's very tightly related to these two tasks planned for this Quarter:

T391129 [Design] - Design solution to limit number of items rendered in typed lists.
T391130 [Development] - Typed List component: Implement solution to limit number of list items presented to the user at once.

So we might be closing this one as a consequence. I will keep this task linked in case we do that.

@Jdforrester-WMF I was thinking on moving this to the engineering backlog, although I'm aware that it's very tightly related to these two tasks planned for this Quarter:

T391129 [Design] - Design solution to limit number of items rendered in typed lists.
T391130 [Development] - Typed List component: Implement solution to limit number of list items presented to the user at once.

So we might be closing this one as a consequence. I will keep this task linked in case we do that.

Aha, right, that makes sense, thanks! Maybe we should add it as a blocker to T391129?

Is Amin's design sketch above the final, agreed version? There haven't been any updates here, but maybe somewhere else?

Is Amin's design sketch above the final, agreed version? There haven't been any updates here, but maybe somewhere else?

Yes, it is the final version.

Is Amin's design sketch above the final, agreed version? There haven't been any updates here, but maybe somewhere else?

Yes, it is the final version.

Aha, OK. However, this task is "Design and implement", and the implementation hasn't been started yet?

DSmit-WMF changed the task status from Open to In Progress.Sep 8 2025, 2:02 PM
DSmit-WMF claimed this task.

Change #1185946 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] Added empty state to typed lists and multilingual strings

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

Alignment of elements in this patch seems slightly off with respect to the shared designs:

  • there is more vertical spacing between "0 items" and the "[+]" icon than from the icon to the next key (in the design there's the same spacing)
  • the plus sign is horizontally aligned slightly to the left, while in the design it's horizontally aligned with the "0 items" above. Was this also an expected change for this patch?

Additionally, the color used in the design is "@color-placeholder", is the change to "@color-subtle" intentional?

Screenshot from 2025-10-15 15-54-47.png (241×422 px, 10 KB)

Otherwise, it works good!

I am assuming touching the + button should not be part of this patch.

I changed the spacing + color to be correct.

Change #1185946 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Added empty state to typed lists and multilingual strings

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

Tested on wikifunctions.org and confirmed it works as expected

Is the "0 items" always in English? Or is it translateable somewhere?

Yes its translateable as "wikilambda-list-empty-state": "0 items",