fix(ui5-notification-list-group): group header hight is shorter when …

…collapsed (#9953) Removes unnecessary space between collapsed group headers Fixes: #9911
SAP · Oct 14, 2024 · 4c8a76e · 4c8a76e
1 parent e1182a9
commit 4c8a76e
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);