fix(ui5-message-strip): Remove icon when design changes to a color set (

#9229) * fix(ui5-message-strip): changing design from value-states to color-set does remove the initial icon Fixes #9181
SAP · Jun 20, 2024 · 4f110d2 · 4f110d2
1 parent 3c483a1
commit 4f110d2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 3 deletions.
diff --git a/packages/main/src/MessageStrip.hbs b/packages/main/src/MessageStrip.hbs
@@ -4,7 +4,7 @@
 	aria-labelledby="{{_id}}"
 >
 
-	{{#unless hideIcon}}
+	{{#unless shouldHideIcon}}
 		<div
 		class="ui5-message-strip-icon-wrapper"
 		aria-hidden="true"

diff --git a/packages/main/src/MessageStrip.ts b/packages/main/src/MessageStrip.ts
@@ -178,6 +178,14 @@ class MessageStrip extends UI5Element {
 		return `${MessageStrip.designAnnouncementMappings()[this.design]} ${this.hideCloseButton ? "" : this._closableText}`;
 	}
 
+	get shouldHideIcon() {
+		if (this.designClasses === DesignClassesMapping.ColorSet1 || this.designClasses === DesignClassesMapping.ColorSet2) {
+			return this.hideIcon || this.icon.length === 0;
+		}
+
+		return this.hideIcon;
+	}
+
 	get _closeButtonText() {
 		return MessageStrip.i18nBundle.getText(MESSAGE_STRIP_CLOSE_BUTTON);
 	}
@@ -190,7 +198,7 @@ class MessageStrip extends UI5Element {
 		return {
 			root: {
 				"ui5-message-strip-root": true,
-				"ui5-message-strip-root-hide-icon": this.hideIcon,
+				"ui5-message-strip-root-hide-icon": this.shouldHideIcon,
 				"ui5-message-strip-root-hide-close-button": this.hideCloseButton,
 				[this.designClasses]: true,
 			},

diff --git a/packages/main/test/pages/MessageStrip.html b/packages/main/test/pages/MessageStrip.html
@@ -59,11 +59,24 @@
 	<ui5-message-strip design="ColorSet2" color-scheme="9" class="top"><ui5-icon name="palette" slot="icon"></ui5-icon>Color Set 2 - color-scheme 9</ui5-message-strip>
 	<ui5-message-strip design="ColorSet2" color-scheme="10" class="top"><ui5-icon name="palette" slot="icon"></ui5-icon>Color Set 2 - color-scheme 10</ui5-message-strip>
 
+	<br />
+	<br />
+	<ui5-button id="btn" /> Change design</ui5-button>
+	<br />
+	<br />
+	<ui5-message-strip id="ms">MessageStrip w/ default properties</ui5-message-strip>
+
 	<script>
 		var counter = 0;
 		messageStrip.addEventListener("ui5-close", function() {
 			inputField.value = ++counter;
 		});
+
+		const mStrip = document.getElementById('ms');
+		document.getElementById('btn').addEventListener('click', () => {
+			mStrip.design = 'ColorSet1';
+			mStrip.colorScheme = '1';
+		});
 	</script>
 </body>
 </html>
diff --git a/packages/main/test/specs/MessageStrip.spec.js b/packages/main/test/specs/MessageStrip.spec.js
@@ -60,6 +60,15 @@ describe("API", () => {
 		// Assert
 		assert.strictEqual(messageStripColorScheme3, "3",  "colorScheme property should be equal to '3' by default'");
 	});
+
+	it("Message strip is rendered without icon when design changes from default to a specific color set and scheme", async () => {
+		const messageStrip = await browser.$("#ms");
+		const btn = await browser.$("#btn");
+
+		await btn.click();
+
+		assert.strictEqual(await messageStrip.shadow$(".ui5-message-strip-icon").isExisting(), false, "Message strip does not render icon");
+	});
 });
 
 describe("ARIA Support", () => {
@@ -101,4 +110,3 @@ describe("ARIA Support", () => {
 		assert.strictEqual(await customMessageStripInvisibleText.getText(), resourceBundleText.custom, "Hidden element content is correct");
 	});
 });
-