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`.
+
Converted `ion-input-otp` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
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/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 (
-
+
{
test.describe(title('img: basic'), () => {
- // TODO FW-3596
- test.describe.skip('image successfully loads', () => {
+ test.describe('image successfully loads', () => {
let ionImgWillLoad: EventSpy;
let ionImgDidLoad: EventSpy;
@@ -52,7 +51,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
test('should emit ionImgDidLoad', async () => {
await ionImgDidLoad.next();
- expect(ionImgWillLoad).toHaveReceivedEventTimes(1);
+ expect(ionImgDidLoad).toHaveReceivedEventTimes(1);
});
});
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 64d4888724b..2cb50808a37 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -891,14 +891,14 @@ export declare interface IonIcon extends Components.IonIcon {}
@ProxyCmp({
- 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'],
})
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 {