Page MenuHomePhabricator

Embedded buttons in dialogs lack padding
Open, LowPublic

Description

The buttons that are embedded in dialogs (as in the quick confirm example from the demo page) seem to lack padding.

When using actions that indicate the outcome of the decision (instead of the generic "ok"), it is easy for the label to touch the borders of the button as shown below:

2018-10-18 11.07.26.jpg (258×457 px, 25 KB)

Specifying some padding could help preserve that space in these cases, but also for translations to languages with longer words.

Event Timeline

I think the buttons do have padding defined, but the dialogs are fixed width and the labels have no-wrap. We also have a vertical layout for buttons as seen in the demos:

image.png (249×318 px, 13 KB)

  1. Use the vertical layout when you think your messages might be too long (easiest fix, downtream)
  2. Make the button layout responsive based on the width of the labels
  3. Make the dialog width responsive based on the width of the dialog

The solutions here are one of two ways:

  • Amending the dialog width or
  • Shorten the dialog primary action button label “Restart” or “Restart translation”.

This is not an upstream issue from my point of view.

The solutions here are one of two ways:

  • Amending the dialog width or
  • Shorten the dialog primary action button label “Restart” or “Restart translation”.

This is not an upstream issue from my point of view.

The proposed solutions could also be broken in some other languages. If we increase the width, nothing guarantees some translation will not match that new width like English text matches current width. Same goes if we change the wording in English.

We should not increase the width when (probably) only problematic language is English. For example, nothing is wrong currently in German:

german-restart-translation-dialog.png (266×303 px, 9 KB)

So it looks like we already do this:

Use the vertical layout when you think your messages might be too long (easiest fix, downtream)

But that the calculation for when we need to switch to the vertical layout is incorrect (doesn't account for padding). That would make this an upstream OOUI issue.

Change 574006 had a related patch set uploaded (by Esanders; owner: Esanders):
[oojs/ui@master] WMUI: Add horizontal padding to MessageDialog buttons

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

Monkey-patched the above into CX and the dialog correctly changed to vertical for English:

image.png (240×336 px, 14 KB)

Change 574006 merged by jenkins-bot:
[oojs/ui@master] WMUI: Add horizontal padding to MessageDialog buttons

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

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

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

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

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