Page MenuHomePhabricator

MenuItem: Apply consistent font-size
Closed, ResolvedPublicBUG REPORT

Description

Background

Currently, when a menu item is used to display a search result (see demo), the font size of its label is increased a couple of pixels.
This introduces an inconsistency that reproduces a past mistake, and should be corrected.

image.png (1×1 px, 259 KB)

image.png (1×1 px, 437 KB)

Goal

All instances of MenuItem should consistently display the same base font size (of 16px in the context of the Codex demo).

Acceptance criteria
  • The MenuItem component displays the same (base) font size (1em/16px in the Codex demo) in all scenarios

Event Timeline

@Sarai-WMDE Another discrepancy between the regular label and the search-query label is the line height:

Screen Shot 2022-06-09 at 10.33.32 AM.png (188×398 px, 14 KB)
Screen Shot 2022-06-09 at 10.33.36 AM.png (180×398 px, 14 KB)

The regular label has line-height: 1.6, while the search-query label has line-height: normal plus a 2px margin-bottom. Should these be consistent, too? This would result in a slightly different look in TypeaheadSearch, which makes me think that we should maintain the current search-query line height but move those styles to TypeaheadSearch since they seem to be specific to that component.

The regular label has line-height: 1.6, while the search-query label has line-height: normal plus a 2px margin-bottom. Should these be consistent, too? This would result in a slightly different look in TypeaheadSearch, which makes me think that we should maintain the current search-query line height but move those styles to TypeaheadSearch since they seem to be specific to that component.

Sorry I missed that! The line-height should be consistent too, even in TahS. I agree that the result of applying a line-height of 1.6 and removing the 2px bottom margin makes the items and menu look slightly different due to the increased white space, but I don't think that the difference is enough to the need to make an exception in this case. Also because, in the future – and depending on the outcome of our conversations around typographic styles – we might apply a different base line-height of 1.4 em*, which would make the menu look even closer to the current version.

In any case, I'll make sure to reach out to Alex to see if he could take a look at the changes before they are merged.

Current TahSVersion with consistent MenuItemsVersion with new line-height*
Screenshot 2022-06-09 at 17.22.16.png (1×1 px, 408 KB)
Screenshot 2022-06-09 at 17.55.38.png (1×1 px, 409 KB)
Screenshot 2022-06-09 at 17.48.42.png (1×1 px, 398 KB)

Change 804422 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] SearchResultTitle: remove styles for consistency with MenuItem label

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

Change 804422 merged by jenkins-bot:

[design/codex@main] SearchResultTitle, styles: remove properties for consistency with MenuItem label

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

Sorry @Sarai-WMDE, I missed the part where you asked to hold off on merging this until you've gotten approval from Alex. For now, I've moved this into design review, and once we hear back from Alex we can handle any changes needed: if there are any, it seems like they might go in Vector, anyway.

No problem at all, @AnneT!

I think it makes sense to ping @alexhollender_WMF here, so he has all the context. Hi Alex! 👋🏻

As the title of the task indicates: we removed the overrides applied to menu suggestions in TahS to make their font-size consistent with the standard Codex menu item.
You can access the updated version of the TypeaheadSearch component here.

As a consequence:

  • Menu items will present a font-size that matches the base/body size. This means that menu titles/labels and descriptions will have a size of 14px in Vector 2022.
  • As an outcome of applying consistent styling to all menu item instances, the line-height of the text within options was increased from auto to 1.6, which introduces a bit more white space between the options' title and description. Please note that (as mentioned above) this line-height might change again soon (to 1.4) and spacing would be reduced again, once Codex's typographic styles are ready. 👈🏻 We wanted to make you aware of this and hopefully get approval from you. We'll be happy to iterate and apply any needed adjustments, either in Codex or Vector.

After receiving Alex's thumbs-up (thanks so much for checking! 🙏🏻 ) the changes were verified in the latest versions of Chrome, Safari and Firefox on MacOS Monterey, where everything's looking good. The task can be signed-off from a design pov 👍🏻

AnneT changed the task status from Open to In Progress.Jun 16 2022, 5:38 PM
AnneT removed a project: Patch-For-Review.
NHillard-WMF added a subscriber: NHillard-WMF.

Setting Owner to Desiree for Product Sign-off

DAbad triaged this task as High priority.Jul 14 2022, 2:51 PM
DAbad changed the subtype of this task from "Task" to "Bug Report".

Signing off.