feature(ui5-messagestrip): allow any content for the icon (#1216)

Author: vladitasev

packages/main/src/MessageStrip.hbs

@@ -5,7 +5,13 @@
 	aria-labelledby="{{_id}}">
 
 	{{#unless noIcon}}
-		<ui5-icon class="ui5-messagestrip-icon" name="{{messageStripIcon}}"></ui5-icon>
+        <div  class="ui5-messagestrip-icon">
+            {{#if iconProvided}}
+                <slot name="icon"></slot>
+            {{else}}
+                <ui5-icon name="{{standardIconName}}"></ui5-icon>
+            {{/if}}
+        </div>
 	{{/unless}}
 
 	<span class="ui5-hidden-text">{{hiddenText}}</span>

packages/main/src/MessageStrip.js

@@ -38,27 +38,8 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the icon src URI to be displayed as graphical element within the <code>ui5-messagestrip</code>.
-		 * <br><br>
-		 * <b>Note:</b> If no icon is given, the default icon for the <code>ui5-messagestrip</code> type will be added.
-		 * The SAP-icons font provides numerous options.
-		 * <br><br>
-		 * Example:
-		 * <br>
-		 * <pre>ui5-messagestrip icon="palette"</pre>
-		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		icon: {
-			type: String,
-		},
-
-		/**
-		 * Defines whether the MessageStrip renders icon in the beginning.
+		 * Defines whether the MessageStrip will show an icon in the beginning.
+		 * You can directly provide an icon with the <code>icon</code> slot. Otherwise, the default icon for the type will be used.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -91,6 +72,23 @@ const metadata = {
 		"default": {
 			type: Node,
 		},
+
+		/**
+		 * Defines the content to be displayed as graphical element within the <code>ui5-messagestrip</code>.
+		 * <br><br>
+		 * <b>Note:</b> If no icon is given, the default icon for the <code>ui5-messagestrip</code> type will be used.
+		 * The SAP-icons font provides numerous options.
+		 * <br><br>
+		 *
+		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		"icon": {
+			type: HTMLElement,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
 
@@ -222,8 +220,12 @@ class MessageStrip extends UI5Element {
 		};
 	}
 
-	get messageStripIcon() {
-		return this.icon || MessageStrip.iconMappings()[this.type];
+	get iconProvided() {
+		return this.icon.length > 0;
+	}
+
+	get standardIconName() {
+		return MessageStrip.iconMappings()[this.type];
 	}
 
 	get typeClasses() {

packages/main/test/pages/MessageStrip.html

@@ -43,6 +43,9 @@
 	<ui5-messagestrip no-icon no-close-button class="top" type="Information">Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure.</ui5-messagestrip>
 	<ui5-messagestrip no-close-button class="top" type="Information">Ea mollit nulla laborum et fugiat nulla excepteur ea. Duis et dolor enim Lorem laboris adipisicing cillum quis proident dolor veniam voluptate. Nostrud dolore ipsum anim voluptate enim dolore eiusmod aliqua et. Est eu ex dolor ea ipsum. Adipisicing duis aliquip ullamco culpa dolore exercitation ullamco cillum irure.</ui5-messagestrip>
 
+    <ui5-messagestrip type="Warning" class="top"><ui5-icon name="palette" slot="icon"></ui5-icon>Custom icon</ui5-messagestrip>
+
+    <ui5-messagestrip type="Positive" class="top"><img src="./img/loading.gif" width="16" height="16" slot="icon">Custom icon</ui5-messagestrip>
 
 	<script>
 		var counter = 0;

packages/main/test/pages/img/loading.gif

@@ -78,12 +78,16 @@ <h3>Custom MessageStrip</h3>
 		<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" type="Positive" no-close-button>Successfull login!</ui5-messagestrip>
 		<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" type="Negative" no-icon>Access denied!</ui5-messagestrip>
 		<ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" type="Warning">Update is required.</ui5-messagestrip>
+        <ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" type="Warning"><ui5-icon name="palette" slot="icon"></ui5-icon>Custom icon</ui5-messagestrip>
+        <ui5-messagestrip class="samples-margin-bottom samples-vertical-align" style="width: 200px;" type="Positive"><img src="../../../assets/images/loading.gif" width="16" height="16" slot="icon">Custom animated gif</ui5-messagestrip>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-messagestrip type="Information" style="width: 200px;" no-icon no-close-button>You have new message.</ui5-messagestrip>
 <ui5-messagestrip type="Positive" style="width: 200px;" no-close-button>Successfull login!</ui5-messagestrip>
 <ui5-messagestrip type="Negative" style="width: 200px;" no-icon>Access denied!</ui5-messagestrip>
 <ui5-messagestrip type="Warning" style="width: 200px;">Update is required.</ui5-messagestrip>
+<ui5-messagestrip type="Warning" style="width: 200px;"><ui5-icon name="palette" slot="icon"></ui5-icon>Custom icon</ui5-messagestrip>
+<ui5-messagestrip type="Positive" style="width: 200px;"><img src="../../../assets/images/loading.gif" width="16" height="16" slot="icon">Custom animated gif</ui5-messagestrip>
 <script>
 	document.querySelectorAll("ui5-messagestrip").forEach(function(messageStrip) {
 		messageStrip.addEventListener("close", function() {