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

…collapsed There was too much space between collapsed group headers Fixes: #9911
SAP · Sep 27, 2024 · da1dddc · da1dddc
1 parent b8b9a98
commit da1dddc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css
@@ -41,6 +41,10 @@
 	cursor: pointer;
 }
 
+.ui5-nli-group-header[aria-expanded="false"] {
+	height: 2.75rem;
+}
+
 /* The focus is on the whole group but should be visualized on the Group Header */
 :host([desktop]) .ui5-nli-focusable.ui5-nli-group-root:focus .ui5-nli-group-header::before,
 .ui5-nli-focusable.ui5-nli-group-root:focus-visible .ui5-nli-group-header::before {
@@ -54,6 +58,12 @@
 	pointer-events: none;
 }
 
+:host([desktop]) .ui5-nli-focusable.ui5-nli-group-root:focus .ui5-nli-group-header[aria-expanded="false"]::before,
+.ui5-nli-focusable.ui5-nli-group-root:focus-visible .ui5-nli-group-header[aria-expanded="false"]::before {
+	top: var(--_ui5-notification_group_header-margin_collapsed);
+	bottom: var(--_ui5-notification_group_header-margin_collapsed);
+}
+
 .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_collapsed: 0.05rem;
 	--_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);