fix(item): use thumbnail's size when present (#27014)

resolves #22935

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: liamdebeasi <liamdebeasi@users.noreply.github.com>

core/src/components/item-divider/item-divider.md.scss

@@ -96,13 +96,11 @@
   height: $item-md-avatar-height;
 }
 
-
 // Material Design Item Divider Thumbnail
 // --------------------------------------------------
 
 ::slotted(ion-thumbnail) {
-  width: $item-md-thumbnail-width;
+  --size: #{$item-md-thumbnail-size};
-  height: $item-md-thumbnail-height;
 }
 
 // Material Design Item Divider Avatar/Thumbnail

core/src/components/item/item.ios.scss

@@ -154,8 +154,7 @@
   font-size: 13px;
 }
 
-
+// iOS Item Avatar
-// iOS Item Avatar & Thumbnail
 // --------------------------------------------------
 
 ::slotted(ion-avatar) {
@@ -163,11 +162,16 @@
   height: $item-ios-avatar-height;
 }
 
+// iOS Item Thumbnail
+// --------------------------------------------------
+
 ::slotted(ion-thumbnail) {
-  width: $item-ios-thumbnail-width;
+  --size: #{$item-ios-thumbnail-size};
-  height: $item-ios-thumbnail-height;
 }
 
+// iOS Item Avatar/Thumbnail
+// --------------------------------------------------
+
 ::slotted(ion-avatar[slot="end"]),
 ::slotted(ion-thumbnail[slot="end"]) {
   @include margin(($item-ios-padding-end * 0.5));

core/src/components/item/item.ios.vars.scss

@@ -33,11 +33,8 @@ $item-ios-avatar-width:                      36px !default;
 /// @prop - Height of the avatar in the item
 $item-ios-avatar-height:                     $item-ios-avatar-width !default;
 
-/// @prop - Width of the thumbnail in the item
+/// @prop - Size of the thumbnail in the item
-$item-ios-thumbnail-width:                   56px !default;
+$item-ios-thumbnail-size:                   56px !default;
-
-/// @prop - Height of the thumbnail in the item
-$item-ios-thumbnail-height:                  $item-ios-thumbnail-width !default;
 
 /// @prop - Color of the detail arrow icon
 $item-ios-detail-icon-color:                 $item-ios-border-color !default;

core/src/components/item/item.md.scss

@@ -258,7 +258,6 @@
   @include padding-horizontal($item-md-note-end-slot-padding-start, $item-md-note-end-slot-padding-end);
 }
 
-
 // Material Design Item Avatar
 // --------------------------------------------------
 
@@ -267,13 +266,11 @@
   height: $item-md-avatar-height;
 }
 
-
 // Material Design Item Thumbnail
 // --------------------------------------------------
 
 ::slotted(ion-thumbnail) {
-  width: $item-md-thumbnail-width;
+  --size: #{$item-md-thumbnail-size};
-  height: $item-md-thumbnail-height;
 }
 
 // Material Design Item Avatar/Thumbnail

core/src/components/item/item.md.vars.scss

@@ -18,11 +18,8 @@ $item-md-avatar-width:                      40px !default;
 /// @prop - Height of the avatar in the item
 $item-md-avatar-height:                     $item-md-avatar-width !default;
 
-/// @prop - Width of the thumbnail in the item
+/// @prop - Size of the thumbnail in the item
-$item-md-thumbnail-width:                   56px !default;
+$item-md-thumbnail-size:                   56px !default;
-
-/// @prop - Height of the thumbnail in the item
-$item-md-thumbnail-height:                  $item-md-thumbnail-width !default;
 
 /// @prop - Color of the detail arrow icon
 $item-md-detail-icon-color:                 $item-md-border-color !default;

core/src/components/thumbnail/test/basic/thumbnail.e2e.ts

@@ -24,4 +24,24 @@ test.describe('thumbnail: basic', () => {
 
     await expect(referenceEl).toHaveScreenshot(`thumbnail-ion-item-diff-${page.getSnapshotSettings()}.png`);
   });
+
+  test('size should be customizable in <ion-item>', async ({ page, skip }) => {
+    skip.rtl();
+
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/22935',
+    });
+
+    await page.setContent(`
+      <ion-item>
+        <ion-thumbnail style="--size: 20px">
+          <img src="/src/components/thumbnail/test/thumbnail.svg" />
+        </ion-thumbnail>
+      </ion-item>
+    `);
+
+    const item = page.locator('ion-item');
+    await expect(item).toHaveScreenshot(`thumbnail-ion-item-size-diff-${page.getSnapshotSettings()}.png`);
+  });
 });