From 5810040f60349cac61732002f3c0fb2216e896c6 Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Wed, 16 Dec 2020 12:03:46 +0200
Subject: [PATCH 1/2] fix(ui5-li-notification-group): align prio icon

---
 packages/fiori/src/NotificationListItem.js              | 4 ++++
 packages/fiori/src/themes/NotificationListGroupItem.css | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/fiori/src/NotificationListItem.js b/packages/fiori/src/NotificationListItem.js
index f6bd742c509b..a899a01e2316 100644
--- a/packages/fiori/src/NotificationListItem.js
+++ b/packages/fiori/src/NotificationListItem.js
@@ -94,6 +94,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
diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css
index 5c74b93558b6..6e9ade3b51e9 100644
--- a/packages/fiori/src/themes/NotificationListGroupItem.css
+++ b/packages/fiori/src/themes/NotificationListGroupItem.css
@@ -28,7 +28,7 @@
 }
 
 .ui5-nli-group-toggle-btn {
-	margin-right: 1rem;
+	margin-right: 0.75rem;
 	cursor: pointer;
 }
 

From 002d46c1d7b71488ab39a94e7c4d669d156833c9 Mon Sep 17 00:00:00 2001
From: ilhan <ilhan.myumyun@sap.com>
Date: Mon, 11 Jan 2021 16:36:38 +0200
Subject: [PATCH 2/2] small  fix

---
 packages/fiori/src/NotificationListItem.hbs        | 2 +-
 packages/fiori/src/themes/NotificationListItem.css | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs
index 740d6b3966dd..e2cd7539a99d 100644
--- a/packages/fiori/src/NotificationListItem.hbs
+++ b/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}}"
diff --git a/packages/fiori/src/themes/NotificationListItem.css b/packages/fiori/src/themes/NotificationListItem.css
index f7c7ccaa47e2..1172bc0b321e 100644
--- a/packages/fiori/src/themes/NotificationListItem.css
+++ b/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;