feat(ui5-tree-item): implement info/infoState attributes (#2711)

Info and infoState attributes are added to ui5-tree-item.

Fixes: #2633

Author: yanaminkova

packages/main/src/Tree.hbs

@@ -15,6 +15,8 @@
             type="Active"
             level="{{this.level}}"
             icon="{{this.treeItem.icon}}"
+            info="{{this.treeItem.info}}"
+            info-state="{{this.treeItem.infoState}}"
             ?_toggle-button-end="{{ ../_toggleButtonEnd}}"
             ?_minimal="{{../_minimal}}"
             .treeItem="{{this.treeItem}}"

packages/main/src/TreeItem.js

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
 /**
  * @public
@@ -66,6 +67,30 @@ const metadata = {
 		icon: {
 			type: String,
 		},
+
+		/**
+		 * Defines the <code>info</code>, displayed in the end of the tree item.
+		 * @type {string}
+		 * @public
+		 * @since 1.0.0-rc.12
+		 */
+		info: {
+			type: String,
+		},
+
+		/**
+		 * Defines the state of the <code>info</code>.
+		 * <br>
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
+		 * @type {ValueState}
+		 * @defaultvalue "None"
+		 * @public
+		 * @since 1.0.0-rc.12
+		 */
+		infoState: {
+			type: ValueState,
+			defaultValue: ValueState.None,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.TreeItem.prototype */ {

packages/main/src/TreeListItem.hbs

@@ -18,9 +18,15 @@
 {{/inline}}
 
 {{#*inline "listItemContent"}}
-	{{#if _showTitle}}
-		<div part="title" class="ui5-li-title"><slot></slot></div>
-	{{/if}}
+	<div class="ui5-li-tree-text-wrapper">
+		{{#if _showTitle}}
+			<div part="title" class="ui5-li-title"><slot></slot></div>
+		{{/if}}
+
+		{{#if info}}
+			<span part="info" class="ui5-li-tree-info">{{info}}</span>
+		{{/if}}
+	</div>
 {{/inline}}
 
 {{#*inline "imageBegin"}}{{/inline}}

packages/main/src/TreeListItem.js

@@ -1,6 +1,7 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
@@ -71,6 +72,30 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the <code>info</code>, displayed in the end of the tree item.
+		 * @type {string}
+		 * @public
+		 * @since 1.0.0-rc.12
+		 */
+		info: {
+			type: String,
+		},
+
+		/**
+		 * Defines the state of the <code>info</code>.
+		 * <br>
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
+		 * @type {ValueState}
+		 * @defaultvalue "None"
+		 * @public
+		 * @since 1.0.0-rc.12
+		 */
+		infoState: {
+			type: ValueState,
+			defaultValue: ValueState.None,
+		},
+
 		/**
 		 * Defines whether the toggle button is shown at the end, rather than at the beginning of the item
 		 *

packages/main/src/themes/TreeListItem.css

@@ -83,3 +83,38 @@
 :host([active][actionable]) .ui5-li-tree-toggle-icon {
     color: var(--sapList_Active_TextColor);
 }
+
+/* [ui5-li]: infoState */
+:host([info-state="Warning"]) .ui5-li-tree-info {
+	color: var(--sapCriticalTextColor);
+}
+
+:host([info-state="Success"]) .ui5-li-tree-info {
+	color: var(--sapPositiveTextColor);
+}
+
+:host([info-state="Error"]) .ui5-li-tree-info {
+	color: var(--sapNegativeTextColor);
+}
+
+:host([info-state="Information"]) .ui5-li-tree-info {
+	color: var(--sapInformativeTextColor);
+}
+
+/* [ui5-li]: info */
+.ui5-li-tree-info {
+	margin: 0 0.25rem;
+	color: var(--sapNeutralTextColor);
+	font-size: 0.875rem;
+	min-width: 6rem;
+	max-width: 40%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.ui5-li-tree-text-wrapper {
+	display:flex;
+	justify-content:space-between;
+	width: 100%;
+}

packages/main/test/pages/Tree.html

@@ -74,10 +74,10 @@
 			<ui5-button id="collapseAll" icon="collapse-all">Collapse All</ui5-button>
 		</div>
 
-		<ui5-tree-item expanded text="Tree 1" icon="paste" selected>
-			<ui5-tree-item expanded text="Tree 1.1" selected>
-				<ui5-tree-item text="Tree 1.1.1"></ui5-tree-item>
-				<ui5-tree-item text="Tree 1.1.2"></ui5-tree-item>
+		<ui5-tree-item expanded text="Tree 1" icon="paste" info="Available" info-state="Information" selected>
+			<ui5-tree-item expanded text="Tree 1.1" info="Re-stock" info-state="Error" selected>
+				<ui5-tree-item text="Tree 1.1.1" info="Required" info-state="Warning"></ui5-tree-item>
+				<ui5-tree-item text="Tree 1.1.2" info="Available" info-state="Success"></ui5-tree-item>
 			</ui5-tree-item>
 		</ui5-tree-item>