From 9e1af1789af122d9c644246fdf7dac9e27b50606 Mon Sep 17 00:00:00 2001
From: yanaminkova <32466553+yanaminkova@users.noreply.github.com>
Date: Wed, 20 Jan 2021 18:50:40 +0200
Subject: [PATCH] feat(ui5-tree-item): implement info/infoState attributes
(#2711)
Info and infoState attributes are added to ui5-tree-item.
Fixes: #2633
---
packages/main/src/Tree.hbs | 2 ++
packages/main/src/TreeItem.js | 25 ++++++++++++++++
packages/main/src/TreeListItem.hbs | 12 ++++++--
packages/main/src/TreeListItem.js | 25 ++++++++++++++++
packages/main/src/themes/TreeListItem.css | 35 +++++++++++++++++++++++
packages/main/test/pages/Tree.html | 8 +++---
6 files changed, 100 insertions(+), 7 deletions(-)
diff --git a/packages/main/src/Tree.hbs b/packages/main/src/Tree.hbs
index 48950cf83d59..b8076eca7da5 100644
--- a/packages/main/src/Tree.hbs
+++ b/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}}"
diff --git a/packages/main/src/TreeItem.js b/packages/main/src/TreeItem.js
index 3cf944df82c8..b91c3cd3ca99 100644
--- a/packages/main/src/TreeItem.js
+++ b/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 info
, 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 info
.
+ *
+ * Available options are: "None"
(by default), "Success"
, "Warning"
, "Information"
and "Erorr"
.
+ * @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 */ {
diff --git a/packages/main/src/TreeListItem.hbs b/packages/main/src/TreeListItem.hbs
index fa5011a22933..8a24a9cbb12b 100644
--- a/packages/main/src/TreeListItem.hbs
+++ b/packages/main/src/TreeListItem.hbs
@@ -18,9 +18,15 @@
{{/inline}}
{{#*inline "listItemContent"}}
- {{#if _showTitle}}
-
info
, 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 info
.
+ * "None"
(by default), "Success"
, "Warning"
, "Information"
and "Erorr"
.
+ * @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
*
diff --git a/packages/main/src/themes/TreeListItem.css b/packages/main/src/themes/TreeListItem.css
index 584753a201a5..07fd8185305f 100644
--- a/packages/main/src/themes/TreeListItem.css
+++ b/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%;
+}
\ No newline at end of file
diff --git a/packages/main/test/pages/Tree.html b/packages/main/test/pages/Tree.html
index b8599f560d3a..9e05bff58c1b 100644
--- a/packages/main/test/pages/Tree.html
+++ b/packages/main/test/pages/Tree.html
@@ -74,10 +74,10 @@