Page MenuHomePhabricator

Make settings dialog elements (checkboxes and buttons) use OOUI styles
Closed, ResolvedPublic2 Estimated Story Points

Description

We want the UI elements in the settings dialog to follow the OOUI style guide. Note this is not only about the checkboxes. The buttons at the top don't fully follow the OOUI style guide as well.

This was originally meant to be part of T265709: Merge Page Preview and Reference Preview preferences, but split off into this separate task because of technical difficulties. The extension is build to be extremely independent. It appears it can't make use of actual OOUI elements because of this.

Note this is not a Regression. The two Save/Done buttons always looked like this. The two Enable/Disable radio buttons always used the browser's default styling.

Event Timeline

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.

Jdlrobson added a subscriber: Jdlrobson.

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.

Screenshot from 2021-04-28 09-19-47.png (232×468 px, 22 KB)

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.

Screenshot from 2021-04-28 09-18-57.png (244×455 px, 24 KB)

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

Screenshot from 2021-04-28 09-18-23.png (163×376 px, 28 KB)

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

Lena_WMDE set the point value for this task to 2.

Change 682914 merged by jenkins-bot:

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

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