feat(ui5-li): title attribute handle (#3385)

SAP · Jun 30, 2021 · ec4273d · ec4273d
1 parent 2bf99af
commit ec4273d
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 3 deletions.
diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs
@@ -14,6 +14,7 @@
 	aria-selected="{{ariaSelected}}"
 	role="{{_accInfo.role}}"
 	aria-expanded="{{_accInfo.ariaExpanded}}"
+	title="{{title}}"
 	aria-level="{{_accInfo.ariaLevel}}"
 	aria-posinset="{{_accInfo.posinset}}"
 	aria-setsize="{{_accInfo.setsize}}"

diff --git a/packages/main/src/ListItem.js b/packages/main/src/ListItem.js
@@ -46,6 +46,17 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the tooltip of the component.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		title: {
+			type: String,
+		},
+
 		/**
 		 * Indicates if the list item is actionable, e.g has hover and pressed effects.
 		 *

diff --git a/packages/main/src/SuggestionListItem.js b/packages/main/src/SuggestionListItem.js
@@ -21,7 +21,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 		"default": {
-			propertyName: "title",
+			propertyName: "titleText",
 		},
 	},
 };
@@ -48,11 +48,11 @@ class SuggestionListItem extends StandardListItem {
 
 	onBeforeRendering(...params) {
 		super.onBeforeRendering(...params);
-		this.hasTitle = !!this.title.length;
+		this.hasTitle = !!this.titleText.length;
 	}
 
 	get effectiveTitle() {
-		return this.title.map(el => el.textContent).join("");
+		return this.titleText.filter(node => node.nodeType !== Node.COMMENT_NODE).map(el => el.textContent).join("");
 	}
 
 	get hasDescription() {

diff --git a/packages/main/src/Tree.hbs b/packages/main/src/Tree.hbs
@@ -17,6 +17,7 @@
             icon="{{this.treeItem.icon}}"
             info="{{this.treeItem.info}}"
             info-state="{{this.treeItem.infoState}}"
+            title="{{this.treeItem.title}}"
             ?_toggle-button-end="{{ ../_toggleButtonEnd}}"
             ?_minimal="{{../_minimal}}"
             .treeItem="{{this.treeItem}}"

diff --git a/packages/main/src/TreeItem.js b/packages/main/src/TreeItem.js
@@ -91,6 +91,17 @@ const metadata = {
 			type: ValueState,
 			defaultValue: ValueState.None,
 		},
+
+		/**
+		 * Defines the tooltip of the component.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		title: {
+			type: String,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.TreeItem.prototype */ {