fix(ui5-li-notification-group): correct collapse button shape on Comp…

…act mode (#8166) The button should not chanage its shape when clicked. Fixes #8059
SAP · Jan 25, 2024 · 226d975 · 226d975
1 parent 3666e56
commit 226d975
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs
@@ -10,7 +10,7 @@
 >
 	<div class="ui5-nli-group-header">
 		<ui5-button
-			icon="navigation-right-arrow"
+			icon={{groupCollapsedIcon}}
 			design="Transparent"
 			@click="{{_onBtnToggleClick}}"
 			class="ui5-nli-group-toggle-btn"

diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts
@@ -206,6 +206,10 @@ class NotificationListGroupItem extends NotificationListItemBase {
 		return !this.collapsed;
 	}
 
+	get groupCollapsedIcon() {
+		return this.collapsed ? "navigation-right-arrow" : "navigation-down-arrow";
+	}
+
 	/**
 	 * Event handlers
 	 *

diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css
@@ -5,10 +5,6 @@
 	--_ui5-notification_item-border-raius: 0px;
 }
 
-:host(:not([collapsed])) .ui5-nli-group-toggle-btn {
-	transform: var(--_ui5_li_notification_group_toggle_btn_rotation);
-}
-
 :host([collapsed]) .ui5-nli-group-items {
 	display: none;
 }

diff --git a/packages/fiori/test/pages/NotificationListGroupItem.html b/packages/fiori/test/pages/NotificationListGroupItem.html
@@ -16,6 +16,7 @@
 
 	<ui5-shellbar id="shellbar" primary-title="Product Title" show-notifications>
 	</ui5-shellbar>
+	<ui5-button id="btnCompact">Toggle sapUiSizeCompact</ui5-button>
 
 	<ui5-list id="notificationList" header-text="Notifications grouped">
 		<ui5-li-notification-group
@@ -308,6 +309,10 @@
 				wcToastBS.textContent = event.detail.item.titleText;
 				wcToastBS.show();
 		});
+
+		btnCompact.addEventListener("click", function() {
+			document.getElementsByTagName("body")[0].classList.toggle("sapUiSizeCompact");
+		});
 	</script>
 </body>
 </html>