From d432cddf7459f457af7170d64d86cb191c4b455c Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 22 May 2026 16:13:17 -0700 Subject: [PATCH 1/6] feat(thumbnail): add recipe and tokens --- core/api.txt | 6 +++--- core/src/components.d.ts | 8 -------- .../components/item-divider/item-divider.scss | 4 ++-- core/src/components/item/item.ios.scss | 3 ++- core/src/components/item/item.ios.vars.scss | 7 +++++-- core/src/components/item/item.md.scss | 3 ++- core/src/components/item/item.md.vars.scss | 7 +++++-- .../thumbnail/test/basic/thumbnail.e2e.ts | 2 +- .../thumbnail/thumbnail.interfaces.ts | 8 ++++++++ core/src/components/thumbnail/thumbnail.scss | 18 ++++++++---------- core/src/components/thumbnail/thumbnail.tsx | 10 +--------- core/src/themes/ionic/default.tokens.ts | 9 +++++++++ core/src/themes/ios/default.tokens.ts | 9 +++++++++ core/src/themes/md/default.tokens.ts | 9 +++++++++ core/src/themes/themes.interfaces.ts | 2 ++ 15 files changed, 66 insertions(+), 39 deletions(-) create mode 100644 core/src/components/thumbnail/thumbnail.interfaces.ts diff --git a/core/api.txt b/core/api.txt index bc8bb22dba9..49dd1f3b6d8 100644 --- a/core/api.txt +++ b/core/api.txt @@ -2806,9 +2806,9 @@ ion-textarea,part,wrapper ion-thumbnail,shadow ion-thumbnail,prop,mode,"ios" | "md",undefined,false,false -ion-thumbnail,prop,theme,"ios" | "md" | "ionic",undefined,false,false -ion-thumbnail,css-prop,--border-radius -ion-thumbnail,css-prop,--size +ion-thumbnail,css-prop,--ion-thumbnail-border-radius +ion-thumbnail,css-prop,--ion-thumbnail-height +ion-thumbnail,css-prop,--ion-thumbnail-width ion-title,shadow ion-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a9299aaee9a..bda9768f20b 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -4239,10 +4239,6 @@ export namespace Components { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonTitle { /** @@ -10335,10 +10331,6 @@ declare namespace LocalJSX { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonTitle { /** diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index 024e59a4f06..ef8ddeadb75 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -308,8 +308,8 @@ // Thumbnail ::slotted(ion-thumbnail) { - // TODO(FW-6862): separate width and height tokens for thumbnails - --size: var(--ion-item-divider-thumbnail-width); + --ion-thumbnail-width: var(--ion-item-divider-thumbnail-width); + --ion-thumbnail-height: var(--ion-item-divider-thumbnail-height); @include mixins.margin( var(--ion-item-divider-thumbnail-margin-top), diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index b6d2b0447d0..1166631ed9d 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -161,7 +161,8 @@ // -------------------------------------------------- ::slotted(ion-thumbnail) { - --size: #{$item-ios-thumbnail-size}; + --ion-thumbnail-width: #{$item-ios-thumbnail-width}; + --ion-thumbnail-height: #{$item-ios-thumbnail-height}; } // iOS Item Avatar/Thumbnail diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 223b08125f3..39dc56f1929 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -33,8 +33,11 @@ $item-ios-avatar-width: 36px; /// @prop - Height of the avatar in the item $item-ios-avatar-height: $item-ios-avatar-width; -/// @prop - Size of the thumbnail in the item -$item-ios-thumbnail-size: 56px; +/// @prop - Width of the thumbnail in the item +$item-ios-thumbnail-width: 56px; + +/// @prop - Height of the thumbnail in the item +$item-ios-thumbnail-height: $item-ios-thumbnail-width; /// @prop - Padding top for the item content $item-ios-padding-top: 10px; diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 7ecb4dd009e..7fb8ee8a190 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -172,7 +172,8 @@ // -------------------------------------------------- ::slotted(ion-thumbnail) { - --size: #{$item-md-thumbnail-size}; + --ion-thumbnail-width: #{$item-md-thumbnail-width}; + --ion-thumbnail-height: #{$item-md-thumbnail-height}; } // 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 4e38c76ec26..89ee6bf5186 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -18,8 +18,11 @@ $item-md-avatar-width: 40px; /// @prop - Height of the avatar in the item $item-md-avatar-height: $item-md-avatar-width; -/// @prop - Size of the thumbnail in the item -$item-md-thumbnail-size: 56px; +/// @prop - Width of the thumbnail in the item + $item-md-thumbnail-width: 56px; + +/// @prop - Height of the thumbnail in the item +$item-md-thumbnail-height: $item-md-thumbnail-width; /// @prop - Padding top for the item content $item-md-padding-top: 10px; diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts index 49b4c6dfcc2..4a5c7a614ed 100644 --- a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts +++ b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts @@ -23,7 +23,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c await page.setContent( ` - + diff --git a/core/src/components/thumbnail/thumbnail.interfaces.ts b/core/src/components/thumbnail/thumbnail.interfaces.ts new file mode 100644 index 00000000000..d3b02bd1688 --- /dev/null +++ b/core/src/components/thumbnail/thumbnail.interfaces.ts @@ -0,0 +1,8 @@ +export type IonThumbnailRecipe = { + height?: string; + width?: string; + + border?: { + radius?: string; + }; +}; diff --git a/core/src/components/thumbnail/thumbnail.scss b/core/src/components/thumbnail/thumbnail.scss index 48fea442a83..aa0ddfe4e5f 100644 --- a/core/src/components/thumbnail/thumbnail.scss +++ b/core/src/components/thumbnail/thumbnail.scss @@ -1,27 +1,25 @@ -@import "../../themes/native/native.globals"; +@use "../../themes/mixins" as mixins; // Thumbnail // -------------------------------------------------- :host { /** - * @prop --border-radius: Border radius of the thumbnail - * @prop --size: Size of the thumbnail + * @prop --ion-thumbnail-width: Width of the thumbnail + * @prop --ion-thumbnail-height: Height of the thumbnail + * @prop --ion-thumbnail-border-radius: Border radius of the thumbnail and the slotted image */ - --size: 48px; // TODO(FW-6862): separate width and height tokens for thumbnails - --border-radius: 0; - - @include border-radius(var(--border-radius)); + @include mixins.border-radius(var(--ion-thumbnail-border-radius)); display: block; - width: var(--size, 48px); - height: var(--size, 48px); + width: var(--ion-thumbnail-width); + height: var(--ion-thumbnail-height); } ::slotted(ion-img), ::slotted(img) { - @include border-radius(var(--border-radius)); + @include mixins.border-radius(var(--ion-thumbnail-border-radius)); width: 100%; height: 100%; diff --git a/core/src/components/thumbnail/thumbnail.tsx b/core/src/components/thumbnail/thumbnail.tsx index 05479cfc288..321f6e39871 100644 --- a/core/src/components/thumbnail/thumbnail.tsx +++ b/core/src/components/thumbnail/thumbnail.tsx @@ -1,11 +1,8 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Host, h } from '@stencil/core'; -import { getIonTheme } from '../../global/ionic-global'; - /** * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component. - * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component. */ @Component({ tag: 'ion-thumbnail', @@ -14,13 +11,8 @@ import { getIonTheme } from '../../global/ionic-global'; }) export class Thumbnail implements ComponentInterface { render() { - const theme = getIonTheme(this); return ( - + ); diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts index bde15b539a0..9e4789b43ef 100644 --- a/core/src/themes/ionic/default.tokens.ts +++ b/core/src/themes/ionic/default.tokens.ts @@ -803,5 +803,14 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + IonThumbnail: { + height: 'var(--ion-scaling-xl)', + width: 'var(--ion-scaling-xl)', + + border: { + radius: 'var(--ion-radii-xxxxs)', + }, + }, }, }; diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts index 00f09285cec..a47d43d58fb 100644 --- a/core/src/themes/ios/default.tokens.ts +++ b/core/src/themes/ios/default.tokens.ts @@ -831,5 +831,14 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + IonThumbnail: { + height: 'var(--ion-scaling-xxxl)', + width: 'var(--ion-scaling-xxxl)', + + border: { + radius: 'var(--ion-radii-xxxxs)', + }, + }, }, }; diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts index 48cbb301023..cb2c9e85a8c 100644 --- a/core/src/themes/md/default.tokens.ts +++ b/core/src/themes/md/default.tokens.ts @@ -956,5 +956,14 @@ export const defaultTheme: DefaultTheme = { }, }, }, + + IonThumbnail: { + height: 'var(--ion-scaling-xxxl)', + width: 'var(--ion-scaling-xxxl)', + + border: { + radius: 'var(--ion-radii-xxxxs)', + }, + }, }, }; diff --git a/core/src/themes/themes.interfaces.ts b/core/src/themes/themes.interfaces.ts index 4d552c77be7..d45a4717b60 100644 --- a/core/src/themes/themes.interfaces.ts +++ b/core/src/themes/themes.interfaces.ts @@ -3,6 +3,7 @@ import type { IonChipConfig, IonChipRecipe } from '../components/chip/chip.inter import type { IonItemDividerRecipe } from '../components/item-divider/item-divider.interfaces'; import type { IonProgressBarConfig, IonProgressBarRecipe } from '../components/progress-bar/progress-bar.interfaces'; import type { IonSpinnerConfig, IonSpinnerRecipe } from '../components/spinner/spinner.interfaces'; +import type { IonThumbnailRecipe } from '../components/thumbnail/thumbnail.interfaces'; import type { IonicConfig as IonicGlobalConfig } from '../utils/config'; // Platform-specific theme @@ -290,6 +291,7 @@ type Components = { IonItemDivider?: IonItemDividerRecipe; IonProgressBar?: IonProgressBarRecipe; IonSpinner?: IonSpinnerRecipe; + IonThumbnail?: IonThumbnailRecipe; IonCard?: any; IonItem?: any; From 4149d8f754a7bb7f05ad66c40c615c890d1eb39a Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 22 May 2026 16:18:07 -0700 Subject: [PATCH 2/6] docs(BREAKING): add thumbnail --- BREAKING.md | 26 +++++++++++++++++++ packages/angular/src/directives/proxies.ts | 4 +-- .../standalone/src/directives/proxies.ts | 4 +-- 3 files changed, 30 insertions(+), 4 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index c47e098e609..a90892ff430 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -26,6 +26,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Radio Group](#version-9x-radio-group) - [Spinner](#version-9x-spinner) - [Textarea](#version-9x-textarea) + - [Thumbnail](#version-9x-thumbnail)

Global Styles

@@ -245,3 +246,28 @@ Additionally, the `radio-group-wrapper` div element has been removed, causing sl Converted `ion-textarea` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). If you were targeting the internals of `ion-textarea` in your CSS, you will need to target the `wrapper`, `container`, `label`, `native`, `supporting-text`, `helper-text`, `error-text`, `counter`, or `bottom` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables. + +

Thumbnail

+ +The following breaking changes apply to `ion-thumbnail`: + +1. `--size` has been split into separate `--ion-thumbnail-width` and `--ion-thumbnail-height` CSS variables. +2. `--border-radius` has been replaced. +3. Theme classes (`ion-thumbnail.md`, `ion-thumbnail.ios`) are no longer supported. + +
Removed CSS variables
+ +`--size` and `--border-radius` have been removed. Use the new token structure for global styles, or the corresponding CSS variable for component-specific overrides: + +| Old (8.x) | New token (global) | New CSS variable (component-specific) | +|---|---|---| +| `--size` | `IonThumbnail.width` | `--ion-thumbnail-width` | +| `--size` | `IonThumbnail.height` | `--ion-thumbnail-height` | +| `--border-radius` | `IonThumbnail.border.radius` | `--ion-thumbnail-border-radius` | + +> [!NOTE] +> Code that previously set `--size: 48px` on `ion-thumbnail` must now set both `--ion-thumbnail-width: 48px` and `--ion-thumbnail-height: 48px`. + +
Theme classes
+ +Remove any instances that target the theme classes: `ion-thumbnail.md`, `ion-thumbnail.ios`. diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 64d4888724b..fa5571aacba 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -2489,14 +2489,14 @@ the user clears the textarea by performing a keydown event. @ProxyCmp({ - inputs: ['mode', 'theme'] + inputs: ['mode'] }) @Component({ selector: 'ion-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['mode', 'theme'], + inputs: ['mode'], }) export class IonThumbnail { protected el: HTMLIonThumbnailElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index bf79b098440..68407deee87 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -2185,14 +2185,14 @@ export declare interface IonText extends Components.IonText {} @ProxyCmp({ defineCustomElementFn: defineIonThumbnail, - inputs: ['mode', 'theme'] + inputs: ['mode'] }) @Component({ selector: 'ion-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['mode', 'theme'], + inputs: ['mode'], standalone: true }) export class IonThumbnail { From c0e8d6b1882c9828cefe3bee9f540e45c638d589 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 22 May 2026 16:29:28 -0700 Subject: [PATCH 3/6] chore(item): run lint --- core/src/components/item/item.md.vars.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index 89ee6bf5186..3aad826bf17 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -19,7 +19,7 @@ $item-md-avatar-width: 40px; $item-md-avatar-height: $item-md-avatar-width; /// @prop - Width of the thumbnail in the item - $item-md-thumbnail-width: 56px; +$item-md-thumbnail-width: 56px; /// @prop - Height of the thumbnail in the item $item-md-thumbnail-height: $item-md-thumbnail-width; From b3d4c387b42c9e9afea2e2c20c9d29032bffe1c6 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 22 May 2026 17:50:35 -0700 Subject: [PATCH 4/6] fix(vercel): add themes directory to vercel build --- core/scripts/vercel-build.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/core/scripts/vercel-build.sh b/core/scripts/vercel-build.sh index 99c83b22adc..a456d847e2e 100755 --- a/core/scripts/vercel-build.sh +++ b/core/scripts/vercel-build.sh @@ -48,6 +48,7 @@ echo "Copying core output..." cp -r "${CORE_DIR}/src" "${OUTPUT_DIR}/src" cp -r "${CORE_DIR}/dist" "${OUTPUT_DIR}/dist" cp -r "${CORE_DIR}/css" "${OUTPUT_DIR}/css" +cp -r "${CORE_DIR}/themes" "${OUTPUT_DIR}/themes" mkdir -p "${OUTPUT_DIR}/scripts" cp -r "${CORE_DIR}/scripts/testing" "${OUTPUT_DIR}/scripts/testing" From 0153a0b7a861a046226cf821d497e2ae21c9951e Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 22 May 2026 18:17:55 -0700 Subject: [PATCH 5/6] feat(thumbnail): proper size tokens setup for item --- .../components/item-divider/item-divider.scss | 6 ++--- core/src/components/item/item.ios.scss | 5 ++-- core/src/components/item/item.md.scss | 5 ++-- .../thumbnail/test/basic/index.html | 7 +++++ .../thumbnail/test/basic/thumbnail.e2e.ts | 24 +++++++++++++++++- ...em-divider-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 3704 bytes ...m-divider-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 4904 bytes ...em-divider-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 4447 bytes ...em-divider-ios-rtl-Mobile-Chrome-linux.png | Bin 0 -> 3688 bytes ...m-divider-ios-rtl-Mobile-Firefox-linux.png | Bin 0 -> 4984 bytes ...em-divider-ios-rtl-Mobile-Safari-linux.png | Bin 0 -> 4676 bytes ...tem-divider-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 3571 bytes ...em-divider-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 4495 bytes ...tem-divider-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 4177 bytes ...tem-divider-md-rtl-Mobile-Chrome-linux.png | Bin 0 -> 3566 bytes ...em-divider-md-rtl-Mobile-Firefox-linux.png | Bin 0 -> 4551 bytes ...tem-divider-md-rtl-Mobile-Safari-linux.png | Bin 0 -> 4223 bytes ...vider-size-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 710 bytes ...ider-size-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1065 bytes ...vider-size-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 791 bytes 20 files changed, 39 insertions(+), 8 deletions(-) create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Chrome-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Firefox-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Safari-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Chrome-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Firefox-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Safari-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index ef8ddeadb75..086f3d4335f 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -308,15 +308,15 @@ // Thumbnail ::slotted(ion-thumbnail) { - --ion-thumbnail-width: var(--ion-item-divider-thumbnail-width); - --ion-thumbnail-height: var(--ion-item-divider-thumbnail-height); - @include mixins.margin( var(--ion-item-divider-thumbnail-margin-top), var(--ion-item-divider-thumbnail-margin-end), var(--ion-item-divider-thumbnail-margin-bottom), var(--ion-item-divider-thumbnail-margin-start) ); + + width: var(--ion-item-divider-thumbnail-width, revert-layer); + height: var(--ion-item-divider-thumbnail-height, revert-layer); } ::slotted(ion-thumbnail[slot="start"]) { diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index 1166631ed9d..8a6287fde50 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -161,8 +161,9 @@ // -------------------------------------------------- ::slotted(ion-thumbnail) { - --ion-thumbnail-width: #{$item-ios-thumbnail-width}; - --ion-thumbnail-height: #{$item-ios-thumbnail-height}; + // TODO(FW-6847): switch to the --ion-item-thumbnail-width/height pattern used in item-divider.scss + width: $item-ios-thumbnail-width; + height: $item-ios-thumbnail-height; } // iOS Item Avatar/Thumbnail diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 7fb8ee8a190..c69b1c3e81b 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -172,8 +172,9 @@ // -------------------------------------------------- ::slotted(ion-thumbnail) { - --ion-thumbnail-width: #{$item-md-thumbnail-width}; - --ion-thumbnail-height: #{$item-md-thumbnail-height}; + // TODO(FW-6847): switch to the --ion-item-thumbnail-width/height pattern used in item-divider.scss + width: $item-md-thumbnail-width; + height: $item-md-thumbnail-height; } // Material Design Item Avatar/Thumbnail diff --git a/core/src/components/thumbnail/test/basic/index.html b/core/src/components/thumbnail/test/basic/index.html index 7d412f65c28..5bd8694408e 100644 --- a/core/src/components/thumbnail/test/basic/index.html +++ b/core/src/components/thumbnail/test/basic/index.html @@ -33,6 +33,13 @@ Item Thumbnail + + + + + + Item Divider Thumbnail + diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts index 4a5c7a614ed..026a71de6bb 100644 --- a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts +++ b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts @@ -2,7 +2,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; /** - * ion-thumbnail does not have mode/RTL-specific logic + * This behavior does not vary across modes/directions */ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('thumbnail: rendering'), () => { @@ -34,6 +34,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c const item = page.locator('ion-item'); await expect(item).toHaveScreenshot(screenshot(`thumbnail-ion-item-size-diff`)); }); + + test('size should be customizable in ', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const itemDivider = page.locator('ion-item-divider'); + await expect(itemDivider).toHaveScreenshot(screenshot(`thumbnail-ion-item-divider-size`)); + }); }); }); @@ -53,5 +69,11 @@ configs().forEach(({ title, screenshot, config }) => { await expect(referenceEl).toHaveScreenshot(screenshot(`thumbnail-ion-item-diff`)); }); + + test('should not have visual regressions when rendering inside of an ', async ({ page }) => { + const referenceEl = page.locator('#ion-item-divider'); + + await expect(referenceEl).toHaveScreenshot(screenshot('thumbnail-ion-item-divider')); + }); }); }); diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..8aa1f61cddeeabe7a7e96cb6ab42ddd05f5a7818 GIT binary patch literal 3704 zcmV-;4u|oHP);&S#kAaW2n2o^+l(MfF=?b21Z?WAocjx+h=Nz#n-=Q)4&_huwnQZ)Kw zja|EbA50>T-n@D5dFHF%@ArQ1Y2V7q3bexyYbRhQadzMqFc^$q9Q%O5U@&$bOq&=C z#!iH36NACniEOJjJzWRWf~RETNFN6R4}HDBU@#b!Y`HeQcuDn${yc)mq<)z<_QMgL ziWL5IcLRgLU~Hi_tv!S5ci`58<|Q9LqdzxRp}PxC48mJSp`QZ=gRz&{Ds8%U8-Bb4 z?eg*!+%)OWx#Mv57%&)&J&X6+wEi6aeH|V?hEDkYHm%{^)3C1x7!1Z9#N+7B69PG{ zQ(R9WEW&~Q`tSbq1hiXJfEsYkVA{lB>>)hR zCKRSuuNoCNe;m$~l9kZ=d$2~$C4}D(hj{4ef`k3=yK_xaqR_KjUWHRffWctw1v=HH z^%t;gHY)J;2{`>L`rGey1L+p+pbmV_ja>3S%#)t zf-DQ1*M%9IfQ|5ur{|MTK56TO2kQqaf4y}d?mcoX{MON8diRZ08Z5V-LXCm-%FaBv zxk`gjd>;%BQ2Pjv)CFVh7_O>W&N9eZu=62$^3y+!{WbZIyK=xU^>

%Fjs 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 Tf2Nq0fYISF+USoemW2NUynr9B literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Safari-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..7dc64f66ac2fa3c33757f5a0217948ce1eb04722 GIT binary patch literal 4447 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 O0>Si5bZfL7qy7W&d8@Mk literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..dba3f13c8bc5a90d7deda1b6df8ef5e8f48d2a41 GIT binary patch literal 3688 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 literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Safari-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..f1e298a8bbc1a476f55f15471b15a4fa07642d55 GIT binary patch literal 4676 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 literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Chrome-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..01fe43ec36dde2d4d05d8357c5226d654be02bc4 GIT binary patch literal 3571 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 E0YY8MLI3~& literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Firefox-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6c68b3c3247d62988432f1a2ea23bd31de4172a4 GIT binary patch literal 4495 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 literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Safari-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..1e9a05129d205fe94e55ddfebdd9f12c2401462a GIT binary patch literal 4177 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 literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Chrome-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..1cf218f0c6b9e6e4b3348826cfa0fcb1fe362d5e GIT binary patch literal 3566 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 literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Safari-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..93baaba3c83be5ef9dc89b5e7112dba91ecb30e9 GIT binary patch literal 4223 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 Xor9Jc=W@WG2p~;0J=H3xb=dy_JDTN~ literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..058f0f48da51d78980472fc92e8c2b96f35bd34c GIT binary patch literal 710 zcmV;%0y+JOP)-$L1S8;q9}AWeZDNn*J`RN02l#v6M!h1KsJ59 zRi&<4Q?0hWrXMOdr=_eOkb3}pjg=og>C>^ko~qj$Og66Uar3K>>;V7|{@K*&>FvJG zn}7bc*RyzXmDKjK;xPe0DE`@WFPO4vrIR*jw$-={CQmLj71#5U03a04Y;xVDelR7b z^m0YXY1LZxTFUFHt#=3NbnUfT*Gk@+PyjGG&uluZ55}8Iy1LPuFF*TFPE5~=+9>FK zIapAxX=_OUFuJ(Ha}m@pno>z+XSG|l+2x!{IU9T^E1$7S>X)-`0)S9_>ZaQ}b-Teh zGo#a{rB!Lc3Mj{&*;Q&fYid5F^`yj#`!6TRNBnONLntJc)s@nErQMFBu4p4s$x zUgdfaPj?-=F5q@;xwP%+_Ks|(&mGt;&ItfQ@$ZGdSXOc<+1%mXQNs@AhJ$G~sqGa3 zKv@3SzbSW>w;`ruhx_p`y>#+e`u`pv*fgP)>LiS4^#T>r&vr2Y3niN*~$U% zHG#AJ!n{4*o-W%KOl}{?HA?_vn%KP~mq(cy0l-9r&L;lz8^AxneQf|yL^c74BC-iU s6#W1I0RR6O*91HO000I_L_t&o0O}X8Y_scFH#_X-?bT3V+*2&P4@?f9V~AF;BOZ}a7K>t|e?8GH16 z>!jFs=k|Wy$t-`)^1Gkf^wWO@d6@(n7+4fG@Hg^Idax73WN2*WP~e=$%i+MlBw#Ut zVbX(#5aBN>hI_Bg)3|qU*G-r8$B!y7FmgCN_`uR98?UH*{Jeci z^dzzHC0BbHoNIfhVK%;jEdxQu@tF@NTU&`7ow`j{Xx0g}dOO7oOG*c05m8k{U zKc&rK(WHvcnd=p1z0y4!B75gd*V4Juu9w}5*u8XK+pY;NnbT$mf)pN6o-jjY&$kb^ zR0OwmZNBtDb>*&0uY^_~+`u%z=U)y*8z0|FFvfQC^^~Q|H_ZTKwoMHMT z4GQZ_A)wa%W=qwRTQj%CPLRr4>e;QdYnHCph8G8K&v516>6&@KPCqg?DR1Y8+3eSu z8z74L*tTfuT^V$0j8tQFiU7c(anXo`3rTDmc(v}@<0FIWCLuDo>4PocAd+an)t zkKIA{#oyxheJfb!CACw@R{H+zyia%6&5Nqae7UT*X4lF6)fO^$)PVkiTOc&~$m&dQ z#i!+lKSgSySI?h4V~fb;{l=wf&5YUsyG3liifl`}{ng}Bv&th~*}aOuFkj-YVCY#< zdvN=X`jggURzqq}4AcVCwXk4~+f~v3}?6 zZ(IxeExq*Wt+1Q7YlB){B@-8`p`?)yn!j(d+eds){`=qj!TQ%9gl|rrHcczfW048> zc@2=Qiv&DkgdQ%~9JYAI*6>zw@y&nVu0N~BZf|{Y(t5`?^He5vY|8o42+SSAl#c(t+f^lSR%^NlD1-w!mgseAOjfunGF|8|C?uw|9hj&Z zI4jeL3z$ZL+-8PJ8tkRVT7bqCIB_U+3U3PV5e8;N2TLHQC?MSjWQuyrf%q@(?j4@y SVG_V1fWgz%&t;ucLK6VE9NPN; literal 0 HcmV?d00001 diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Safari-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..5ce713e37c3ef98e1d09b0695740345d7b71e13f GIT binary patch literal 791 zcmV+y1L*vTP)Px#1am@3R0s$N2z&@+hyVZr!AV3xRCt{2-BEKAR~U!!XOV=OKqe&EnuKIVO>|n@ zyV~#n4SLaDSRHMxLW~-~LL!v_Uc4&VjBUr+!vs6eZ)Rt9&+fu|wSNxh9LU=3_7q8y z-YZ>p0g|M}VlYUOatsDZQck((3;cevm7{ zU!K5m|KG2hP9q!!L%6#Or7UF?lB6P%2E(U9p(TUf0?eFYx0;^gioG&f`aw-z*N z(UbV#)n6&9kR+v$q{lEigUMueT)PS{`wiSK+7^?ZZ)=a}ZjR zF5i3>xJ^H~n{T^tVmzKpC6c7il%&V7Tm~{eKI~t=fty?KupQ$Er7TXhJ8{{y8a#P1 zyFUY#T<|7I3n5vLp}soXfAbc41Gv2t5B;ad@a!1K;Lc8rM+`^j?yaS&LXuQevd`%| zb?6Re#}5u+|2q715baqh!lToNM@RX4n;WUBkR%nAEEv97hgNqM4rk+-lDbre&1!s= z^yqoCpVz3twY5}LNRo<5I{5tkE>tc=&FBoC_hJUp#ZXwOz}>x+6-bhbN*WByWw^Hw zYb*bKZM_OV-h#3}{4GffCHY*S$`ahW1&6)(xr_7T4p{~p)fiJ~`1O$_Eu^_k65U#l zZ8C+EVT8g;#YJqAwCLu(dZ3iWN@z*am!WVl_#e%Z^#9_}uOunQV2~u`7z~o6oOe=I Vv07P2jPL*e002ovPDHLkV1n%Fa6kY6 literal 0 HcmV?d00001 From 2896277dae28a61ecc56772a9aefb052b640b57c Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 22 May 2026 19:43:00 -0700 Subject: [PATCH 6/6] fix(item): use proper token customization --- core/src/components/item/item.ios.scss | 6 +++--- core/src/components/item/item.md.scss | 6 +++--- .../thumbnail/test/basic/thumbnail.e2e.ts | 18 ++++++++++++++++-- 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index 8a6287fde50..7f34002a0e1 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -161,9 +161,9 @@ // -------------------------------------------------- ::slotted(ion-thumbnail) { - // TODO(FW-6847): switch to the --ion-item-thumbnail-width/height pattern used in item-divider.scss - width: $item-ios-thumbnail-width; - height: $item-ios-thumbnail-height; + // TODO(FW-6847): replace $item-md-thumbnail-* to revert-layer pattern used in item-divider.scss. Assuming the --ion-item-thumbnail-width/height tokens will be used in the migration, else update them. + width: var(--ion-item-thumbnail-width, $item-ios-thumbnail-width); + height: var(--ion-item-thumbnail-height, $item-ios-thumbnail-height); } // iOS Item Avatar/Thumbnail diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index c69b1c3e81b..2651fffe9f9 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -172,9 +172,9 @@ // -------------------------------------------------- ::slotted(ion-thumbnail) { - // TODO(FW-6847): switch to the --ion-item-thumbnail-width/height pattern used in item-divider.scss - width: $item-md-thumbnail-width; - height: $item-md-thumbnail-height; + // TODO(FW-6847): replace $item-md-thumbnail-* to revert-layer pattern used in item-divider.scss. Assuming the --ion-item-thumbnail-width/height tokens will be used in the migration, else update them. + width: var(--ion-item-thumbnail-width, $item-md-thumbnail-width); + height: var(--ion-item-thumbnail-height, $item-md-thumbnail-height); } // Material Design Item Avatar/Thumbnail diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts index 026a71de6bb..28e645edbc8 100644 --- a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts +++ b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts @@ -22,8 +22,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c await page.setContent( ` + + - + @@ -38,8 +45,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c test('size should be customizable in ', async ({ page }) => { await page.setContent( ` + + - +