From 118188f01a889edf27f90174360e2da2e0b37ea2 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 22 May 2026 19:57:24 -0700 Subject: [PATCH 1/2] feat(img): add recipe and tokens --- core/api.txt | 1 - core/scripts/vercel-build.sh | 1 + core/src/components.d.ts | 8 -------- core/src/components/img/img.tsx | 10 +--------- packages/angular/src/directives/proxies.ts | 4 ++-- packages/angular/standalone/src/directives/proxies.ts | 4 ++-- 6 files changed, 6 insertions(+), 22 deletions(-) diff --git a/core/api.txt b/core/api.txt index bc8bb22dba9..8cedc81309c 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1060,7 +1060,6 @@ ion-img,shadow ion-img,prop,alt,string | undefined,undefined,false,false ion-img,prop,mode,"ios" | "md",undefined,false,false ion-img,prop,src,string | undefined,undefined,false,false -ion-img,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-img,event,ionError,void,true ion-img,event,ionImgDidLoad,void,true ion-img,event,ionImgWillLoad,void,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..510ea220d47 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1525,10 +1525,6 @@ export namespace Components { * The image URL. This attribute is mandatory for the `` element. */ "src"?: string; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonInfiniteScroll { /** @@ -7525,10 +7521,6 @@ declare namespace LocalJSX { * The image URL. This attribute is mandatory for the `` element. */ "src"?: string; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonInfiniteScroll { /** diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx index 87c9668e58e..e4d1dfd33ba 100644 --- a/core/src/components/img/img.tsx +++ b/core/src/components/img/img.tsx @@ -3,11 +3,8 @@ import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil import type { Attributes } from '@utils/helpers'; import { inheritAttributes } from '@utils/helpers'; -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. * * @part image - The inner `img` element. */ @@ -124,13 +121,8 @@ export class Img implements ComponentInterface { render() { const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this; const { draggable } = inheritedAttributes; - const theme = getIonTheme(this); return ( - + ', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['alt', 'mode', 'src', 'theme'], + inputs: ['alt', 'mode', 'src'], }) export class IonImg { protected el: HTMLIonImgElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index bf79b098440..fafa32a5d09 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -914,14 +914,14 @@ export declare interface IonHeader extends Components.IonHeader {} @ProxyCmp({ defineCustomElementFn: defineIonImg, - inputs: ['alt', 'mode', 'src', 'theme'] + inputs: ['alt', 'mode', 'src'] }) @Component({ selector: 'ion-img', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['alt', 'mode', 'src', 'theme'], + inputs: ['alt', 'mode', 'src'], standalone: true }) export class IonImg { From f7efd8ac39bbf36793e7ae315a880207360ea2d8 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 22 May 2026 20:03:43 -0700 Subject: [PATCH 2/2] docs(BREAKING): add img --- BREAKING.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/BREAKING.md b/BREAKING.md index c47e098e609..d42c50855b1 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -21,6 +21,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Chip](#version-9x-chip) - [Datetime](#version-9x-datetime) - [Grid](#version-9x-grid) + - [Image](#version-9x-image) - [Input Otp](#version-9x-input-otp) - [Item Divider](#version-9x-item-divider) - [Radio Group](#version-9x-radio-group) @@ -202,6 +203,16 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has ` ``` +

Image

+ +The following breaking changes apply to `ion-img`: + +1. Theme classes (`ion-img.md`, `ion-img.ios`) are no longer supported. + +
Theme classes
+ +Remove any instances that target the theme classes: `ion-img.md`, `ion-img.ios`. +

Input Otp

Converted `ion-input-otp` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).