Page MenuHomePhabricator
Create Task
Maniphest T324251

DefaultView: Create ZTypedList component
Closed, ResolvedPublic
Actions

Assigned To
• JKieserman
Authored By
gengh
Dec 1 2022, 8:41 PM
Tags
Referenced Files
F36888154: image.png
Mar 2 2023, 11:37 AM
F36888152: image.png
Mar 2 2023, 11:37 AM
F36888147: image.png
Mar 2 2023, 11:37 AM
F36888145: image.png
Mar 2 2023, 11:37 AM
F36888143: image.png
Mar 2 2023, 11:37 AM
F36887265: Screenshot from 2023-03-01 20-02-20.png
Mar 1 2023, 7:02 PM
F36887262: Screenshot from 2023-03-01 19-58-31.png
Mar 1 2023, 7:02 PM
F36887260: Screenshot from 2023-03-01 19-49-38.png
Mar 1 2023, 7:02 PM
View All 15 Files
Subscribers
AAlhazwani-WMF
DVrandecic
gengh

Description

Description

Complete this component as per the designs specified in the Figma file.

Desired behavior/Acceptance criteria

  • The TypedList component is the only one that will not fallback to ZObjectKeyValueSet as its expert-mode strategy
  • Should provide a limited and user-friendly preview
  • Should be able to view all the items if/when I choose to extend this preview
  • In edit mode:
  • Should be able to configure the type of the list items, and (if editable) select its type or leave the list untyped (Z1)
  • Should be able to add new items
  • If the list is typed (a type is specified), adding an item should create an item of that type
  • If the list is untyped (Z1 as type), adding an item should add an untyped object (should allow to choose type)
  • Should be able to remove individual items
  • Each element can be a simple (atomic) or more complex object, which should fall back into the general ZObjectKeyValue behavior (so that they can individually explored and expanded into expert mode, etc.)
  • Styles according to the attached designs

Devices and Design (URLs or screenshots)

Building on top of the previous work on strings, references, and monolingual text, here's a design proposal for reading, exploring, and editing typed, and untyped lists. I'm going to post down here a selection of screenshots for additional visibility. For any doubt and/or question feel free to leave a comment on Figma https://www.figma.com/file/uNBSv1e4ceA8tGNr29R9vp/Default-View?node-id=3472%3A58326&t=cmqNDyv7jCd5VejB-1.

Read and explore a typed list

image.png (1×3 px, 431 KB)

Add or delete a list item in a typed list

image.png (1×3 px, 434 KB)

Add a list item in an untyped list

image.png (1×2 px, 294 KB)

Completion checklist

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
create a default view for typed listsmediawiki/extensions/WikiLambdamaster+1 K -77
Customize query in gerrit

Related Objects
Search...

Event Timeline

gengh created this task.Dec 1 2022, 8:41 PM
gengh changed the task status from Open to Stalled.

Depends on: https://phabricator.wikimedia.org/T310827

gengh moved this task from To Triage to Phase θ – Throttling on the Abstract Wikipedia team board.Dec 1 2022, 8:43 PM
gengh edited projects, added Abstract Wikipedia team (Phase θ – Throttling); removed Abstract Wikipedia team.
gengh moved this task from Incoming to Ready: G5. Fallback view on the Abstract Wikipedia team (Phase θ – Throttling) board.
DVrandecic added a parent task: T324217: DefaultView: Create the minimum necessary components to have a fully functioning DefaultView.Dec 8 2022, 10:20 PM
DVrandecic added a subtask: T310827: DefaultView: Design new Typed List component.Dec 8 2022, 10:44 PM
• RWambua-WMF removed a parent task: T324217: DefaultView: Create the minimum necessary components to have a fully functioning DefaultView.Dec 8 2022, 11:54 PM
• RWambua-WMF added a parent task: T321784: Default component: Implement POC for default view/component structure.
DVrandecic mentioned this in T310827: DefaultView: Design new Typed List component.Jan 13 2023, 9:59 PM
AAlhazwani-WMF changed the status of subtask T310827: DefaultView: Design new Typed List component from In Progress to Open.Jan 16 2023, 4:36 PM
AAlhazwani-WMF updated the task description. (Show Details)Jan 16 2023, 4:47 PM
AAlhazwani-WMF attached a referenced file: F36158124: image.png. (Show Details)Jan 19 2023, 11:44 AM
AAlhazwani-WMF attached a referenced file: F36158121: image.png. (Show Details)
AAlhazwani-WMF attached a referenced file: F36158119: image.png. (Show Details)
gengh changed the task status from Stalled to Open.Jan 20 2023, 12:28 PM
AAlhazwani-WMF updated the task description. (Show Details)Jan 20 2023, 2:34 PM
AAlhazwani-WMF subscribed.Jan 20 2023, 2:36 PM

Edited screenshot in description to implement recent recommendation from James to add bullets beside list items in read mode.

CleanShot 2023-01-20 at 15.35.12@2x.png (1×1 px, 182 KB)

• JKieserman claimed this task.Jan 24 2023, 5:04 PM
gerritbot added a comment.Feb 9 2023, 8:32 PM

Change 887386 had a related patch set uploaded (by Jkieserman; author: Jkieserman):

[mediawiki/extensions/WikiLambda@master] create a default view for typed lists

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

gerritbot added a project: Patch-For-Review.Feb 9 2023, 8:32 PM
DVrandecic closed subtask T310827: DefaultView: Design new Typed List component as Resolved.Feb 16 2023, 9:34 PM
gengh added a comment.Mar 1 2023, 7:02 PM

Reviewing the behavior of the component, there's an issue in behavior and a few reg. style:

behavioral

  • I am unable to change the type of an unbound list
    • for example, I create and persist a zobject where Z2K2 is a typed list of Z1, where I put some strings
    • when I go to the edit page of this object, expanding value shows me the "first level type dropdown", which allows me to change the "mode" of the whole object, (so replace the whole Z2K2 list with a function call to something)
    • but if I wanted to change "Object" with "String" I should be able to expand it further, and I cant

Screenshot from 2023-03-01 19-53-40.png (196×434 px, 7 KB)

Screenshot from 2023-03-01 19-53-47.png (258×420 px, 11 KB)

styling

  • view:
    • typed list dot is black but in figma it's @color-subtle
    • spacing between strings looks bigger than in figma

Screenshot from 2023-03-01 19-49-38.png (258×343 px, 8 KB)

  • edit:
    • look into the spacing between fields as well, I think they should be separated by 8px (@spacing-50)
    • vertical alignment of closed (collapsed) chevron with text fields is off

Screenshot from 2023-03-01 19-58-31.png (77×254 px, 2 KB)

  • spacing between key label and menu dots should be 8px (@spacing-50)
  • list items must occupy 100% width so that fields expand to the end of the available space

Screenshot from 2023-03-01 20-02-20.png (753×836 px, 33 KB)

• JKieserman added a comment.Mar 1 2023, 7:50 PM
This comment was removed by • JKieserman.
• JKieserman added a comment.Mar 1 2023, 9:06 PM

Thanks for the feedback! I've updated the patch with two exceptions:

  1. The behavior issue will be addressed in a follow-up patch
  2. The typed list dot actually is color-subtle already. It also looks much darker on my screen though...in the figma the color swatch is darker than the dot itself so I'll follow-up with Amin on this
AAlhazwani-WMF added a comment.EditedMar 2 2023, 11:37 AM

thank you @JKieserman! i did a first pass and highlighted a couple of minor things. i would also be happy to hop in a call if you prefer to go through one by one together!

in read mode

image.png (1×1 px, 236 KB)

image.png (1×1 px, 256 KB)

questions for both of you (@gengh), which copy do you think works best?

image.png (960×1 px, 168 KB)

in edit mode

image.png (1×1 px, 188 KB)

image.png (1×1 px, 247 KB)

i also added these screens, and mocks in the figma file (under the page 'patch review') if you prefer to inspect the mocks! https://www.figma.com/file/uNBSv1e4ceA8tGNr29R9vp/T306442-Default-view?node-id=4228%3A56177&t=IzDsdk00m5mwjY9u-1

gerritbot added a comment.Mar 7 2023, 2:43 PM

Change 887386 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] create a default view for typed lists

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

Maintenance_bot removed a project: Patch-For-Review.Mar 7 2023, 3:10 PM
DVrandecic moved this task from Ready: G5. Fallback view to QA / Ready to close on the Abstract Wikipedia team (Phase θ – Throttling) board.Mar 27 2023, 3:34 PM
DVrandecic updated the task description. (Show Details)Mar 28 2023, 3:02 AM
DVrandecic updated the task description. (Show Details)Mar 28 2023, 3:05 AM
DVrandecic closed this task as Resolved.Mar 30 2023, 9:51 PM
DVrandecic updated the task description. (Show Details)
DVrandecic subscribed.

Congratulations!

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits