Hey @AnneT 👋🏻 The Thumbnail component is looking great. I didn't notice any changes (visual or otherwise) in the MenuItem or TypeaheadSearch components.

If that's ok, I will review the component again in more depth once the patch is merged/ready to be merged. I'm not sure if there are any changes that still need to be applied.

Btw, I just replaced the link to the specs in the task description. Exploration file should be considered source of truth during implementation, instead of the library specs: these shouldn't have been there, sorry for the confusion. I deleted the component page from the public Figma library for now.

After looking at the current implementation, I think that the main points to discuss (and, in any case, cover in follow-up tasks) would be sizing and aspect ratio. This probably deserves a dedicated conversation, but I thought I could provide some thoughts in preparation for that.

Sizing

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. I, so far, considered the following options:

  1. Creating some premade sizes: For example S (2.5em), used in the context of MenuItem; and M (3em), used in landscape oriented cards.
  2. Making thumbnails 100% in width and height by default, and allowing implementers (and ourselves) to decide their height and width in context via a wrapper. (This might be quite a more flexible option)

When it comes to the thumbnail placeholder icon, I believe that this should also be relative to the size of its container (the thumbnail). Particularly 50%.
Another requirement is to set a max-width and max-height to the icon, which should never be bigger than 64px (to be replaced by the right size token).

Aspect ratio

Thumbnails are not always square. They might have an aspect ratio of 16:9 instead (e.g. like in portrait-oriented cards). I'm not sure if we should just let this different proportions to be defined in context (e.g. by making it possible to resize thumbnails, following the second option listed above), or whether we should implement this as a prop. Again, the former sounds more flexible.

On their side, thumbnail placeholder icons should always maintain a 1:1 aspect ratio, and not be "deformed" in case the proportions of the thumbnail change.