diff --git a/BREAKING.md b/BREAKING.md
index 12fca9b9580..e7f597c81ca 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -22,6 +22,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Content](#version-9x-content)
- [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)
@@ -251,6 +252,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 e7917bc4091..facdcedfe83 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1068,7 +1068,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/package-lock.json b/core/package-lock.json
index 822347c4144..972c0b16f25 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -98,6 +98,7 @@
"version": "7.16.12",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"@babel/code-frame": "^7.16.7",
"@babel/generator": "^7.16.8",
@@ -719,6 +720,7 @@
"integrity": "sha512-UF8ItlHguU1Z6GXfPTeT2gakf+ctNI8pAS1kwSBQlsJMlfD4OPoto/SmKnOxKCQvnF4WRcdWeg6C0zREUNaAQg==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"tslib": "^2.1.0"
}
@@ -753,26 +755,6 @@
"@capacitor/core": ">=8.0.0"
}
},
-<<<<<<< HEAD
- "node_modules/@clack/core": {
- "version": "0.5.0",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "picocolors": "^1.0.0",
- "sisteransi": "^1.0.5"
- }
- },
- "node_modules/@clack/prompts": {
- "version": "0.11.0",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@clack/core": "0.5.0",
- "picocolors": "^1.0.0",
- "sisteransi": "^1.0.5"
- }
- },
"node_modules/@esbuild/aix-ppc64": {
"version": "0.27.0",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.0.tgz",
@@ -1215,8 +1197,6 @@
"node": ">=18"
}
},
-=======
->>>>>>> origin/next
"node_modules/@eslint-community/eslint-utils": {
"version": "4.4.0",
"dev": true,
@@ -1401,6 +1381,7 @@
"version": "4.33.0",
"dev": true,
"license": "BSD-2-Clause",
+ "peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "4.33.0",
"@typescript-eslint/types": "4.33.0",
@@ -2556,6 +2537,7 @@
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
"integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
"license": "MIT",
+ "peer": true,
"bin": {
"stencil": "bin/stencil"
},
@@ -2985,6 +2967,7 @@
"version": "6.7.2",
"dev": true,
"license": "BSD-2-Clause",
+ "peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "6.7.2",
"@typescript-eslint/types": "6.7.2",
@@ -3210,7 +3193,6 @@
"integrity": "sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@babel/parser": "^7.28.5",
"@vue/shared": "3.5.25",
@@ -3225,7 +3207,6 @@
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"dev": true,
"license": "BSD-2-Clause",
- "peer": true,
"engines": {
"node": ">=0.12"
},
@@ -3238,8 +3219,7 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"dev": true,
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/@vue/compiler-dom": {
"version": "3.5.25",
@@ -3247,7 +3227,6 @@
"integrity": "sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@vue/compiler-core": "3.5.25",
"@vue/shared": "3.5.25"
@@ -3259,7 +3238,6 @@
"integrity": "sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@babel/parser": "^7.28.5",
"@vue/compiler-core": "3.5.25",
@@ -3277,8 +3255,7 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"dev": true,
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/@vue/compiler-sfc/node_modules/postcss": {
"version": "8.5.6",
@@ -3300,7 +3277,6 @@
}
],
"license": "MIT",
- "peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -3316,7 +3292,6 @@
"integrity": "sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@vue/compiler-dom": "3.5.25",
"@vue/shared": "3.5.25"
@@ -3328,7 +3303,6 @@
"integrity": "sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@vue/shared": "3.5.25"
}
@@ -3339,7 +3313,6 @@
"integrity": "sha512-Z751v203YWwYzy460bzsYQISDfPjHTl+6Zzwo/a3CsAf+0ccEjQ8c+0CdX1WsumRTHeywvyUFtW6KvNukT/smA==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@vue/reactivity": "3.5.25",
"@vue/shared": "3.5.25"
@@ -3351,7 +3324,6 @@
"integrity": "sha512-a4WrkYFbb19i9pjkz38zJBg8wa/rboNERq3+hRRb0dHiJh13c+6kAbgqCPfMaJ2gg4weWD3APZswASOfmKwamA==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@vue/reactivity": "3.5.25",
"@vue/runtime-core": "3.5.25",
@@ -3365,7 +3337,6 @@
"integrity": "sha512-UJaXR54vMG61i8XNIzTSf2Q7MOqZHpp8+x3XLGtE3+fL+nQd+k7O5+X3D/uWrnQXOdMw5VPih+Uremcw+u1woQ==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@vue/compiler-ssr": "3.5.25",
"@vue/shared": "3.5.25"
@@ -3379,8 +3350,7 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.25.tgz",
"integrity": "sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==",
"dev": true,
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/@zeit/schemas": {
"version": "2.21.0",
@@ -3415,6 +3385,7 @@
"version": "7.4.0",
"dev": true,
"license": "MIT",
+ "peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -4713,8 +4684,7 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
"dev": true,
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/debug": {
"version": "2.6.9",
@@ -5125,6 +5095,7 @@
"version": "7.32.0",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"@babel/code-frame": "7.12.11",
"@eslint/eslintrc": "^0.4.3",
@@ -8602,7 +8573,6 @@
"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.5"
}
@@ -8968,7 +8938,6 @@
}
],
"license": "MIT",
- "peer": true,
"bin": {
"nanoid": "bin/nanoid.cjs"
},
@@ -9475,6 +9444,7 @@
"integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
"dev": true,
"license": "Apache-2.0",
+ "peer": true,
"bin": {
"playwright-core": "cli.js"
},
@@ -9496,6 +9466,7 @@
"version": "7.0.35",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
@@ -9601,6 +9572,7 @@
"version": "0.36.2",
"dev": true,
"license": "MIT",
+ "peer": true,
"peerDependencies": {
"postcss": ">=5.0.0"
}
@@ -9651,6 +9623,7 @@
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"dev": true,
"license": "MIT",
+ "peer": true,
"bin": {
"prettier": "bin-prettier.js"
},
@@ -10034,6 +10007,7 @@
"version": "2.35.1",
"dev": true,
"license": "MIT",
+ "peer": true,
"bin": {
"rollup": "dist/bin/rollup"
},
@@ -10354,7 +10328,6 @@
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"dev": true,
"license": "BSD-3-Clause",
- "peer": true,
"engines": {
"node": ">=0.10.0"
}
@@ -11114,7 +11087,8 @@
},
"node_modules/tslib": {
"version": "2.1.0",
- "license": "0BSD"
+ "license": "0BSD",
+ "peer": true
},
"node_modules/tsutils": {
"version": "3.21.0",
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 0abc6ba6220..9e7f972da69 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1552,10 +1552,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 {
/**
@@ -7584,10 +7580,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;
@@ -16,7 +15,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
status: 200,
contentType: 'image/png',
body: Buffer.from(
- 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIwAAAABJRU5ErkJggg==',
+ 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=',
'base64'
),
});
@@ -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/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png
index dd68e3fc46e..25508f2990f 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 30f3e60755c..6fc86da273b 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -913,14 +913,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 ffe6dab04d6..c2c8b4178f1 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -939,14 +939,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 {