Looks good, although in this example I think the icons need to move down a few pixels, so they top align with the actual start of the text:

Hey, @Esanders. That's right! The screenshots added in the description were taken from the Codex demo site, after modifying the alignment of the icons via dev tools. I left a note outlining the same issue you noticed:

Just changing the item's alignment from center to top or baseline makes the icons to not appear correctly center aligned with their corresponding labels (see screenshot above). We should find a way to correct this.

But I believe that I should include a proper design displaying the right alignment in the 'Goal' section, instead of leaving that messy screenshot there. Otherwise, it'd be confusing. Thanks!

This Figma branch documents the new icon and thumbnail alignment in MenuItem and is up to be discussed by the Pattern lab team. Att. @bmartinezcalvo and @Volker_E, your feedback would be very much appreciated.

Please note that we should make an exception with thumbnails. These should be treated differently, and stay center-aligned with options' text within MenuItem to avoid creating irregular spacing/ misalignment:

If you have variable height text you will get irregular spacing regardless of using top or centre alignment. I think we should still top align thumbnails, and don't see a particular reason why they should be treated differently from icons. We top-align a thumbnail in VE's link context (although where there is only ever one item):

Agreed! Thanks @Esanders. Task description was updated.

In T306525#7976104, @Sarai-WMDE wrote:

This Figma branch documents the new icon and thumbnail alignment in MenuItem and is up to be discussed by the Pattern lab team. Att. @bmartinezcalvo and @Volker_E, your feedback would be very much appreciated.

@Sarai-WMDE I added some small comments in Figma but I think in general this branch is all right.

The comments were tackled (thanks as always, Bárbara!) and the branch was merged. I added a link to the relevant design specs in the task's description.

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

[design/codex@main] [WIP] MenuItem: Align icon and thumbnail to top, not center

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

Hi @Sarai-WMDE , shall we add this task to the sprint board?

@Sarai-WMDE you can check out the demo for the WIP patch here

Aligning icons and text to the top gets tricky when you scale font size, and really requires scaling the icon size with font size to maintain perfect alignment. For example, if the icon is always 20px by 20px, and I set a margin-top of 0.25em on the icon to align it with the text, it looks perfect at a 16px font-size:

...But then if I scale up the font size to 32px, you can see that the margin-top is not large enough:

Obviously this is exaggerated at such a large font-size, but we would be getting a subtle misalignment at, for example, a 14px font size in MediaWiki.

The solution I also used in the Message component was to scale the icon size with font size, which gets you this at 32px:

My questions are:

1. Is this an appropriate solution for icons? My understanding is that we're generally not scaling icons, but it seems like the best solution to me in this instance (as with the Message icon).
2. What about thumbnails? Scaling up thumbnails would require us to set a relative size for the "search figure," which is the size of the input icon container, the footer icon container, and the thumbnails in TypeaheadSearch (in order to keep those things in alignment with the thumbnails). For what it's worth, thumbnails are relatively sized in the VE link example Ed posted above.

Happy to share my screen and talk about this together at our meeting next Tuesday if that's easier!

Thanks so much for the detailed explanation and screenshots! Definitely this change makes the issue more apparent, but not scaling icons was going to cause problems whenever font sizes are modified, regardless of alignment

Why would we apply a fixed size to icons and keep them small, when the reason someone would increase their font size might be due to a visual impairment? Applying relative sizes to icons seems key to maintain alignment and legibility, so I'd be all for defining these (together with min-width and min-height) for icons and thumbnails: so, yes to both question on my end. Nevertheless, I'd like to get @Volker_E's point of view here, as I might be disregarding important caveats.

Anne, I'm really sorry, but I just realized that I left something out when I included Thumbnails in the task again. I believe we discussed this during a design/engineering meeting, and that we found it feasible: in lack of a description, thumbnails and menu item labels /titles should be center-aligned to avoid introducing that extra white space under the title. Would this be doable? I guess this might involve changing the approach and maybe using a grid display instead? But I'm not sure.

Happy to jump in a call on Tuesday to discuss all this.

but not scaling icons was going to cause problems whenever font sizes are modified, regardless of alignment

+1, I think having oversized text in a MenuItem is an edge case and requiring a bit of tweaking to maintain a sensible alignment is probably not unreasonable. You would have a similar issue with a MessageWidget in OOUI right now: http://localhost/oojs/ui/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop

@Sarai-WMDE based on our conversations today, I've updated the patch to remove the margin-top placed on the icon and thumbnail, and adjusted the line-height of the MenuItem content to 1.375 (which is 20/16, same as the design spec). Please take a look at the demos not only for a single MenuItem, but for a menu of MenuItems and TypeaheadSearch, specifically. Let me know if you have any further feedback!

Change 804451 merged by jenkins-bot:

[design/codex@main] MenuItem: Align icon and thumbnail to top with description

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

The changes were reviewed in the MenuItem, Select and TypeaheadSearch demos. The alignment between icon and text was correctly maintained under a combination of conditions: increasing the length of item labels to make them wrap, increasing the size of their font, and/or rounding up line height to 1.4 (see comment below). Browsers used: Safari 15.5, Firefox 101 and Chrome v.102.

The center alignment of thumbnails and single menu item labels was also verified. Thank you, @AnneT!

The task can be signed-off from a design perspective.

Leaving here a couple of notes for visibility:

• Line-height: Even if the implementation now correctly translates the px line-height used in the designs, this value will be subject to change once typography tokens are ready. Most likely, that new value will be 1.4, which wouldn't have a noticeable impact on alignment thanks to the relative approach to sizing taken in this patch.
• Thumbnails: Tests made really apparent the need to apply relative sizing to these elements. This way, MenuItems would keep the right proportions and alignment in case fonts are increased.

Looks good to me.

{F35265874}

Part of Codex alpha 8 release

Signing off.