fix(ui5-li-notification-group): align priority icon (#2584)

Now the priority icon of the NotificationListGroupItem and the children items are aligned.

Author: ilhan007

packages/fiori/src/NotificationListItem.hbs

@@ -49,7 +49,7 @@
 	</div>
 
 	<div class="ui5-nli-content {{classes.content}}">
-		<div class="ui5-nli-heading">
+		<div class="ui5-nli-heading-wrapper">
 			{{#if hasPriority}}
 				<ui5-icon
 					class="ui5-prio-icon ui5-prio-icon--{{priorityIcon}}"

packages/fiori/src/NotificationListItem.js

@@ -81,6 +81,10 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> Consider using the <code>ui5-avatar</code> to display icons, initials or images.
+		 * <br>
+		 * <b>Note:</b>In order to be complaint with the UX guidlines and for best experience,
+		 * we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the <code>ui5-avatar</code>
+		 * you can set its <code>size</code><code> property to <code>XS</code> to get the required size - <code><ui5-avatar size="XS"></code>.
 		 *
 		 * @type {HTMLElement}
 		 * @slot

packages/fiori/src/themes/NotificationListGroupItem.css

@@ -32,7 +32,7 @@
 }
 
 .ui5-nli-group-toggle-btn {
-	margin-right: 1rem;
+	margin-right: 0.75rem;
 	cursor: pointer;
 }
 

packages/fiori/src/themes/NotificationListItem.css

@@ -65,6 +65,11 @@
 	box-sizing: border-box;
 }
 
+.ui5-nli-heading-wrapper {
+	display: flex;
+	flex-direction: row;
+}
+
 .ui5-nli-heading {
 	display: flex;
 	margin-bottom: 0.25rem;