Maniphest T207369

Embedded buttons in dialogs lack padding
Open, LowPublic
Actions

Assigned To

None

Authored By

	Pginer-WMF
	Oct 18 2018, 9:19 AM

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.

Details

	Subject	Repo	Branch	Lines +/-
	Update OOUI to v0.37.0	mediawiki/core	master	+144 -91
	WMUI: Add horizontal padding to MessageDialog buttons	oojs/ui	master	+29 -1

Customize query in gerrit

Related Objects

Mentioned In: T168287: CX2: Warning about article having changed too much

Event Timeline

Pginer-WMF created this task.Oct 18 2018, 9:19 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 18 2018, 9:19 AM

Pginer-WMF mentioned this in T168287: CX2: Warning about article having changed too much.Oct 18 2018, 9:22 AM

• Petar.petkovic added a project: OOUI.Oct 18 2018, 9:39 AM

Nikerabbit subscribed.Oct 18 2018, 2:39 PM

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:

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

Volker_E triaged this task as Low priority.Oct 29 2018, 4:39 AM

• Petar.petkovic merged a task: T211733: [wmf.8] "Restart the translation" label needs additional margins.Dec 12 2018, 8:03 AM

• Petar.petkovic added subscribers: Etonkovidova, • Petar.petkovic.

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.

In T207369#4983339, @Volker_E wrote:

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)

Pginer-WMF moved this task from Needs Triage to Bugs on the ContentTranslation board.Apr 22 2019, 1:51 PM

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.

Esanders added a project: OOUI.Feb 21 2020, 2:43 PM

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

gerritbot added a project: Patch-For-Review.Feb 21 2020, 3:10 PM

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

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

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

Maintenance_bot removed a project: Patch-For-Review.Feb 21 2020, 6:11 PM

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

gerritbot added a project: Patch-For-Review.Feb 27 2020, 2:26 AM

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