Page MenuHomePhabricator

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

Assigned To
Authored By
Esanders
Jun 4 2019, 8:11 PM
Referenced Files
F29739400: image.png
Jul 11 2019, 3:03 PM
F29739395: image.png
Jul 11 2019, 3:03 PM
F29732704: image.png
Jul 10 2019, 7:18 PM
F29732726: image.png
Jul 10 2019, 7:18 PM
F29732723: image.png
Jul 10 2019, 7:18 PM
F29429002: image.png
Jun 10 2019, 2:55 PM
F29343661: image.png
Jun 4 2019, 8:13 PM

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 "<":

image.png (178×535 px, 13 KB)

Event Timeline

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

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 subscribed.

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:

image.png (980×1 px, 150 KB)
image.png (980×1 px, 159 KB)

On the VE save dialog:

image.png (980×1 px, 217 KB)

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.

VE Insert Media Dialog Desktop beforeafter
image.png (942×1 px, 432 KB)
image.png (942×1 px, 430 KB)

@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

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 claimed this task.