Page MenuHomePhabricator
Create Task
Maniphest T318148

Function editor: Aliases component improvements
Closed, DeclinedPublic
Actions

Assigned To
• JKieserman
Authored By
AAlhazwani-WMF
Sep 20 2022, 11:10 AM
Tags
Referenced Files
F35605011: Screen Shot 2022-10-20 at 11.04.05 AM.png
Oct 20 2022, 6:16 PM
F35603431: CleanShot 2022-10-20 at 12.45.52@2x.png
Oct 20 2022, 10:53 AM
F35603401: CleanShot 2022-10-20 at 12.37.44@2x.png
Oct 20 2022, 10:53 AM
F35601850: Screen Recording 2022-10-19 at 4.08.19 PM.mov
Oct 20 2022, 12:03 AM
F35601845: Screen Shot 2022-10-19 at 5.02.06 PM.png
Oct 20 2022, 12:03 AM
F35548134: Screenshot from 2022-10-05 16-17-01.png
Oct 5 2022, 2:37 PM
F35548129: Screenshot from 2022-10-05 16-17-44.png
Oct 5 2022, 2:37 PM
F35548125: Screenshot from 2022-10-05 16-18-05.png
Oct 5 2022, 2:37 PM
View All 10 Files
Subscribers
AAlhazwani-WMF
Aklapper
bmartinezcalvo
DVrandecic
gengh
Jdforrester-WMF
• JKieserman
• SWoodruff-WMF

Description

Preamble

While fixing a couple of bugs related to function name aliases, we raised a series of interesting questions on this specific component:

  • How might we edit existing aliases?
  • What if an alias already exists?
  • What if we end up with a long list of aliases?

Design proposal

This proposal tries to address these exact questions, and explores potential improvements to the aliases component.

The linked Figma file includes the following scenarios (on both mobile web and desktop):

  • A1 Add Alias
  • B1 Add alias to an existing list
  • C1 Display numerous aliases
  • D1 Add existing alias

Notes on design

  • For the time being is not possible to edit an existing alias, but editors can remove the existing alias, and add a new one to substitute it.
  • The visual design of the pills (or chips/tags) component is not final yet (aka Codex approved)
  • With time, if we notice that the aliases component is heavily used, we will explore better solutions to display numerous items, maybe off page instead of in page.

Details

SubjectRepoBranchLines +/-
update alias stylesmediawiki/extensions/WikiLambdamaster+281 -129
Customize query in gerrit

Related Objects
Search...

Event Timeline

AAlhazwani-WMF created this task.Sep 20 2022, 11:10 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 20 2022, 11:10 AM
AAlhazwani-WMF renamed this task from Funtion editor: Aliases component improvments to Function editor: Aliases component improvements.Sep 20 2022, 11:11 AM
AAlhazwani-WMF updated the task description. (Show Details)
• JKieserman claimed this task.Sep 20 2022, 11:27 AM
AAlhazwani-WMF added a comment.Sep 20 2022, 3:00 PM

@JKieserman JFYI I updated the existing alias flow D1 to make it less red, aka less worring.

IMG_1859AC14C03D-1.jpeg (964×1 px, 465 KB)

gerritbot added a comment.Sep 20 2022, 8:52 PM

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

[mediawiki/extensions/WikiLambda@master] update alias styles

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

gerritbot added a project: Patch-For-Review.Sep 20 2022, 8:52 PM
• JKieserman moved this task from Ready: G4. Function view to QA / Ready to close on the Abstract Wikipedia team (Phase θ – Throttling) board.Oct 3 2022, 11:34 AM
• JKieserman moved this task from QA / Ready to close to Ready: G4. Function view on the Abstract Wikipedia team (Phase θ – Throttling) board.
gengh moved this task from Ready: G4. Function view to QA / Ready to close on the Abstract Wikipedia team (Phase θ – Throttling) board.Oct 5 2022, 2:12 PM
gengh subscribed.Oct 5 2022, 2:37 PM

I see some issues with current field

Style - Desktop

  1. Not sure what's the cross icon inside of the input field for. I would imagine that clears the field, but it doesn't do any action, and also there's a "Cancel" button on the right so adding a button to clear the field seems a bit unnecessary.
  2. When there's many alias and we show the hide+add buttons, they are pushed to the right so the texts don't show. There's definitely space to show the whole buttons, but if there's not, the figma designs show how we should push the buttons to a new line similarly to the design on mobile.

Screenshot from 2022-10-05 16-26-13.png (535×1 px, 63 KB)

Style - Mobile

  1. According to the mobile designs in figma, the input fields should go on a new line under the input labels, so that the fields occupy 100% of the screen. This is not happening for any field. In the case of the aliases, this is compressing the label "Aliases (optional)", the alias collection, and the buttons, on the same row, when it should be a line jump between label-aliases and another between aliases-buttons.
  2. This also means that when showing the input field, the buttons are out of screen.

Screenshot from 2022-10-05 16-18-05.png (826×448 px, 61 KB)

Screenshot from 2022-10-05 16-17-44.png (826×460 px, 59 KB)

Screenshot from 2022-10-05 16-17-01.png (821×443 px, 50 KB)

Behavioral

  1. The only way to accept an input is to press the "Add" button. While I believe that's good to have a visually explicit CTA instead of implicit hidden behaviors, it would be useful to provide other ways of input "E.g. when pressing the ENTER key"
  2. I feel that adding a collection of aliases has become more time taking, more accessible and less comfortable. Instead of write a series of strings in an input field, now I need to do:
    • click a button to see the field
    • go to keyboard and write a string
    • go to mouse and click a button to add
    • click another button to add another one
    • etc. Can we think again how to make this process more dynamic? For example, do we need to click "Add alias" to see the input field? Does the input field need to disappear every time I add an alias making me have to click "Add alias" again?

cc @AAlhazwani-WMF

gengh added a parent task: T306450: Adjust the function editor to be mobile-friendly as well.Oct 6 2022, 2:50 PM
AAlhazwani-WMF reassigned this task from • JKieserman to • SWoodruff-WMF.Oct 18 2022, 8:23 AM
AAlhazwani-WMF added a subscriber: • JKieserman.
• SWoodruff-WMF added a comment.Oct 20 2022, 12:03 AM

Hi all! Here's a proposal for the alias component

Screen Shot 2022-10-19 at 5.02.06 PM.png (704×1 px, 134 KB)

If you try to enter a tag that’s already entered, it will be removed (like in this video)

Screen Recording 2022-10-19 at 4.08.19 PM.mov1 MBDownload

AAlhazwani-WMF added a comment.Oct 20 2022, 10:53 AM

YAY, thank you so much @SWoodruff-WMF for quickly taking care of this. I have a couple of follow up questions, just wanted to make sure I understand this correctly:

  1. Is the "x" highlighted in the screenshot below for clearing the "sum" string? If yes, we could use the style defined by the Codex design system. I wondering if it's clear that you're going to clear just "sum" instead of the whole input field. I'm not sure about this. What do you think?

CleanShot 2022-10-20 at 12.37.44@2x.png (1×610 px, 152 KB)

  1. How do you enter an alias? Let's say I type "addition, summatory, plus", what should I do next? Maybe press the return key on your keyboard? Also, something that Edmund notice while watching this recording is that an alias is not added if you simply move focus to another field. Maybe is it worth to specify also this scenario?
  1. Is the "x" highlighted in the screenshot below for clearing the whole input field? If yes, might this go in conflict with the previous case for clearing a single string?

CleanShot 2022-10-20 at 12.45.52@2x.png (1×628 px, 166 KB)

  1. JFYI the style of the alias chip/pill/tag is not coming directly from the Codex design system, I quickly put something together to move this forward as there was no component available. Feel free to change it as you see fit, and/or reach out to the design system folks for support, you can find them here.
• SWoodruff-WMF added a comment.Oct 20 2022, 6:16 PM
  1. (But also 3.) Ah, I missed that, will use that instead!

Screen Shot 2022-10-20 at 11.04.05 AM.png (1×1 px, 145 KB)

I think this should be used to clear the whole input field? If you want to clear the partially typed item, you could use the delete key, seems like it would be more of a hassle to press each and every x if you wanted to clear all aliases.

  1. I think hitting comma again, or hitting enter should both be supported. Moving focus to another field should also create it.
  1. Sounds good, I'll reach out on slack
gengh moved this task from QA / Ready to close to Ready: G4. Function view on the Abstract Wikipedia team (Phase θ – Throttling) board.Oct 26 2022, 12:51 PM
• JKieserman mentioned this in T323030: Replace local chip component with codex chip component.Nov 21 2022, 8:49 PM
AAlhazwani-WMF added a subscriber: bmartinezcalvo.Nov 25 2022, 5:51 PM

JFYI GitHub Primer design system features the same exact component :) https://primer.style/react/TextInputWithTokens cc @bmartinezcalvo

bmartinezcalvo added a comment.Nov 28 2022, 10:18 AM
In T318148#8422127, @AAlhazwani-WMF wrote:

JFYI GitHub Primer design system features the same exact component :) https://primer.style/react/TextInputWithTokens cc @bmartinezcalvo

Thank you @AAlhazwani-WMF. Added this example in the "References" section in Figma so we take it into account for the Chip MVP T323524

gengh moved this task from Ready: G4. Function view to QA / Ready to close on the Abstract Wikipedia team (Phase θ – Throttling) board.Nov 28 2022, 4:44 PM
DVrandecic moved this task from Phase θ – Throttling to To triage: Nice-to-haves on the Abstract Wikipedia team board.Jan 4 2023, 11:43 PM
DVrandecic edited projects, added Abstract Wikipedia team; removed Abstract Wikipedia team (Phase θ – Throttling).
DVrandecic removed a parent task: T306450: Adjust the function editor to be mobile-friendly as well.
DVrandecic merged a task: T323030: Replace local chip component with codex chip component.Jan 6 2023, 12:54 AM
DVrandecic added a subscriber: Jdforrester-WMF.
DVrandecic added a parent task: T323030: Replace local chip component with codex chip component.Jan 6 2023, 1:30 AM
DVrandecic removed a parent task: T323030: Replace local chip component with codex chip component.
DVrandecic added a parent task: T301934: Chip component - better scrolling behavior on Windows.
DVrandecic added a subtask: T322524: [EPIC] Add Chip component to Codex.
DVrandecic reassigned this task from • SWoodruff-WMF to • JKieserman.Jan 6 2023, 1:32 AM
DVrandecic added a subscriber: • SWoodruff-WMF.
DVrandecic subscribed.

See also T323030 which was merged into this for more information.

gerritbot added a comment.Jan 26 2023, 4:26 PM

Change 833452 abandoned by Jkieserman:

[mediawiki/extensions/WikiLambda@master] update alias styles

Reason:

abandoning in favor of using the codex chip component

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

Maintenance_bot removed a project: Patch-For-Review.Jan 26 2023, 4:30 PM
ldelench_wmf closed subtask T322524: [EPIC] Add Chip component to Codex as Invalid.Feb 17 2023, 11:31 PM
• JKieserman added a comment.Apr 14 2023, 1:50 PM

@AAlhazwani-WMF - do you think we should close this ticket and open a new one for the filter chip component in codex? I think that's the only remaining plan we have here, but let me know if I'm mistaken!

AAlhazwani-WMF added a comment.Apr 14 2023, 1:53 PM

@JKieserman yes, +1!

• JKieserman added a comment.Apr 14 2023, 1:58 PM

Sweet, closing in favor of: https://phabricator.wikimedia.org/T334738

• JKieserman closed this task as Declined.Apr 14 2023, 1:59 PM
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