bug: thumbnail not being properly sized when slotted inside item

[Yohandah]

Bug Report

Ionic version: [x] 5.x

Current behavior:

The ionic docs says :

Thumbnails can be used by themselves or inside of any element. If placed inside of an ion-item, the thumbnail will resize to fit the parent component

But when a ion-thumbnail is inside a ion-item and slotted, it doesn't fit the ion-item, instead it forces its size to 56px which makes the ion-item height 56px.

If we want to make the thumbnail smaller we can use the --size attribute, but it is overridden by the code above when slotted.

I add the size attribute :

The ion-thumbnail size attribute is overridden by the slotted css :

Expected behavior:

The size attribute shouldn't be overridden ? Why force the height/width to 56px when slotted ?

Steps to reproduce:

Go to : https://ionicframework.com/docs/api/thumbnail

• With your browser, inspect a thumbnail in the example in the top right corner
• Set a --size attribute to a value, for example 20px
• The thumbnail doesn't change its size

[dotNetkow]

To expand on this with a code example for reproduction, I also tried ion-item's min-height property to make the parent (ion item) larger. It didn't work though.

ion-item {
  --min-height: 200px; // or any large size
}

ion-thumbnail {
  --size: 108px;  // this should take effect but doesn't
  --border-radius: 12px;
}

<ion-item>
  <ion-thumbnail slot="start">
     <img src="path"/>
   </ion-thumbnail>
</ion-item>

[dotNetkow]

As a workaround, I directly set the height and width of the ion-thumbnail:

.thumbnail {
  height: 108px;
  width: 108px;
}

[idesignpixels]

Still an issue in Ionic 6.19.0

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.