fix(ui5-li-notification): It is now possible to not have a description (

SAP#2744)
NHristov-sap · Feb 9, 2021 · 4048e33 · 4048e33
1 parent 0a0cd9c
commit 4048e33
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/packages/fiori/src/NotificationListItem.js b/packages/fiori/src/NotificationListItem.js
@@ -401,7 +401,7 @@ class NotificationListItem extends NotificationListItemBase {
 		}
 
 		const headingWouldOverflow = this.headingHeight > this._headingOverflowHeight;
-		const descWouldOverflow = this.descriptionHeight > this._descOverflowHeight;
+		const descWouldOverflow = this.hasDesc && this.descriptionHeight > this._descOverflowHeight;
 		const overflows = headingWouldOverflow || descWouldOverflow;
 
 		if (this._showMorePressed && overflows) {
@@ -411,7 +411,7 @@ class NotificationListItem extends NotificationListItemBase {
 
 		if (this.headingOverflows || this.descriptionOverflows) {
 			this._headingOverflowHeight = this.headingHeight;
-			this._descOverflowHeight = this.descriptionHeight;
+			this._descOverflowHeight = this.hasDesc ? this.descriptionHeight : 0;
 			this._showMore = true;
 			return;
 		}

diff --git a/packages/fiori/test/pages/NotificationListItem.html b/packages/fiori/test/pages/NotificationListItem.html
@@ -182,7 +182,7 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">John Doe</span>
 				<span slot="footnotes">2 Days</span>
 				<span slot="footnotes">Other stuff</span>
-	
+
 				<ui5-notification-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 				<ui5-notification-action
 					id="rejectBtnInPopover"
@@ -192,41 +192,41 @@ <h3>Events on ui5-list level</h3>
 					slot="actions">
 				</ui5-notification-action>
 			</ui5-li-notification>
-	
+
 			<ui5-li-notification
 				show-close
 				heading="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
 				priority="High"
 			>
 				And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
 				<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
-	
+
 				<span slot="footnotes">Office Notifications</span>
 				<span slot="footnotes">3 Days</span>
-	
+
 				<ui5-notification-action id="acceptBtn2InPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
-	
+
 			<ui5-li-notification
 				heading="New order (#2565) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
 				priority="Medium"
 			>
 					Short description
 				<ui5-avatar initials="JS" size="XS" slot="avatar"></ui5-avatar>
-	
+
 				<span slot="footnotes">Patricia Clarck</span>
 				<span slot="footnotes">3 Days</span>
-	
+
 				<ui5-notification-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-action>
 				<ui5-notification-action icon="decline" design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
-	
+
 			<ui5-li-notification heading="New order (#2523)">
 				<div>. With a very long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.</div>
-	
+
 				<span slot="footnotes">John SMith</span>
 				<span slot="footnotes">3 Days</span>
-	
+
 				<ui5-notification-action icon="message-error" design="Negative" text="Reject" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
 		</ui5-list>