Once T322383 is done, MenuItem (and by extension TypeaheadSearch) will use the deprecated token @line-height-x-small (=20px assuming a 14px base font size) for the line-height of the text next to the thumbnail in each menu item. We should change this to the non-deprecated @line-height-small (=22px assuming a 14px base font size), but this will impact TypeaheadSearch and necessitate other changes there.
The thumbnail is 40x40px, which is exactly twice the line-height, so that it's the same height as the two lines of text next to it. Increasing the line-height from 20px to 22px will increase the height of the text to 44px, so we'll need to increase the thumbnail size to 44x44. However, this also increases the width of the thumbnail, which affects the alignment of the text and the search icon in the text input in TypeaheadSearch.
To avoid having to make a lot of changes in Vector too, we should do T322077 first before we do this task, so that we only have to update these styles/values in one place.
- Update Figma specs
- Change MenuItem line-height to line-height-small (=22px)
- Change thumbnail size to 44x44px
- Update search input text and icon alignment for the thumbnail size change
- Update implementation
- Change MenuItem line-height to line-height-small (=22px)
- Change thumbnail size to 44x44px
- Update search input text and icon alignment for the thumbnail size change