diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss index d6f19f27a0..fb5e19dc08 100644 --- a/core/src/components/item-divider/item-divider.md.scss +++ b/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; - height: $item-md-thumbnail-height; + --size: #{$item-md-thumbnail-size}; } // Material Design Item Divider Avatar/Thumbnail diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index d6aa6e76fb..9be8327870 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -154,8 +154,7 @@ font-size: 13px; } - -// iOS Item Avatar & Thumbnail +// iOS Item Avatar // -------------------------------------------------- ::slotted(ion-avatar) { @@ -163,11 +162,16 @@ height: $item-ios-avatar-height; } +// iOS Item Thumbnail +// -------------------------------------------------- + ::slotted(ion-thumbnail) { - width: $item-ios-thumbnail-width; - height: $item-ios-thumbnail-height; + --size: #{$item-ios-thumbnail-size}; } +// iOS Item Avatar/Thumbnail +// -------------------------------------------------- + ::slotted(ion-avatar[slot="end"]), ::slotted(ion-thumbnail[slot="end"]) { @include margin(($item-ios-padding-end * 0.5)); diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index c565676e68..e5e5b2aa80 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/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 -$item-ios-thumbnail-width: 56px !default; - -/// @prop - Height of the thumbnail in the item -$item-ios-thumbnail-height: $item-ios-thumbnail-width !default; +/// @prop - Size of the thumbnail in the item +$item-ios-thumbnail-size: 56px !default; /// @prop - Color of the detail arrow icon $item-ios-detail-icon-color: $item-ios-border-color !default; diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 66570ae0b4..2802d7950e 100644 --- a/core/src/components/item/item.md.scss +++ b/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; - height: $item-md-thumbnail-height; + --size: #{$item-md-thumbnail-size}; } // Material Design Item Avatar/Thumbnail diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index 848480d257..8d225813e7 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/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 -$item-md-thumbnail-width: 56px !default; - -/// @prop - Height of the thumbnail in the item -$item-md-thumbnail-height: $item-md-thumbnail-width !default; +/// @prop - Size of the thumbnail in the item +$item-md-thumbnail-size: 56px !default; /// @prop - Color of the detail arrow icon $item-md-detail-icon-color: $item-md-border-color !default; diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts index 79b200d561..4ddf1bba07 100644 --- a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts +++ b/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 ', async ({ page, skip }) => { + skip.rtl(); + + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/22935', + }); + + await page.setContent(` + + + + + + `); + + const item = page.locator('ion-item'); + await expect(item).toHaveScreenshot(`thumbnail-ion-item-size-diff-${page.getSnapshotSettings()}.png`); + }); }); diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2b49479546 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f814c6f397 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e59497e1d4 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0ac78f4d53 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..05ff9c2403 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f23ccdcce5 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-size-diff-md-ltr-Mobile-Safari-linux.png differ