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/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/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" 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..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) { - // TODO(FW-6862): separate width and height tokens for thumbnails - --size: var(--ion-item-divider-thumbnail-width); - @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 b6d2b0447d0..7f34002a0e1 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -161,7 +161,9 @@ // -------------------------------------------------- ::slotted(ion-thumbnail) { - --size: #{$item-ios-thumbnail-size}; + // 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.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..2651fffe9f9 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -172,7 +172,9 @@ // -------------------------------------------------- ::slotted(ion-thumbnail) { - --size: #{$item-md-thumbnail-size}; + // 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/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index 4e38c76ec26..3aad826bf17 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/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 49b4c6dfcc2..28e645edbc8 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'), () => { @@ -22,8 +22,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c await page.setContent( ` + + - + @@ -34,6 +41,29 @@ 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 +83,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 00000000000..8aa1f61cdde Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..947aa3d65f9 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Firefox-linux.png differ 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 00000000000..7dc64f66ac2 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-ltr-Mobile-Safari-linux.png differ 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 00000000000..dba3f13c8bc Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..121851aea44 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Firefox-linux.png differ 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 00000000000..f1e298a8bbc Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-ios-rtl-Mobile-Safari-linux.png differ 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 00000000000..01fe43ec36d Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Chrome-linux.png differ 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 00000000000..6c68b3c3247 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Firefox-linux.png differ 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 00000000000..1e9a05129d2 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-ltr-Mobile-Safari-linux.png differ 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 00000000000..1cf218f0c6b Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Firefox-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..018fcc070a3 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Firefox-linux.png differ 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 00000000000..93baaba3c83 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-md-rtl-Mobile-Safari-linux.png differ 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 00000000000..058f0f48da5 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..0c183a29dec Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Firefox-linux.png differ 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 00000000000..5ce713e37c3 Binary files /dev/null and b/core/src/components/thumbnail/test/basic/thumbnail.e2e.ts-snapshots/thumbnail-ion-item-divider-size-ios-ltr-Mobile-Safari-linux.png differ 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; 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 {