Page MenuHomePhabricator

[XL] Improve how categories field is displayed in the upload wizard
Closed, ResolvedPublic

Assigned To
Authored By
Sneha
Mar 26 2024, 7:35 PM
Referenced Files
Restricted File
May 22 2024, 5:37 PM
F54142785: spacing.png
May 22 2024, 5:34 PM
F54142854: current spacing.png
May 22 2024, 5:34 PM
F54100563: Screen Shot 2024-05-21 at 5.16.21 PM.png
May 22 2024, 1:03 AM
F54100554: Screen Shot 2024-05-21 at 5.16.13 PM.png
May 22 2024, 1:03 AM
F54100062: Screen Shot 2024-05-21 at 5.02.54 PM.png
May 22 2024, 12:57 AM
F54100049: Screen Shot 2024-05-21 at 5.03.13 PM.png
May 22 2024, 12:57 AM
F54099806: Screen Shot 2024-05-21 at 5.48.19 PM.png
May 22 2024, 12:57 AM

Description

This task is part of improving the describe step of the Upload Wizard on Commons T358765.

As part of this ticket we will be making some improvements to the way category field and its input is displayed. Further improvements are captured in T361149 which will require community consultation.

Link to UI
  • Add the "Additional information" label and label description as shown in the UI (the "Additional information" section will be under the date field until it is moved to release right step)
  • Move the categories field under the "Additional information" grouping as shown in the design
    • Add the label and label description for the categories input field as shown in the design
    • Show the optional label next to the category field label. Users can proceed without entering categories.
    • Add the search input field with an example as shown in the design
    • Allow users to select category from an autocomplete list of categories
    • Users can create new categories by hitting enter after they finish typing
    • When the user hits enter after typing or selects a category from drop down, the category will be added as row below a chip within the input as shown here
      • Existing categories have a blue link that users can click on to view the category page
    • When user enters a non-existing category show the category in red as shown here
      • Non-existing categories have red link that users can click on which allows users to enter description
      • When the user enters a non-existing category show the warning message as shown here
    • Categories can be removed by clicking on the cross

AC added while work in progress

  • Remove existing warning and dialog for filling out categories. See comment

Event Timeline

Sneha renamed this task from Improve the categories field interaction in the upload wizard to Improve the Categories field interaction in the upload wizard.Mar 26 2024, 7:41 PM
Sneha renamed this task from Improve the Categories field interaction in the upload wizard to Updates to how categories field is displayed in the upload wizard.Mar 27 2024, 7:18 PM
Sneha updated the task description. (Show Details)
Sneha renamed this task from Updates to how categories field is displayed in the upload wizard to Improve how categories field is displayed in the upload wizard.Apr 3 2024, 8:47 PM
Sneha updated the task description. (Show Details)
MarkTraceur renamed this task from Improve how categories field is displayed in the upload wizard to [XL] Improve how categories field is displayed in the upload wizard.Apr 4 2024, 8:53 PM
mfossati changed the task status from Open to In Progress.Apr 30 2024, 9:27 AM
mfossati claimed this task.

@mfossati just noticed the issue Elena mentioend in T364593. See point no.3. It seems like we currently have a warning saying "it is recommended to fill the categories" followed by a dialog. As per the new design these warnings and dialog needs to be removed since we are already saying categories are optional. It was not included in AC but adding a note here so they can be removed.

Change #1031838 had a related patch set uploaded (by Marco Fossati; author: Marco Fossati):

[mediawiki/extensions/UploadWizard@master] Describe step: revamp additional information & categories

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

Change #1031838 merged by jenkins-bot:

[mediawiki/extensions/UploadWizard@master] Describe step: revamp additional information & categories

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

@Sneha - in production there is additional warning when a user removes categories, i.e.

  • a user adds categories
  • a user clicks on 'x' to remove all categories

The following inline warning appears:

Screen Shot 2024-05-21 at 5.36.43 PM.png (620×1 px, 102 KB)

Is it ok that commons beta doesn't have it?

For @Sneha review/sign-off:
(1) In Category (optional) and Location (optional) labels, the font for optional looks larger than in the figma design

figma designcommons beta
Screen Shot 2024-05-21 at 5.47.47 PM.png (814×1 px, 130 KB)
Screen Shot 2024-05-21 at 5.48.19 PM.png (810×1 px, 186 KB)

(2) x icon size ion beta commons is larger on commons production

commons productioncommons beta
Screen Shot 2024-05-21 at 5.03.13 PM.png (550×1 px, 100 KB)
Screen Shot 2024-05-21 at 5.02.54 PM.png (406×1 px, 107 KB)

Note: The footer (the license for caption info) displays not-properly styled text. It's a known issue (present only on beta); was reported to the Web team.

commons productioncommons beta
Screen Shot 2024-05-21 at 5.16.13 PM.png (520×1 px, 84 KB)
Screen Shot 2024-05-21 at 5.16.21 PM.png (488×2 px, 96 KB)

@Etonkovidova these don't seem like blockers but would be nice to refine them.

Tagging @mfossati and @matthiasmullie as well

  1. "optional" text size should be the same as the title text size. If it is already the same size then its okay but looks slightly bigger as pointed our above. Also it looks slightly darker than it is in Figma.
  1. and 3) I think this we can ignore as it seems to look fine in production.

Also the spacing around the "Additional information" label's description needs to be fixed

In the current spacing it seems like there is equal amount of spacing above and below the description line "Add the following to make your work more discoverable. Be as specific as you can."
This line should be closer to the title "Additional information" and more space under it.

current spacing.png (672×1 px, 97 KB)

Correct spacing
{F54143206}

@Sneha - I filed a new tasks for those two minor issues that you mentioned as needed to be fixed - T365662: UploadWizard - Describe step UI issues.

Etonkovidova closed this task as Resolved.EditedMay 30 2024, 5:17 PM

Checked in production (commons wmf.7) and added the existing, non-blocking UI issues to T365662: UploadWizard - Describe step UI issues (there are more minor issues summarized in T364593: [QA task] UploadWizard - testing Describe step .