fix(ui5-Illustrated-message): incorrect resizing is fixed

packages/fiori/cypress/specs/IllustratedMessage.cy.tsx

@@ -1,5 +1,6 @@
 import IllustratedMessage from "../../src/IllustratedMessage.js";
 import Label from "@ui5/webcomponents/dist/Label.js";
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
 import "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js"
 import Panel from "@ui5/webcomponents/dist/Panel.js";
 
@@ -124,7 +125,7 @@ describe('SVG CSP Compliance', () => {
         const violationReport = invalidFiles
           .map(v => `${v.file}: has violations`)
           .join('\n')
-        
+
         throw new Error(`Found ${invalidFiles.length} SVG files with CSP violations:\n${violationReport}`)
       }
 
@@ -199,7 +200,7 @@ describe("Vertical responsiveness", () => {
 				expect(scrollHeight).to.be.lessThan(500);
 				expect(scrollHeight).to.equal(offsetHeight);
 			});
-	
+
 		cy.get("[ui5-illustrated-message]")
 			.should("have.prop", "media", expectedMedia);
 	});
@@ -235,10 +236,24 @@ describe("Vertical responsiveness", () => {
 		cy.get("div")
 			.invoke("css", "height", "auto");
 
+		cy.get("[ui5-illustrated-message]")
+		.should("have.attr", "media", IllustratedMessage.MEDIA.DOT);
+	});
+
+	it("Illustration visible, when container fit content height", () => {
+		cy.mount(
+			<div style={{ height: "440px" }}>
+				<IllustratedMessage design="Scene" />
+			</div>
+		);
+
 		cy.get("[ui5-illustrated-message]")
 			.shadow()
 			.find(".ui5-illustrated-message-illustration svg")
-			.should("have.css", "height", "160px");
+			.should(($illustration) => {
+				const scrollHeight = $illustration[0].scrollHeight;
+				expect(scrollHeight).to.not.equal(0);
+			});
 	});
 
 	it("Illustration visible, when container fit content height", () => {
@@ -257,6 +272,7 @@ describe("Vertical responsiveness", () => {
 			});
 	});
 
+
 	it("Illustration visible, when IM slotted and container has fixed height", () => {
 		cy.mount(
 			<Panel style={{ height: "19rem" }} noAnimation>
@@ -272,6 +288,64 @@ describe("Vertical responsiveness", () => {
 				expect(scrollHeight).to.not.equal(0);
 			});
 	});
+	it("IllustratedMessage variations in a dialog with resizing", () => {
+		cy.mount(
+		  <Dialog id="illustratedMessageDialog" open>
+			<div style={{ width: "100%", height: "100%" }}>
+			  <IllustratedMessage
+				id="illustration1"
+				name="NoData"
+			  />
+			</div>
+		  </Dialog>
+		);
+
+		// Ensure the dialog is rendered and open
+		cy.get("[ui5-dialog]").as("Dialog").should("exist").and("have.attr", "open");
+
+		// Validate the first IllustratedMessage
+		cy.get("#illustration1")
+		  .shadow()
+		  .find(".ui5-illustrated-message-illustration svg")
+		  .should(($illustration) => {
+			const scrollHeight = $illustration[0].scrollHeight;
+			expect(scrollHeight).to.not.equal(0);
+		  });
+
+		// Resize the dialog and validate the media property for each IllustratedMessage
+		cy.get("[ui5-dialog]").then(($dialog) => {
+		  // Resize the dialog to a smaller size
+		  $dialog[0].style.width = "300px";
+		  $dialog[0].style.height = "300px";
+		});
+		  // Validate the media property for the first IllustratedMessage
+		  cy.get("#illustration1")
+			.invoke("prop", "media")
+			.should("equal", "spot");
+
+		cy.get("[ui5-dialog]").then(($dialog) => {
+		  // Resize the dialog to a larger size
+		  $dialog[0].style.width = "800px";
+		  $dialog[0].style.height = "600px";
+		});
+
+		  // Validate the media property for the first IllustratedMessage
+		  cy.get("#illustration1")
+			.invoke("prop", "media")
+			.should("equal", "scene");
+
+		cy.get("[ui5-dialog]").then(($dialog) => {
+			// Resize the dialog to a smallest size
+			$dialog[0].style.width = "200px";
+			$dialog[0].style.height = "200px";
+			});
+
+		// Validate the media property for the first IllustratedMessage
+		cy.get("#illustration1")
+			.invoke("prop", "media")
+			.should("equal", "dot");
+
+	});
 });
 
 describe("Dot design resource handling", () => {

packages/fiori/src/IllustratedMessage.ts

@@ -387,21 +387,21 @@ class IllustratedMessage extends UI5Element {
 		window.requestAnimationFrame(this._adjustHeightToFitContainer.bind(this));
 	}
 
-	_applyMedia(heightChange?: boolean) {
+	_applyMedia() {
 		const currOffsetWidth = this.offsetWidth,
 			currOffsetHeight = this.offsetHeight;
 
-		const design = heightChange ? currOffsetHeight : currOffsetWidth,
-			oBreakpounts = heightChange ? IllustratedMessage.BREAKPOINTS_HEIGHT : IllustratedMessage.BREAKPOINTS;
+		const designHeight = currOffsetHeight,
+			designWidth = currOffsetWidth;
 		let newMedia = "";
 
-		if (design <= oBreakpounts.BASE) {
+		if (designHeight <= IllustratedMessage.BREAKPOINTS_HEIGHT.BASE || designWidth <= IllustratedMessage.BREAKPOINTS.BASE) {
 			newMedia = IllustratedMessage.MEDIA.BASE;
-		} else if (design <= oBreakpounts.DOT) {
+		} else if (designHeight <= IllustratedMessage.BREAKPOINTS_HEIGHT.DOT || designWidth <= IllustratedMessage.BREAKPOINTS.DOT) {
 			newMedia = IllustratedMessage.MEDIA.DOT;
-		} else if (design <= oBreakpounts.SPOT) {
+		} else if (designHeight <= IllustratedMessage.BREAKPOINTS_HEIGHT.SPOT || designWidth <= IllustratedMessage.BREAKPOINTS.SPOT) {
 			newMedia = IllustratedMessage.MEDIA.SPOT;
-		} else if (design <= oBreakpounts.DIALOG) {
+		} else if (designHeight <= IllustratedMessage.BREAKPOINTS_HEIGHT.DIALOG || designWidth <= IllustratedMessage.BREAKPOINTS.DIALOG) {
 			newMedia = IllustratedMessage.MEDIA.DIALOG;
 		} else {
 			newMedia = IllustratedMessage.MEDIA.SCENE;
@@ -453,7 +453,7 @@ class IllustratedMessage extends UI5Element {
 			illustrationWrapper.classList.toggle("ui5-illustrated-message-illustration-fit-content", false);
 			if (this.getDomRef()!.scrollHeight > this.getDomRef()!.offsetHeight) {
 				illustrationWrapper.classList.toggle("ui5-illustrated-message-illustration-fit-content", true);
-				this._applyMedia(true /* height change */);
+				this._applyMedia();
 			}
 		}
 	}