feat(ui5-li-notification-group): add new features - growing and stick…

…y header (#9783) * feat(ui5-li-notification-group): add new features - growing and sticky header According to the new design the notification groups should be able to grow by pressing "More" button. Then the "load-more" event will be fired and more notifications can be loaded. The other new feature is the sticky header, which stays on top of the popover with notifications, when the user scrolls down. When next group is reached the sticky header will be replaced with the new one corresponding to the currently visible group. JIRA: BGSOFUIRODOPI-3224 --------- Co-authored-by: Teodor Taushanov <[email protected]>
SAP · Sep 10, 2024 · a40a451 · a40a451
1 parent 5ba5c9b
commit a40a451
Show file tree

Hide file tree

Showing 17 changed files with 390 additions and 10 deletions.
diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs
@@ -43,7 +43,9 @@
 				id="{{_id}}-notificationsList"
 				class="ui5-nli-group-items"
 				role="list"
-				aria-labelledby="{{_id}}-title-text">
+				aria-labelledby="{{_id}}-title-text"
+				growing={{growing}}
+				@ui5-load-more="{{_onLoadMore}}">
 				<slot></slot>
 			</ui5-notification-group-list>
 		</div>

diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts
@@ -8,6 +8,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type NotificationListGrowingMode from "@ui5/webcomponents/dist/types/NotificationListGrowingMode.js";
 import NotificationListGroupList from "./NotificationListGroupList.js";
 import NotificationListItemBase from "./NotificationListItemBase.js";
 import type NotificationListItem from "./NotificationListItem.js";
@@ -89,6 +90,14 @@ type NotificationListGroupItemToggleEventDetail = {
  */
 @event("toggle")
 
+/**
+ * Fired when additional items are requested.
+ *
+ * @public
+ * @since 2.2.0
+ */
+@event("load-more")
+
 class NotificationListGroupItem extends NotificationListItemBase {
 	/**
 	 * Defines if the group is collapsed or expanded.
@@ -98,6 +107,16 @@ class NotificationListGroupItem extends NotificationListItemBase {
 	@property({ type: Boolean })
 	collapsed = false;
 
+	/**
+	 * Defines whether the component will have growing capability by pressing a `More` button.
+	 * When button is pressed `load-more` event will be fired.
+	 * @default false
+	 * @public
+	 * @since 2.2.0
+	 */
+	@property()
+	growing: `${NotificationListGrowingMode}` = "None";
+
 	/**
 	 * Defines the items of the `ui5-li-notification-group`,
 	 * usually `ui5-li-notification` items.
@@ -190,6 +209,15 @@ class NotificationListGroupItem extends NotificationListItemBase {
 		this.toggleCollapsed();
 	}
 
+	_onLoadMore() {
+		this.fireEvent("load-more");
+	}
+
+	get loadMoreButton() {
+		const innerList = this.getDomRef()?.querySelector("[ui5-notification-group-list]") as NotificationListGroupList;
+		return innerList.getDomRef()?.querySelector("[growing-button-inner]") as HTMLElement;
+	}
+
 	async _onkeydown(e: KeyboardEvent) {
 		const isFocused = this.matches(":focus");
 		if (!isFocused) {

diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts
@@ -17,6 +17,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
 import type Menu from "@ui5/webcomponents/dist/Menu.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
 import NotificationListItemImportance from "./types/NotificationListItemImportance.js";
 import NotificationListItemBase from "./NotificationListItemBase.js";
 import type NotificationList from "./NotificationList.js";
@@ -300,7 +301,7 @@ class NotificationListItem extends NotificationListItemBase {
 	}
 
 	get hasDesc() {
-		return !!this.description.length;
+		return willShowContent(this.description);
 	}
 
 	get hasImportance() {

diff --git a/packages/fiori/src/themes/NotificationList.css b/packages/fiori/src/themes/NotificationList.css
@@ -1,3 +1,7 @@
 :host(:not([hidden])) {
 	display: block;
+}
+
+[ui5-notification-list-internal] {
+	height: 100%;
 }
diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css
@@ -27,7 +27,9 @@
 
 .ui5-nli-group-header {
 	height: 2.75rem;
-	position: relative;
+	position: sticky;
+	top: 0;
+	z-index: 90; /* the z-index of the busy-indicator is 99 and the header shouldn't be over it */
 	background: var(--sapList_GroupHeaderBackground);
 	display: flex;
 	align-items: center;
@@ -79,3 +81,32 @@
 :host([ui5-li-notification-group]) {
 	-webkit-tap-highlight-color: transparent;
 }
+
+/* "More" button overrides follows */
+[ui5-notification-group-list]::part(growing-button) {
+	border: none;
+}
+
+[ui5-notification-group-list]::part(growing-button-inner) {
+	margin: var(--_ui5-notification_item-margin);
+	border: var(--_ui5-notification_item-border-top-left-right);
+	border-radius: var(--_ui5-notification_item-border-radius);
+}
+
+[ui5-notification-group-list]::part(growing-button-inner) {
+	border-radius: var(--_ui5-notification_item-border-radius);
+}
+
+[ui5-notification-group-list]::part(growing-button-inner):focus,
+[ui5-notification-group-list]::part(growing-button-inner):focus-visible {
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);;
+	outline-offset: var(--_ui5-notification_item-outline-offset);
+}
+
+[ui5-notification-group-list]::part(growing-button-inner):focus:active,
+[ui5-notification-group-list]::part(growing-button-inner):focus-visible:active {
+	background-color: var(--_ui5-notification_item-background-color-active);
+	border-radius: var(--_ui5-notification_item-border-radius);
+	border: var(--_ui5-notification_item-border-active);
+}
+
diff --git a/packages/fiori/src/themes/base/NotificationListItem-parameters.css b/packages/fiori/src/themes/base/NotificationListItem-parameters.css
@@ -18,6 +18,7 @@
 	--_ui5-notification_item-description-margin-top: 0.75rem;
 	--_ui5-notification_item-footer-margin-top: 0.75rem;
 	--_ui5-notification_item-focus-offset: 0;
+	--_ui5-notification_item-outline-offset: 0;
 }
 
 [data-ui5-compact-size],

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,7 @@
 :root {
 	--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
 	--_ui5-notification_group_header-border-bottom-width: 0;
-	--_ui5-notification_group_header-margin: 0.75rem 0.5rem;
+	--_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);
@@ -16,4 +16,5 @@
 	--_ui5-notification_item-content-padding: 0.75rem 0;
 	--_ui5-notification_item-title-margin-bottom: 0;
 	--_ui5-notification_item-focus-offset: 0.1875rem;
+	--_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/
 }
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,7 @@
 :root {
 	--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
 	--_ui5-notification_group_header-border-bottom-width: 0;
-	--_ui5-notification_group_header-margin: 0.75rem 0.5rem;
+	--_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);
@@ -16,4 +16,5 @@
 	--_ui5-notification_item-content-padding: 0.75rem 0;
 	--_ui5-notification_item-title-margin-bottom: 0;
 	--_ui5-notification_item-focus-offset: 0.1875rem;
+	--_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/
 }
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,7 @@
 :root {
 	--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
 	--_ui5-notification_group_header-border-bottom-width: 0;
-	--_ui5-notification_group_header-margin: 0.75rem 0.5rem;
+	--_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);
@@ -18,4 +18,5 @@
 	--_ui5-notification_item-title-padding-end-two-buttons: 4.875rem;
 	--_ui5-notification_item-title-padding-end-one-button: 2.375rem;
 	--_ui5-notification_item-focus-offset: 0.1875rem;
+	--_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/
 }
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,7 @@
 :root {
 	--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
 	--_ui5-notification_group_header-border-bottom-width: 0;
-	--_ui5-notification_group_header-margin: 0.75rem 0.5rem;
+	--_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);
@@ -18,4 +18,5 @@
 	--_ui5-notification_item-title-padding-end-two-buttons: 4.875rem;
 	--_ui5-notification_item-title-padding-end-one-button: 2.375rem;
 	--_ui5-notification_item-focus-offset: 0.1875rem;
+	--_ui5-notification_item-outline-offset: -0.375rem; /*2 x --_ui5-notification_item-focus-offset*/
 }