Page MenuHomePhabricator

Improve collapsed view of argument reference inside function calls
Closed, ResolvedPublic

Assigned To
Authored By
AAlhazwani-WMF
Jan 16 2025, 1:50 PM
Referenced Files
F58391298: image.png
Wed, Feb 12, 2:27 PM
F58390789: image.png
Wed, Feb 12, 12:16 PM
F58390771: image.png
Wed, Feb 12, 12:16 PM
F58390720: Screenshot from 2025-02-12 12-59-35.png
Wed, Feb 12, 12:00 PM
F58390715: Screenshot from 2025-02-12 12-57-57.png
Wed, Feb 12, 12:00 PM
F58390670: Screenshot from 2025-02-12 12-46-24.png
Wed, Feb 12, 11:52 AM
F58222362: image.png
Jan 17 2025, 2:37 PM
F58222366: image.png
Jan 17 2025, 2:37 PM

Description

When an argument reference is displayed inside a collapsed function call that expresses an implementation composition, the argument references look like this

image.png (279×453 px, 49 KB)

the current solution is verbose, and we could rely on the existing visual notation for argument references to simplify the current collapsed function call

image.png (254×292 px, 18 KB)

Examples

Proposed solution
use cdxIconFunctionArgument from https://doc.wikimedia.org/codex/latest/icons/all-icons.html instead of Argument reference ("...")

Before

image.png (74×1 px, 28 KB)

After

image.png (110×1 px, 29 KB)

in the mockup we've set the icon size to 16x16px, but we'd like to test with engineering in the browser what might be the best sizing (20 vs 16 vs 12) based on the different skins/base font sizes.

Event Timeline

here are some of early explorations that we explored with denny during a prototyping session

FROM

  • string equality (reverse string (Argument reference ("is a palindrome")), Argument reference ("is a palindrome"))

TO

  • string equality (reverse string(➡is a palindrome), ➡is a palindrome))

where ➡ is our existing cdxIconFunctionArgument https://doc.wikimedia.org/codex/latest/icons/all-icons.html

Sharvaniharan raised the priority of this task from Low to Medium.
AAlhazwani-WMF added a subscriber: Sharvaniharan.

@Sharvaniharan updated the description with a proposed solution, task is now ready to be picked up.

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

[mediawiki/extensions/WikiLambda@master] ZobjectToString.vue: Improve collapsed view of argument reference inside function calls

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

DSmit-WMF changed the task status from Open to In Progress.Feb 6 2025, 11:11 AM
DSmit-WMF claimed this task.

When creating a new composition, selecting arguments as argument references, but not setting their value, they appear as blank:

Screenshot from 2025-02-12 12-57-57.png (71×449 px, 8 KB)

Do we want to add call to actions for blank argument references the way we do for references or functions?

Screenshot from 2025-02-12 12-59-35.png (75×594 px, 10 KB)

@AAlhazwani-WMF @DSmit-WMF

When creating a new composition, selecting arguments as argument references, but not setting their value, they appear as blank:

Screenshot from 2025-02-12 12-57-57.png (71×449 px, 8 KB)

Do we want to add call to actions for blank argument references the way we do for references or functions?

Screenshot from 2025-02-12 12-59-35.png (75×594 px, 10 KB)

@AAlhazwani-WMF @DSmit-WMF

yeah, that would be great! how do you all feel about this?

image.png (148×1 px, 27 KB)

i know this task is not yet under the 'design review' column, but would it be possible to vertically align the icon with the label?

image.png (222×412 px, 13 KB)

i'd also love to optimize the spacing after (s and ,s. pulling the patch locally to give more specific guidance, thank you!

i'd also love to optimize the spacing after (s and ,s. pulling the patch locally to give more specific guidance, thank you!

specifically to spacing, would it be possible to achieve something like this?

image.png (312×2 px, 64 KB)

@AAlhazwani-WMF Do you remember the chat we had about Vector22 icon padding overrides. That same code does it here with padding left on our icon. So I'd rather have them fix this instead of us hacking that css with !important.

Change #1117869 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] ZobjectToString.vue: Improve collapsed view of argument reference inside function calls

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