From 4c8a76edb5699810addd5c77fac2eabd507568f3 Mon Sep 17 00:00:00 2001
From: kskondov <konstantin.kondov@sap.com>
Date: Mon, 14 Oct 2024 09:40:02 +0300
Subject: [PATCH] fix(ui5-notification-list-group): group header hight is
 shorter when collapsed (#9953)

Removes unnecessary space between collapsed group headers

Fixes: #9911
---
 packages/fiori/src/NotificationListGroupItem.hbs     |  3 ++-
 packages/fiori/src/NotificationListGroupItem.ts      |  2 +-
 .../fiori/src/themes/NotificationListGroupItem.css   | 12 +++++++++++-
 .../themes/base/NotificationListItem-parameters.css  |  1 +
 .../sap_horizon/NotificationListItem-parameters.css  |  1 -
 .../NotificationListItem-parameters.css              |  1 -
 .../NotificationListItem-parameters.css              |  1 -
 .../NotificationListItem-parameters.css              |  1 -
 8 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs
index 5b4a6a10e976..2f76a034b41a 100644
--- a/packages/fiori/src/NotificationListGroupItem.hbs
+++ b/packages/fiori/src/NotificationListGroupItem.hbs
@@ -21,7 +21,8 @@
 				@click="{{_onHeaderToggleClick}}"
 				@keydown="{{_onkeydown}}"
 				role="button"
-				aria-expanded="{{_ariaExpanded}}"
+				aria-expanded="{{_expanded}}"
+				expanded="{{_expanded}}"
 				aria-controls="{{_id}}-notificationsList"
 				title="{{toggleIconAccessibleName}}">
 				<ui5-icon
diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts
index f31fe3d06476..075c492b0812 100644
--- a/packages/fiori/src/NotificationListGroupItem.ts
+++ b/packages/fiori/src/NotificationListGroupItem.ts
@@ -188,7 +188,7 @@ class NotificationListGroupItem extends NotificationListItemBase {
 		return ids.join(" ");
 	}
 
-	get _ariaExpanded() {
+	get _expanded() {
 		return !this.collapsed;
 	}
 
diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css
index fb5eea563d5c..d6962316c259 100644
--- a/packages/fiori/src/themes/NotificationListGroupItem.css
+++ b/packages/fiori/src/themes/NotificationListGroupItem.css
@@ -26,7 +26,7 @@
 }
 
 .ui5-nli-group-header {
-	height: calc(2.75rem + 2 * var(--_ui5-notification_group_header-margin));
+	height: 2.75rem;
 	position: sticky;
 	top: 0;
 	z-index: 90; /* the z-index of the busy-indicator is 99 and the header shouldn't be over it */
@@ -39,6 +39,11 @@
 	border-bottom: var(--_ui5-notification_group_header-border-bottom-width) solid var(--sapList_GroupHeaderBorderColor);
 	box-sizing: border-box;
 	cursor: pointer;
+	margin-bottom: var(--_ui5-notification_group_header-margin-expanded)
+}
+
+.ui5-nli-group-header[expanded="false"] {
+	margin-bottom: var(--_ui5-notification_group_header-margin);
 }
 
 /* The focus is on the whole group but should be visualized on the Group Header */
@@ -54,6 +59,11 @@
 	pointer-events: none;
 }
 
+:host([desktop]) .ui5-nli-focusable.ui5-nli-group-root:focus .ui5-nli-group-header[expanded="false"]::before,
+.ui5-nli-focusable.ui5-nli-group-root:focus-visible .ui5-nli-group-header[expanded="false"]::before {
+	margin-bottom: var(--_ui5-notification_group_header-margin);
+}
+
 .ui5-nli-group-toggle-icon {
 	min-width: 1rem;
 	min-height: 1rem;
diff --git a/packages/fiori/src/themes/base/NotificationListItem-parameters.css b/packages/fiori/src/themes/base/NotificationListItem-parameters.css
index afa0a68c1f4b..074829d00102 100644
--- a/packages/fiori/src/themes/base/NotificationListItem-parameters.css
+++ b/packages/fiori/src/themes/base/NotificationListItem-parameters.css
@@ -2,6 +2,7 @@
 	--_ui5-notification_item-border-radius: 0px;
 	--_ui5-notification_group_header-border-bottom-width: 0.0625rem;
 	--_ui5-notification_group_header-margin: 0px;
+	--_ui5-notification_group_header-margin-expanded: 0.5rem;
 	--_ui5-notification_group_header-padding: 1rem 0.5rem;
 	--_ui5-notification_item-state-icon-padding: 0.625rem;
 	--_ui5-notification_item-border-bottom: var(--ui5-listitem-border-bottom);
diff --git a/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css
index 551a7d8ce99f..55a74c19ef8d 100644
--- a/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css
@@ -3,7 +3,6 @@
 :root {
 	--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
 	--_ui5-notification_group_header-border-bottom-width: 0;
-	--_ui5-notification_group_header-margin: 0.75rem;
 	--_ui5-notification_group_header-padding: 0.5rem;
 	--_ui5-notification_item-state-icon-padding: 0.25rem;
 	--_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
diff --git a/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css
index 551a7d8ce99f..55a74c19ef8d 100644
--- a/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_dark/NotificationListItem-parameters.css
@@ -3,7 +3,6 @@
 :root {
 	--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
 	--_ui5-notification_group_header-border-bottom-width: 0;
-	--_ui5-notification_group_header-margin: 0.75rem;
 	--_ui5-notification_group_header-padding: 0.5rem;
 	--_ui5-notification_item-state-icon-padding: 0.25rem;
 	--_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css
index f67e2f9790b6..c49f4af33ff3 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/NotificationListItem-parameters.css
@@ -3,7 +3,6 @@
 :root {
 	--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
 	--_ui5-notification_group_header-border-bottom-width: 0;
-	--_ui5-notification_group_header-margin: 0.75rem;
 	--_ui5-notification_group_header-padding: 0.5rem;
 	--_ui5-notification_item-state-icon-padding: 0.25rem;
 	--_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css
index f67e2f9790b6..c49f4af33ff3 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/NotificationListItem-parameters.css
@@ -3,7 +3,6 @@
 :root {
 	--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
 	--_ui5-notification_group_header-border-bottom-width: 0;
-	--_ui5-notification_group_header-margin: 0.75rem;
 	--_ui5-notification_group_header-padding: 0.5rem;
 	--_ui5-notification_item-state-icon-padding: 0.25rem;
 	--_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);