diff --git a/packages/main/src/StandardListItem.hbs b/packages/main/src/StandardListItem.hbs
index acd2482a7db8..21bf9e237cdd 100644
--- a/packages/main/src/StandardListItem.hbs
+++ b/packages/main/src/StandardListItem.hbs
@@ -9,6 +9,9 @@
{{description}}
{{/if}}
+ {{#if info}}
+ {{info}}
+ {{/if}}
{{/inline}}
{{#*inline "imageBegin"}}
diff --git a/packages/main/src/StandardListItem.js b/packages/main/src/StandardListItem.js
index e82ef23af27a..95a6a71e1620 100644
--- a/packages/main/src/StandardListItem.js
+++ b/packages/main/src/StandardListItem.js
@@ -1,11 +1,10 @@
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
+import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
import ListItem from "./ListItem.js";
import Icon from "./Icon.js";
import StandardListItemTemplate from "./build/compiled/StandardListItemTemplate.lit.js";
-// Styles
-
// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
import "./ThemePropertiesProvider.js";
@@ -65,6 +64,29 @@ const metadata = {
image: {
type: String,
},
+
+ /**
+ * Defines the info, displayed in the end of the list item.
+ * @type {string}
+ * @public
+ * @since 0.13.0
+ */
+ info: {
+ type: String,
+ },
+
+ /**
+ * Defines the state of the info.
+ *
+ * Available options are: "None""Success", "Warning" and "Erorr".
+ * @type {string}
+ * @public
+ * @since 0.13.0
+ */
+ infoState: {
+ type: ValueState,
+ defaultValue: ValueState.None,
+ },
},
slots: /** @lends sap.ui.webcomponents.main.StandardListItem.prototype */ {
/**
@@ -131,10 +153,17 @@ class StandardListItem extends ListItem {
const result = super.classes;
const hasDesc = this.description && !!this.description.length;
const hasTitle = this.textContent;
+ const infoState = this.infoState.toLowerCase();
// Modify main classes
result.main.sapMSLIWithTitleAndDescription = hasDesc && hasTitle;
+ // Add "info" classes
+ result.info = {
+ "sapMSLI-info": true,
+ [`sapMSLI-info--${infoState}`]: true,
+ };
+
return result;
}
diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css
index 7fda01b25093..79b15cd6093d 100644
--- a/packages/main/src/themes/ListItem.css
+++ b/packages/main/src/themes/ListItem.css
@@ -1,6 +1,7 @@
.sapMSLI.sapMLIBActive .sapMSLITitle,
-.sapMSLI.sapMLIBActive .sapMSLIDescription {
+.sapMSLI.sapMLIBActive .sapMSLIDescription,
+.sapMSLI.sapMLIBActive .sapMSLI-info {
color: var(--sapUiListActiveTextColor);
}
@@ -9,6 +10,7 @@
flex-direction: column;
min-width: 1px;
line-height: normal;
+ flex: auto;
}
.sapMSLI .sapMSLITitle {
@@ -28,6 +30,28 @@
color: var(--sapUiContentLabelColor);
}
+.sapMSLI-info {
+ margin: 0 0.25rem;
+ color: var(--sapUiNeutralText);
+ font-size: 0.875rem;
+ flex-shrink: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.sapMSLI-info--warning {
+ color: var(--sapUiCriticalText);
+}
+
+.sapMSLI-info--success {
+ color: var(--sapUiPositiveText);
+}
+
+.sapMSLI-info--error {
+ color: var(--sapUiNegativeText);
+}
+
.sapMSLI .sapMSLIImg {
margin: 0.5rem 0.75rem 0.5rem 0rem;
height: 2rem;
@@ -63,6 +87,10 @@
padding-bottom: 0.375rem;
}
+.sapMSLI.sapMSLIWithTitleAndDescription .sapMSLI-info {
+ align-self: flex-end;
+}
+
/* Compact size */
.sapUiSizeCompact.sapMSLI:not(.sapMSLIWithTitleAndDescription) {
height: 2rem;
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/List.html b/packages/main/test/sap/ui/webcomponents/main/pages/List.html
index 2b388fab451f..4b508b67f7b4 100644
--- a/packages/main/test/sap/ui/webcomponents/main/pages/List.html
+++ b/packages/main/test/sap/ui/webcomponents/main/pages/List.html
@@ -16,14 +16,14 @@ ui5-list
New Items
- Laptop HP
- Laptop Lenovo
- IPhone 3
+ Laptop HP
+ Laptop Lenovo
+ IPhone 3
Discounted Items
- HP Monitor 24
- Audio cabel
- DVD set
+ HP Monitor 24
+ Audio cabel
+ DVD set
Discounted Items
HP Monitor 24
diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/List.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/List.sample.html
index fbe7b5bbd7d1..785e06a5bd68 100644
--- a/packages/main/test/sap/ui/webcomponents/main/samples/List.sample.html
+++ b/packages/main/test/sap/ui/webcomponents/main/samples/List.sample.html
@@ -41,18 +41,18 @@
Basic List
- Pineapple
- Orange
- Banana
- Mango
+ Pineapple
+ Orange
+ Banana
+ Mango
<![CDATA[
<ui5-list id="myList" class="full-width">
- <ui5-li icon="sap-icon://nutrition-activity" description="Tropical plant with an edible fruit">Pineapple</ui5-li>
- <ui5-li icon="sap-icon://nutrition-activity" description="Occurs between red and yellow">Orange</ui5-li>
- <ui5-li icon="sap-icon://nutrition-activity" description="The yellow lengthy fruit">Banana</ui5-li>
- <ui5-li icon="sap-icon://nutrition-activity" description="The tropical stone fruit">Mango</ui5-li>
+ <ui5-li icon="sap-icon://nutrition-activity" description="Tropical plant with an edible fruit" info="In-stock" info-state="Success">Pineapple</ui5-li>
+ <ui5-li icon="sap-icon://nutrition-activity" description="Occurs between red and yellow" info="Expires" info-state="Warning">Orange</ui5-li>
+ <ui5-li icon="sap-icon://nutrition-activity" description="The yellow lengthy fruit" info="Re-stock" info-state="Error">Banana</ui5-li>
+ <ui5-li icon="sap-icon://nutrition-activity" description="The tropical stone fruit" info="Re-stock" info-state="Error">Mango</ui5-li>
</ui5-list>
]]>