fix(ui5-li-notification, ui5-li-notification-group): rename heading property to titleText (#3586)

BREAKING CHANGE The property "heading" property has been renamed to "titleText"

Author: fifoosid

packages/base/hash.txt

@@ -1 +1 @@
-L4iGj2puGZcQfMJ02grqW31YqrU=
+4ww8NXNfQEKz/jKz4fx9NcfWBUE=

packages/fiori/src/NotificationListGroupItem.hbs

@@ -27,8 +27,8 @@
 			</ui5-icon>
 		{{/if}}
 
-		<div id="{{_id}}-heading" class="ui5-nli-group-heading" part="heading">
-			{{heading}}
+		<div id="{{_id}}-title-text" class="ui5-nli-group-title-text" part="title-text">
+			{{titleText}}
 		</div>
 
 		{{#if showCounter}}

packages/fiori/src/NotificationListGroupItem.js

@@ -96,7 +96,7 @@ const metadata = {
  * <ul>
  * <li><code>Toggle</code> button to expand and collapse the group</li>
  * <li><code>Priority</code> icon to display the priority of the group</li>
- * <li><code>Heading</code> to entitle the group</li>
+ * <li><code>TitleText</code> to entitle the group</li>
  * <li>Custom actions - with the use of <code>ui5-notification-action</code></li>
  * <li>Items of the group</li>
  * </ul>
@@ -110,7 +110,7 @@ const metadata = {
  * <br>
  * The <code>ui5-li-notification-group</code> exposes the following CSS Shadow Parts:
  * <ul>
- * <li>heading - Used to style the heading of the notification list group item</li>
+ * <li>title-text - Used to style the titleText of the notification list group item</li>
  * </ul>
  *
  * <h3>ES6 Module Import</h3>
@@ -232,8 +232,8 @@ class NotificationListGroupItem extends NotificationListItemBase {
 		const id = this._id;
 		const ids = [];
 
-		if (this.hasHeading) {
-			ids.push(`${id}-heading`);
+		if (this.hasTitleText) {
+			ids.push(`${id}-title-text`);
 		}
 
 		ids.push(`${id}-invisibleText`);

packages/fiori/src/NotificationListItem.hbs

@@ -49,16 +49,16 @@
 	</div>
 
 	<div class="ui5-nli-content {{classes.content}}">
-		<div class="ui5-nli-heading-wrapper">
+		<div class="ui5-nli-title-text-wrapper">
 			{{#if hasPriority}}
 				<ui5-icon
 					class="ui5-prio-icon ui5-prio-icon--{{priorityIcon}}"
 					name="{{priorityIcon}}">
 				</ui5-icon>
 			{{/if}}
 
-			<div id="{{_id}}-heading" class="ui5-nli-heading" part="heading">
-				{{heading}}
+			<div id="{{_id}}-title-text" class="ui5-nli-title-text" part="title-text">
+				{{titleText}}
 			</div>
 		</div>
 

packages/fiori/src/NotificationListItem.js

@@ -44,11 +44,11 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
 
 		/**
-		 * Defines if the <code>heading</code> and <code>description</code> should wrap,
+		 * Defines if the <code>titleText</code> and <code>description</code> should wrap,
 		 * they truncate by default.
 		 *
 		 * <br><br>
-		 * <b>Note:</b> by default the <code>heading</code> and <code>decription</code>,
+		 * <b>Note:</b> by default the <code>titleText</code> and <code>decription</code>,
 		 * and a <code>ShowMore/Less</code> button would be displayed.
 		 * @type {WrappingType}
 		 * @defaultvalue "None"
@@ -61,7 +61,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the state of the <code>heading</code> and <code>description</code>,
+		 * Defines the state of the <code>titleText</code> and <code>description</code>,
 		 * if less or more information is displayed.
 		 * @private
 		 */
@@ -137,14 +137,14 @@ const metadata = {
  * The <code>ui5-li-notification</code> is a type of list item, meant to display notifications.
  * <br>
  *
- * The component has a rich set of various properties that allows the user to set <code>avatar</code>, <code>heading</code>, descriptive <code>content</code>
+ * The component has a rich set of various properties that allows the user to set <code>avatar</code>, <code>titleText</code>, descriptive <code>content</code>
  * and <code>footnotes</code> to fully describe a notification.
  * <br>
  *
  * The user can:
  * <ul>
  * <li>display a <code>Close</code> button</li>
- * <li>can control whether the <code>heading</code> and <code>description</code> should wrap or truncate
+ * <li>can control whether the <code>titleText</code> and <code>description</code> should wrap or truncate
  * and display a <code>ShowMore</code> button to switch between less and more information</li>
  * <li>add custom actions by using the <code>ui5-notification-action</code> component</li>
  * </ul>
@@ -158,7 +158,7 @@ const metadata = {
  * <br>
  * The <code>ui5-li-notification</code> exposes the following CSS Shadow Parts:
  * <ul>
- * <li>heading - Used to style the heading of the notification list item</li>
+ * <li>title-text - Used to style the titleText of the notification list item</li>
  * </ul>
  *
  * <h3>ES6 Module Import</h3>
@@ -180,8 +180,8 @@ class NotificationListItem extends NotificationListItemBase {
 	constructor() {
 		super();
 
-		// the heading overflow height
-		this._headingOverflowHeight = 0;
+		// the titleText overflow height
+		this._titleTextOverflowHeight = 0;
 
 		// the description overflow height
 		this._descOverflowHeight = 0;
@@ -260,30 +260,30 @@ class NotificationListItem extends NotificationListItemBase {
 		return this.shadowRoot.querySelector(".ui5-nli-description");
 	}
 
-	get headingDOM() {
-		return this.shadowRoot.querySelector(".ui5-nli-heading");
+	get titleTextDOM() {
+		return this.shadowRoot.querySelector(".ui5-nli-title-text");
 	}
 
-	get headingHeight() {
-		return this.headingDOM.offsetHeight;
+	get titleTextHeight() {
+		return this.titleTextDOM.offsetHeight;
 	}
 
 	get descriptionHeight() {
 		return this.descriptionDOM.offsetHeight;
 	}
 
-	get headingOverflows() {
-		const heading = this.headingDOM;
+	get titleTextOverflows() {
+		const titleText = this.titleTextDOM;
 
-		if (!heading) {
+		if (!titleText) {
 			return false;
 		}
 
 		if (isIE()) {
-			return heading.scrollHeight > MAX_WRAP_HEIGHT;
+			return titleText.scrollHeight > MAX_WRAP_HEIGHT;
 		}
 
-		return heading.offsetHeight < heading.scrollHeight;
+		return titleText.offsetHeight < titleText.scrollHeight;
 	}
 
 	get descriptionOverflows() {
@@ -313,8 +313,8 @@ class NotificationListItem extends NotificationListItemBase {
 		const id = this._id;
 		const ids = [];
 
-		if (this.hasHeading) {
-			ids.push(`${id}-heading`);
+		if (this.hasTitleText) {
+			ids.push(`${id}-title-text`);
 		}
 		if (this.hasDesc) {
 			ids.push(`${id}-description`);
@@ -413,17 +413,17 @@ class NotificationListItem extends NotificationListItemBase {
 			return;
 		}
 
-		const headingWouldOverflow = this.headingHeight > this._headingOverflowHeight;
+		const titleTextWouldOverflow = this.titleTextHeight > this._titleTextOverflowHeight;
 		const descWouldOverflow = this.hasDesc && this.descriptionHeight > this._descOverflowHeight;
-		const overflows = headingWouldOverflow || descWouldOverflow;
+		const overflows = titleTextWouldOverflow || descWouldOverflow;
 
 		if (this._showMorePressed && overflows) {
 			this._showMore = true;
 			return;
 		}
 
-		if (this.headingOverflows || this.descriptionOverflows) {
-			this._headingOverflowHeight = this.headingHeight;
+		if (this.titleTextOverflows || this.descriptionOverflows) {
+			this._titleTextOverflowHeight = this.titleTextHeight;
 			this._descOverflowHeight = this.hasDesc ? this.descriptionHeight : 0;
 			this._showMore = true;
 			return;

packages/fiori/src/NotificationListItemBase.js

@@ -26,12 +26,12 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
 
 		/**
-		 * Defines the <code>heading</code> of the item.
+		 * Defines the <code>titleText</code> of the item.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 */
-		heading: {
+		titleText: {
 			type: String,
 		},
 
@@ -66,7 +66,7 @@ const metadata = {
 		/**
 		 * Defines if the <code>notification</code> is new or has been already read.
 		 * <br><br>
-		 * <b>Note:</b> if set to <code>false</code> the <code>heading</code> has bold font,
+		 * <b>Note:</b> if set to <code>false</code> the <code>titleText</code> has bold font,
 		 * if set to true - it has a normal font.
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -167,8 +167,8 @@ class NotificationListItemBase extends ListItemBase {
 		};
 	}
 
-	get hasHeading() {
-		return !!this.heading.length;
+	get hasTitleText() {
+		return !!this.titleText.length;
 	}
 
 	get hasPriority() {

packages/fiori/src/themes/NotificationListGroupItem.css

@@ -9,7 +9,7 @@
 	display: none;
 }
 
-:host([read]) .ui5-nli-group-heading {
+:host([read]) .ui5-nli-group-title-text {
 	font-weight: normal;
 }
 
@@ -36,7 +36,7 @@
 	cursor: pointer;
 }
 
-.ui5-nli-group-heading {
+.ui5-nli-group-title-text {
 	color: var(--sapGroup_TitleTextColor);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontHeader6Size);

packages/fiori/src/themes/NotificationListItem.css

@@ -1,7 +1,7 @@
 @import "./NotificationListItemBase.css";
 @import "./NotificationPrioIcon.css";
 
-:host([wrapping-type="None"]) .ui5-nli-heading {
+:host([wrapping-type="None"]) .ui5-nli-title-text {
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
@@ -15,15 +15,15 @@
 	overflow: hidden;
 }
 
-:host([_show-more-pressed]) .ui5-nli-heading {
+:host([_show-more-pressed]) .ui5-nli-title-text {
 	-webkit-line-clamp: unset;
 }
 
 :host([_show-more-pressed]) .ui5-nli-description  {
 	-webkit-line-clamp: unset;
 }
 
-:host([read]) .ui5-nli-heading {
+:host([read]) .ui5-nli-title-text {
 	font-weight: normal;
 }
 
@@ -32,11 +32,11 @@
 	max-height: 32px;
 }
 
-:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-heading {
+:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-title-text {
 	max-height: 32px;
 }
 
-:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-heading {
+:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-title-text {
 	max-height: inherit;
 }
 
@@ -66,18 +66,18 @@
 	box-sizing: border-box;
 }
 
-.ui5-nli-heading-wrapper {
+.ui5-nli-title-text-wrapper {
 	display: flex;
 	flex-direction: row;
 }
 
-.ui5-nli-heading {
+.ui5-nli-title-text {
 	display: flex;
 	margin-bottom: 0.25rem;
 	box-sizing: border-box;
 }
 
-.ui5-nli-heading {
+.ui5-nli-title-text {
 	color: var(--sapGroup_TitleTextColor);
 	font-weight: bold;
 	font-size: var(--sapFontHeader6Size);