Change 682914 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Popups@master] Make checkboxes use upstream mediawiki.ui.… styles

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

This is how it looks like with the first patch https://gerrit.wikimedia.org/r/682914: F34429776

This is not actually OOUI, but this is intentional. These styles are from MediaWiki core and easily available to the Popups extension. Actually, the blue save button already uses the same styles. This patch is meant as a first step. A next patch should try to change the entire dialog to use OOUI, if this is even possible.

The one open question I have is about the font sizes.

A next patch should try to change the entire dialog to use OOUI, if this is even possible.

We should not introduce OOUI into this repository. We (web team) are being recommended to move away from that library to Vue.js and in the interest of consistency across our codebases, we are trying to converge on Vue.js and Mustache templates for UI building for now. (Also I imagine the performance penalty here makes it prohibitive to do so)

For comparison, this is how the dialog looks right now. The checkboxes are the native ones from Chrome.

With the patch https://gerrit.wikimedia.org/r/682914. I tried to make the font sizes as consistent as possible (14px for the labels, same as the button, same as on the preferences page), while not making the CSS to much of a mess. That's also the reason why the gray fine print is also 14px.

For comparison, this is how the checkboxes and labels look like on the preferences page:

@ECohen_WMDE, FYI.

@thiemowmde Thanks for the screenshots. I think that's good enough, especially if the eventual plan is to skip OOUI and move onto Vue.js. Thanks @Jdlrobson for sharing. Looks like we will need to learn more about these recommendations for our work in general.

The checkboxes look better and the text is alright. If it didn't introduce much complexity, I would say it's better for the label to be bigger but at least the bold/gray still gives the text some hierarchy. At a glance it's clear which are the labels and which are the descriptions, so if this is much simpler I would leave it as-is.

Looks good!

Change 682914 merged by jenkins-bot:

[mediawiki/extensions/Popups@master] Make checkboxes use upstream mediawiki.ui.… styles

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