refactor(ui5-li-notification): rename wrap property to wrappingType (#3565)

We change the boolean "wrap" property in the Link, Label, Title to string property "wrappingType" to make it more flexible for the upcoming "hyphenated type of wrapping". The change does the same with the ui5-li-notification.

BREAKING CHANGE: Replace boolean "wrap" property with string property "wrappingType", if you previously set "wrap", now use "wrapping-type='Normal'"

Author: fifoosid

packages/fiori/src/NotificationListItem.js

@@ -9,6 +9,7 @@ import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import Link from "@ui5/webcomponents/dist/Link.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
 import NotificationListItemBase from "./NotificationListItemBase.js";
 
 // Texts
@@ -49,12 +50,14 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> by default the <code>heading</code> and <code>decription</code>,
 		 * and a <code>ShowMore/Less</code> button would be displayed.
-         * @type {boolean}
-		 * @defaultvalue false
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
 		 * @public
+		 * @since 1.0.0-rc.16
 		 */
-		wrap: {
-			type: Boolean,
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
 		},
 
 		/**
@@ -246,7 +249,7 @@ class NotificationListItem extends NotificationListItemBase {
 	}
 
 	get hideShowMore() {
-		if (!this.wrap && this._showMore) {
+		if (this.wrappingType === WrappingType.None && this._showMore) {
 			return undefined;
 		}
 
@@ -405,7 +408,7 @@ class NotificationListItem extends NotificationListItemBase {
 	}
 
 	onResize() {
-		if (this.wrap) {
+		if (this.wrappingType === WrappingType.Normal) {
 			this._showMore = false;
 			return;
 		}

packages/fiori/src/themes/NotificationListItem.css

@@ -1,14 +1,14 @@
 @import "./NotificationListItemBase.css";
 @import "./NotificationPrioIcon.css";
 
-:host(:not([wrap])) .ui5-nli-heading {
+:host([wrapping-type="None"]) .ui5-nli-heading {
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 }
 
-:host(:not([wrap])) .ui5-nli-description {
+:host(:not([wrapping-type="Normal"])) .ui5-nli-description {
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
@@ -28,11 +28,11 @@
 }
 
 /* IE */
-:host(:not([wrap])) .ui5-nli-content--ie .ui5-nli-description {
+:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-description {
 	max-height: 32px;
 }
 
-:host(:not([wrap])) .ui5-nli-content--ie .ui5-nli-heading {
+:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-heading {
 	max-height: 32px;
 }
 

packages/fiori/test/pages/NotificationListItem.html

@@ -29,7 +29,7 @@
 	<h3>Properties</h3>
 	<ul>
 		<li>heading</li>
-		<li>wrap (default: "false")</li>
+		<li>wrappingType (default: "None")</li>
 		<li>priority (default: "None")</li>
 		<li>read (default: "false")</li>
 		<li>show-close (default: "false")</li>
@@ -133,7 +133,7 @@ <h3>Events on ui5-list level</h3>
 
 		<ui5-li-notification
 			show-close
-			wrap
+			wrapping-type="Normal"
 			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."
 		>
 			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.
@@ -147,7 +147,7 @@ <h3>Events on ui5-list level</h3>
 
 		<ui5-li-notification
 			show-close
-			wrap
+			wrapping-type="Normal"
 			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"
 		>
@@ -159,7 +159,7 @@ <h3>Events on ui5-list level</h3>
 		</ui5-li-notification>
 
 		<ui5-li-notification
-			wrap
+			wrapping-type="Normal"
 			heading="New order (#2522)"
 			priority="Low"
 		>
@@ -172,7 +172,7 @@ <h3>Events on ui5-list level</h3>
 
 		<ui5-li-notification
 			heading="New order (#2523)"
-			wrap
+			wrapping-type="Normal"
 		>
 			<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>
 

packages/fiori/test/pages/NotificationList_test_page.html

@@ -108,7 +108,7 @@
 				<ui5-li-notification
 					id="nli3"
 					show-close
-					wrap
+					wrapping-type="Normal"
 					heading="New payment #2900"
 					priority="High"
 				>
@@ -125,7 +125,7 @@
 				<ui5-li-notification
 					id="nli4"
 					busy
-					wrap
+					wrapping-type="Normal"
 					show-close
 					heading="New payment #2901"
 					priority="High"
@@ -150,7 +150,7 @@
 			>
 			<ui5-li-notification
 				id="nli5"
-				wrap
+				wrapping-type="Normal"
 				show-close
 				heading="New payment #2900"
 				priority="High"