Page MenuHomePhabricator

Newcomer tasks: Header font-size on Suggested Edits screen should use OOUI fieldset header style
Closed, ResolvedPublic

Description

The underlying issue may be that bespoke guidance text styles are being created instead of using the the OOUI text styles (which should automatically show different sizes for mobile versus Desktop) which was discussed on T244546#6012661:

Accordingly, this task is to update the following to use the OOUI fieldset header style with font-size Desktop 16px and Mobile 18.2px . In the case reuse is not straightforward (per @Tgr's comment T254526#6252577), create a local style equivalent
i. Task type header

Actual Desktop
Actual Mobile

ii. Quick start tips header

Actual Desktop
Actual Mobile

Event Timeline

RHo created this task.Jun 4 2020, 9:50 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 4 2020, 9:50 PM
RHo renamed this task from Newcomer tasks: Header font-size on Suggested Edits screen should be to Newcomer tasks: Header font-size on Suggested Edits screen should use OOUI fieldset header style.Jun 4 2020, 9:51 PM
Tgr added a subscriber: Tgr.Jun 24 2020, 1:26 PM

The OOUI fieldset header style is for OOUI forms. I don't think there is a sane way to reuse it elsewhere. Ideally, WikimediaUI would provide a class for header styling, but it doesn't, and OOUI does not have a header component, and even if it did, it seems wasteful performance-wise to render every piece of text with an OOUI component. So we should probably just define our own header style which will hopefully be a close enough imitation of the OOUI style.

Tgr added a comment.Jun 24 2020, 1:41 PM

As far as font size, OOUI seems to just set font-size: 1.42857144em; line-height: 1.42857143em;. Mobile / desktop differences are presumably defined higher up in the DOM. So as long as we are using relative sizes we should be good.

RHo updated the task description. (Show Details)Jun 24 2020, 1:52 PM

The OOUI fieldset header style is for OOUI forms. I don't think there is a sane way to reuse it elsewhere. Ideally, WikimediaUI would provide a class for header styling, but it doesn't, and OOUI does not have a header component, and even if it did, it seems wasteful performance-wise to render every piece of text with an OOUI component. So we should probably just define our own header style which will hopefully be a close enough imitation of the OOUI style.

That sounds fair, I've updated the task description to say we can create our own local equivalent here where reuse of OOUI header style is not straightforward.

Tgr added a comment.Jun 24 2020, 7:22 PM

So currently, the font size of the task type is calculated like this:

  • 16px (browser default)
  • 0.875em on .mw-ge-help-panel-popup .oo-ui-dialog (help panel specific modifier, desktop-only)
  • 1.144em on .suggested-edits-mobile-peek-content .suggested-edits-header-text h4, .suggested-edits-panel-header .suggested-edits-header-text h4

So that works out to 16px on desktop and 18.3px on mobile, as expected.

And for the "Quick start tips" header:

  • 16px (browser default)
  • 0.875em on .mw-ge-help-panel-popup .oo-ui-dialog (help panel specific modifier, desktop-only)
  • 116% (desktop) / 100% (mobile) on h4 (Vector / Minerva tag default)

which works our as 16px on both. So font-size: 1.144em will achieve the expected size, although that will only work within the help panel.

Change 607608 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Pin h4 font-size in help panel

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

Tgr claimed this task.Jun 24 2020, 7:51 PM

Change 607608 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Pin h4 font-size in help panel

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

Etonkovidova added a subscriber: Etonkovidova.

Checked in betalabs - looks fine;

font-size: 1.144em makes to` desktop suggested-edits-task-explanation-heading 16.016` to mobile suggested-edits-task-explanation-heading 18.304

DesktopMobile
MMiller_WMF closed this task as Resolved.Jun 30 2020, 4:59 PM

Thank you!