Change Details

As @AnneT pointed our [[https://gerrit.wikimedia.org/r/c/design/codex/+/848923/comment/524e7d3c_82ec3bc4/|on Gerrit]], a recent change applying `line-height` tokens in TypeaheadSearch changed the design and caused a mismatch. But even before that, we already weren't following the design correctly. We should fix both of those things. Currently (after the recent line-height change), the line-height used for the text in the menu items in TypeaheadSearch is `@line-height-small`, which corresponds to 22px (assuming a base font size of 14px, which is what Vector uses). Before the change, it was 19.25px. The Figma spec sheet says it should be 20px. This increase in line-height means that the text next to the thumbnail (two lines) is now 2*22=44px tall, up from 2*19.25=38.5px. The thumbnail is 40px tall (or 42px, see below), so changing the height of the text from 38.5px to 44px means that now the text, not the thumbnail, is the tallest thing in the menu item and controls its height. This causes the overall height of the menu item to increase. In the Figma spec, these two heights match: the thumbnail is 40px tall, and the text is also 40px (2*20px). The thumbnail in each menu is set to be 40x40px. On the Codex demo site, this 40x40 measurement includes the borders (so the image itself is 38x38, and its total size including borders is 40x40), because Vitepress sets `box-sizing: border-box` everywhere. However, our code doesn't set `border-box` itself, so it's missing in a MediaWiki environment. This means that in Vector, the thumbnail is 40x40 not including borders, and its total size is 42x42. The Figma spec has the former (40x40 including borders). The other styles assume that the width of the thumbnail is 40px (even though it's 42px), which leads to a misalignment in Vector: {F35704506} [ ] Change the line-height for the MenuItem text to `@line-height-x-small`(=20px) [ ] Apply `box-sizing: border-box` to the thumbnail, so that its height is always 40px, even in Vector [ ] Update Vector's styles where needed; for example, [[https://github.com/wikimedia/Vector/blob/cdd5fd595047b010b431589178b7c53f61ba7274/resources/skins.vector.styles/components/SearchBoxLoader.less#L38-L41|this calculation]] will need to be updated to no longer add the thumbnail borders

As @AnneT pointed our [[https://gerrit.wikimedia.org/r/c/design/codex/+/848923/comment/524e7d3c_82ec3bc4/|on Gerrit]], a recent change applying `line-height` tokens in TypeaheadSearch changed the design and caused a mismatch. But even before that, we already weren't following the design correctly. We should fix both of those things. Currently (after the recent line-height change), the line-height used for the text in the menu items in TypeaheadSearch is `@line-height-small`, which corresponds to 22px (assuming a base font size of 14px, which is what Vector uses). Before the change, it was 19.25px. The Figma spec sheet says it should be 20px. This increase in line-height means that the text next to the thumbnail (two lines) is now 2*22=44px tall, up from 2*19.25=38.5px. The thumbnail is 40px tall (or 42px, see below), so changing the height of the text from 38.5px to 44px means that now the text, not the thumbnail, is the tallest thing in the menu item and controls its height. This causes the overall height of the menu item to increase. In the Figma spec, these two heights match: the thumbnail is 40px tall, and the text is also 40px (2*20px). The thumbnail in each menu is set to be 40x40px. On the Codex demo site, this 40x40 measurement includes the borders (so the image itself is 38x38, and its total size including borders is 40x40), because Vitepress sets `box-sizing: border-box` everywhere. However, our code doesn't set `border-box` itself, so it's missing in a MediaWiki environment. This means that in Vector, the thumbnail is 40x40 not including borders, and its total size is 42x42. The Figma spec has the former (40x40 including borders). The other styles assume that the width of the thumbnail is 40px (even though it's 42px), which leads to a misalignment in Vector: {F35704506} [x] Change the line-height for the MenuItem text to `@line-height-x-small`(=20px) [ ] Apply `box-sizing: border-box` to the thumbnail, so that its height is always 40px, even in Vector [ ] Update Vector's styles where needed; for example, [[https://github.com/wikimedia/Vector/blob/cdd5fd595047b010b431589178b7c53f61ba7274/resources/skins.vector.styles/components/SearchBoxLoader.less#L38-L41|this calculation]] will need to be updated to no longer add the thumbnail borders

As @AnneT pointed our [[https://gerrit.wikimedia.org/r/c/design/codex/+/848923/comment/524e7d3c_82ec3bc4/|on Gerrit]], a recent change applying `line-height` tokens in TypeaheadSearch changed the design and caused a mismatch. But even before that, we already weren't following the design correctly. We should fix both of those things. Currently (after the recent line-height change), the line-height used for the text in the menu items in TypeaheadSearch is `@line-height-small`, which corresponds to 22px (assuming a base font size of 14px, which is what Vector uses). Before the change, it was 19.25px. The Figma spec sheet says it should be 20px. This increase in line-height means that the text next to the thumbnail (two lines) is now 2*22=44px tall, up from 2*19.25=38.5px. The thumbnail is 40px tall (or 42px, see below), so changing the height of the text from 38.5px to 44px means that now the text, not the thumbnail, is the tallest thing in the menu item and controls its height. This causes the overall height of the menu item to increase. In the Figma spec, these two heights match: the thumbnail is 40px tall, and the text is also 40px (2*20px). The thumbnail in each menu is set to be 40x40px. On the Codex demo site, this 40x40 measurement includes the borders (so the image itself is 38x38, and its total size including borders is 40x40), because Vitepress sets `box-sizing: border-box` everywhere. However, our code doesn't set `border-box` itself, so it's missing in a MediaWiki environment. This means that in Vector, the thumbnail is 40x40 not including borders, and its total size is 42x42. The Figma spec has the former (40x40 including borders). The other styles assume that the width of the thumbnail is 40px (even though it's 42px), which leads to a misalignment in Vector: {F35704506} [ x] Change the line-height for the MenuItem text to `@line-height-x-small`(=20px) [ ] Apply `box-sizing: border-box` to the thumbnail, so that its height is always 40px, even in Vector [ ] Update Vector's styles where needed; for example, [[https://github.com/wikimedia/Vector/blob/cdd5fd595047b010b431589178b7c53f61ba7274/resources/skins.vector.styles/components/SearchBoxLoader.less#L38-L41|this calculation]] will need to be updated to no longer add the thumbnail borders