Page MenuHomePhabricator

Support a new "close" flag (distinct from "back") in OOUI dialogs
Closed, ResolvedPublic

Description

Then on mobile we can style close actions as "X" instead of "<".

Multi-page dialogs, such as media or citoid, flag both cancel and back as "back". If we introduce a new flag "close" or "cancel", we can styles these differently on mobile.

There is special code on mobile to replace the label of a back-flagged action with an icon-only button "<":

Details

Related Gerrit Patches:
mediawiki/core : masterUpdate OOUI to v0.33.3
mediawiki/extensions/Citoid : masterDialogs: Use close flag for close actions
mediawiki/extensions/VisualEditor : masterMWSaveDialog: Use close flag for close actions, move 'back' button
oojs/ui : masterProcessDialog: Make "back" buttons icon-only on desktop too
mediawiki/extensions/VisualEditor : masterDialogs: Use close flag for close actions
mediawiki/extensions/Cite : masterDialogs: Use close flag for close actions
mediawiki/extensions/VisualEditor : masterMWMediaDialog: Use close flag for close action
mediawiki/extensions/VisualEditor : masterUpdate VE core submodule to master (681aa3fbc)
VisualEditor/VisualEditor : masterDialogs: Use close flag for close actions
mediawiki/core : masterUpdate OOUI to v0.33.0
oojs/ui : masterProcessDialog: Keep labels for screen readers on mobile
oojs/ui : masterAdd 'close' action flag and use close icon on mobile

Event Timeline

Esanders created this task.Jun 4 2019, 8:11 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 4 2019, 8:11 PM
Esanders updated the task description. (Show Details)Jun 4 2019, 8:13 PM

Change 515781 had a related patch set uploaded (by Esanders; owner: Esanders):
[oojs/ui@master] Add 'close' action flag and use close icon on mobile

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

Change 516274 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/VisualEditor@master] Dialogs: Use close flag for close actions

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

Change 516275 had a related patch set uploaded (by Esanders; owner: Esanders):
[VisualEditor/VisualEditor@master] Dialogs: Use close flag for close actions

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

Change 516276 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Cite@master] Dialogs: Use close flag for close actions

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

Change 515781 merged by jenkins-bot:
[oojs/ui@master] Add 'close' action flag and use close icon on mobile

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

matmarex moved this task from Incoming to Stalled/Waiting on the VisualEditor (Current work) board.

Waiting for OOUI release.

Volker_E moved this task from Backlog to OOUI-0.33.0 on the OOUI board.Jun 11 2019, 9:56 PM
Volker_E edited projects, added OOUI (OOUI-0.33.0); removed OOUI.

Change 517773 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] ProcessDialog: Add labels for screen readers

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

Change 517773 merged by jenkins-bot:
[oojs/ui@master] ProcessDialog: Keep labels for screen readers on mobile

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

Change 519341 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.33.0

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

Change 519341 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.33.0

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

Jdforrester-WMF added a subscriber: Jdforrester-WMF.

This feature change has landed in MediaWiki 1.34.0-wmf.13. Note that although icons are used for the "close"/"back" state on all ProcessDialogs now, including on desktop, the differentiation between "close" and "back" is mobile-only for now. Is that still how this is wanted?

Change 516275 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] Dialogs: Use close flag for close actions

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

Change 519712 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (681aa3fbc)

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

Change 520001 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] MWMediaDialog: Use close flag for close action

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

Change 519712 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (681aa3fbc)

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

Change 520004 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] MWSaveDialog: Use close flag for close actions

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

Change 520001 abandoned by Esanders:
MWMediaDialog: Use close flag for close action

Reason:
Duplicate of I67b8474b0662f8dbc23c1b5ff883e3d4093bdbd4

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

Change 520001 restored by Bartosz Dziewoński:
MWMediaDialog: Use close flag for close action

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

Note that although icons are used for the "close"/"back" state on all ProcessDialogs now, including on desktop, the differentiation between "close" and "back" is mobile-only for now. Is that still how this is wanted?

Actually it is the opposite? And either way seems pretty weird to me. I think some wires got cross between this task and T226045.

The current behavior is:

  • 'close' flag replaces label with "X" icon, on mobile and desktop
  • 'back' flag replaces label with "<" icon on mobile only, it does nothing on desktop

I would have expected the 'back' flag to also have an effect on desktop. Otherwise multi-step dialogs where you can click "back" and then it turns into a "close" look silly.

Change 520001 abandoned by Bartosz Dziewoński:
MWMediaDialog: Use close flag for close action

Reason:
Duplicate of Ifd0cb40031c2717cc0716f98a27c124f54709003

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

Change 516276 merged by jenkins-bot:
[mediawiki/extensions/Cite@master] Dialogs: Use close flag for close actions

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

Change 516274 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Dialogs: Use close flag for close actions

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

ping @Jdforrester-WMF @Volker_E @Esanders

The current behavior is:

  • 'close' flag replaces label with "X" icon, on mobile and desktop
  • 'back' flag replaces label with "<" icon on mobile only, it does nothing on desktop

I would have expected the 'back' flag to also have an effect on desktop. Otherwise multi-step dialogs where you can click "back" and then it turns into a "close" look silly.

This really is extremely silly. Consider the VE insert media dialog:

On the VE save dialog:

The close button also is now frameless. I can't tell if it is intentional but this also looks very poor, especially if the label is long.

Change 521929 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@master] ProcessDialog: Make "back" buttons icon-only on desktop too

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

Change 521945 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Citoid@master] Dialogs: Use close flag for close actions

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

@matmarex “Back” isn't always just labelled “back” as T226822#5322437 tells us.
In order to change back over to left-pointing arrow we need to make sure that

  • this is meeting user expectations and not confusing (my guess is, that's fulfilled, but all of you know every dialog in VE better)
  • we're consistently applying invisibleLabel
  • we consider adding a title to the icon only action

The close button also is now frameless. I can't tell if it is intentional but this also looks very poor, especially if the label is long.

“poor” is hard to quantify. If you refer to more asymmetry, I kinda see your poinit, but ProcessDialog was putting too many actionable things on too many places in ProcessDialogs. And for a number of reasons laid out at T226045 a 'close' icon treatment is preferable.

Volker_E added a comment.EditedJul 11 2019, 3:03 PM
VE Insert Media Dialog Desktop beforeafter

@Esanders “Distiniguish” as title seems inappropriate now.

Can you update the screenshot with the correct icon ('previous')?

Esanders renamed this task from Distinguish "back" from "close" actions in OOUI dialogs to Support a new "close" flag (distinct from "back") in OOUI dialogs.Jul 11 2019, 7:14 PM

Change 521929 merged by jenkins-bot:
[oojs/ui@master] ProcessDialog: Make "back" buttons icon-only on desktop too

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

Change 520004 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] MWSaveDialog: Use close flag for close actions, move 'back' button

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

Change 521945 merged by jenkins-bot:
[mediawiki/extensions/Citoid@master] Dialogs: Use close flag for close actions

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

matmarex moved this task from Inbox to Low Priority on the Editing QA board.Jul 15 2019, 11:32 PM

Change 523823 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.33.3

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

Change 523823 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.33.3

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

  • we consider adding a title to the icon only action

I just thought the same. The label text exists and is used for screenreaders, so why not add it as title, too, now that icon only buttons are used on desktop?

ppelberg closed this task as Resolved.Oct 9 2019, 1:00 AM
ppelberg claimed this task.