Background
Thumbnails are small image previews that support and clarify the meaning of the content they accompany. So far, we detected three main component use cases for thumbnails: within MenuItems, landscape oriented Cards and (the potentially future) ListItems.
In all mentioned circumstances, thumbnails accompany text which size is defined in a relative way, so it reacts to any custom font-size user preference. Given that thumbnails, instead, are sized using absolute units, they currently fail to adjust and keep their vertical alignment with said content:
A relative approach to the sizing of thumbnails was originally implemented in the WVUI TypeaheadSearch component in Vector 2022, which results in a fully responsive component:
Goal
We should consider applying relative sizes to thumbnails. This way, they would also proportionally adjust whenever the font size of the content they accompany is modified.
Considerations
We already took a relative approach to sizing icons under the same circumstances/use case, so this proposal would bring extra consistency.
If we decide to move ahead with this relative sizing approach, we'll need to figure out how to implement this without causing any regressions in the TypeaheadSearch component.
This task depends on the outcome of T312580: [Needs discussion] Thumbnail should be resizeable.
Acceptance criteria
Design resources
- Relative sizing is well-documented on the component spec sheet in Figma and on the Icon component's demo page
Development
- The Thumbnail component is updated to use relative sizing