Page MenuHomePhabricator

[minor-mobile] Newcomer homepage module should use the equivalent 'arrow previous' icon as the 'arrow next' in the module preview
Closed, ResolvedPublicDesign

Description

This task fixes a visual oversight whereby there is a mismatched pairing of forward and back icons used on the module preview vs the module screen on mobile.

Current:

image.png (542×1 px, 281 KB)
(arrowNext paired with previous chevron)

Expected:

image.png (148×1 px, 39 KB)
(arrowNext paired with arrowPrevious)

Event Timeline

RHo triaged this task as Low priority.Mar 9 2021, 12:59 PM
RHo created this task.

Can i work on it .I will must Solve This.

from where I can edit this code ???

Hey, @Aklapper I want to work on this issue, could you please guide me further about it.

@VartikaS12: Hi and welcome. Please read the previous comment - thanks.

Hi there. Can I try working on this one?

Change 888054 had a related patch set uploaded (by DMburugu; author: DMburugu):

[mediawiki/extensions/GrowthExperiments@master] Change icon value to use arrowNext so as to be Mockup compliant

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

Change 888055 had a related patch set uploaded (by DMburugu; author: DMburugu):

[mediawiki/extensions/MobileFrontend@master] Add support for the arrowNext icon

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

The modules from Special:Homepage are displayed on mobile devices using MobileFrontend's overlay system. Other mobile interfaces make use of MobileFrontend's overlay system as well (e.g. overlays used during the editing process). @RHo For design consistency with those overlays, should we consider changing the arrowNext icon to use next?

Otherwise, the patches here LGTM: they add support for using arrowPrevious in MobileFrontend (cc @Jdlrobson) and then make use of that icon for Special:Homepage modules.

@RHo iIs there a reason the growth overlay shouldn't match the editor for example?
What would the guidelines be around using this arrow vs the existing arrow in the editor, more example?

Screen Shot 2023-02-15 at 2.57.23 PM.png (1×2 px, 407 KB)

Put another way:

  • Is the Growth overlay how we want overlays to look going forward?

OR

  • Is the Growth overlay a special kind of overlay that we treat differently for some reason?

This is a small change, but it's important for the web team to pin down the thought process, as the design systems team are building out a Dialog component, and it's important the web team understand and document the existing use cases in mobile to influence it's design so that we don't unwittingly break anything later on. The mobile code is being neglected, so I'd much rather we updated all overlays rather than one isolated overlay if that's the goal here.

@RHo iIs there a reason the growth overlay shouldn't match the editor for example?
What would the guidelines be around using this arrow vs the existing arrow in the editor, more example?

Screen Shot 2023-02-15 at 2.57.23 PM.png (1×2 px, 407 KB)

Put another way:

  • Is the Growth overlay how we want overlays to look going forward?

OR

  • Is the Growth overlay a special kind of overlay that we treat differently for some reason?

This is a small change, but it's important for the web team to pin down the thought process, as the design systems team are building out a Dialog component, and it's important the web team understand and document the existing use cases in mobile to influence it's design so that we don't unwittingly break anything later on. The mobile code is being neglected, so I'd much rather we updated all overlays rather than one isolated overlay if that's the goal here.

Hi @Jdlrobson - thanks for the question. IIRC, the intention was that the arrowPrev and previous was because the mobile module for Suggested edits here is meant to be a separate page rather than a dialog over the homepage but implementation decision to use fullscreen dialogs meant that the standard chevron was used instead.

While we may move to Codex at some point, whether chevrons/arrows/close icons for full screen dialogs in mobile is still not completely clear yet (see T321893), and it may be that this Growth mobile module could be considered a different type of component.

In other words, I would be more inclined to answer your question, treat these Growth overlays when they are mobile homepage modules as special, rather than these being overlays for all in future. So hopefully that also answers @kostajh your questions about not updating the mobile editing overlays.

Change 891611 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/GrowthExperiments@master] Add previous arrow to GrowthExperiments

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

Change 891611 abandoned by Kosta Harlan:

[mediawiki/extensions/GrowthExperiments@master] Add previous arrow to GrowthExperiments

Reason:

squashed into Id5e77556d4253f5b1aed4ce17d69a3aa2b18165e

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

Change 888055 abandoned by Kosta Harlan:

[mediawiki/extensions/MobileFrontend@master] icons: Add support for arrowPrevious icon

Reason:

Jon helped implement this entirely within GrowthExperiments, in Id5e77556d4253f5b1aed4ce17d69a3aa2b18165e

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

Change 888054 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Homepage: Use arrowPrevious icon for mobile overlay consistency

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

Etonkovidova subscribed.

Checked in betalabs (and on testwiki wmf.26) - no issues.

Screen Shot 2023-03-03 at 12.02.06 PM.png (630×526 px, 93 KB)
Screen Shot 2023-03-03 at 12.01.56 PM.png (1×604 px, 266 KB)

Other modules also have pairing arrows; major browsers compatibility check is done also.

Etonkovidova claimed this task.