feat(ui5-li): add info and infoState properties (#539)

SAP · Jun 11, 2019 · f1d8a85 · f1d8a85
1 parent 71e7495
commit f1d8a85
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 17 deletions.
diff --git a/packages/main/src/StandardListItem.hbs b/packages/main/src/StandardListItem.hbs
@@ -9,6 +9,9 @@
 			<span class="sapMSLIDescription">{{description}}</span>
 		{{/if}}
 	</div>
+	{{#if info}}
+		<span class="{{classes.info}}">{{info}}</span>
+	{{/if}}
 {{/inline}}
 
 {{#*inline "imageBegin"}}

diff --git 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 <code>info</code>, displayed in the end of the list item.
+		 * @type {string}
+		 * @public
+		 * @since 0.13.0
+		 */
+		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> and <code>"Erorr"</code>.
+		 * @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
@@ -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
@@ -16,14 +16,14 @@ <h2>ui5-list</h2>
 
 	<ui5-list header-text="API: GroupHeaderListItem" mode="MultiSelect">
 		<ui5-li-groupheader>New Items</ui5-li-groupheader>
-		<ui5-li image="./img/HT-1000.jpg" icon="sap-icon://navigation-right-arrow" >Laptop HP</ui5-li>
-		<ui5-li image="./img/HT-1010.jpg" icon="sap-icon://navigation-right-arrow" >Laptop Lenovo</ui5-li>
-		<ui5-li image="./img/HT-1022.jpg" icon="sap-icon://navigation-right-arrow" >IPhone 3</ui5-li>
+		<ui5-li image="./img/HT-1000.jpg" icon="sap-icon://navigation-right-arrow" info="Available">Laptop HP</ui5-li>
+		<ui5-li image="./img/HT-1010.jpg" icon="sap-icon://navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">Laptop Lenovo</ui5-li>
+		<ui5-li image="./img/HT-1022.jpg" icon="sap-icon://navigation-right-arrow" info="Re-stock" description="#12331232131"  info-state="Error">IPhone 3</ui5-li>
 
 		<ui5-li-groupheader>Discounted Items</ui5-li-groupheader>
-		<ui5-li image="./img/HT-1030.jpg"  icon-end icon="sap-icon://navigation-right-arrow">HP Monitor 24</ui5-li>
-		<ui5-li image="./img/HT-2026.jpg"  icon-end icon="sap-icon://navigation-right-arrow">Audio cabel</ui5-li>
-		<ui5-li image="./img/HT-2002.jpg"  icon-end icon="sap-icon://navigation-right-arrow">DVD set</ui5-li>
+		<ui5-li image="./img/HT-1030.jpg"  icon-end icon="sap-icon://navigation-right-arrow" description="#12331232131"  info="Reuqired" info-state="Error">HP Monitor 24</ui5-li>
+		<ui5-li image="./img/HT-2026.jpg"  icon-end icon="sap-icon://navigation-right-arrow" description="#12331232131"  info="Available" info-state="Success">Audio cabel</ui5-li>
+		<ui5-li image="./img/HT-2002.jpg"  icon-end icon="sap-icon://navigation-right-arrow" info="Reuqired" info-state="Warning">DVD set</ui5-li>
 
 		<ui5-li-groupheader>Discounted Items</ui5-li-groupheader>
 		<ui5-li image="./img/HT-1030.jpg"  icon="sap-icon://navigation-right-arrow">HP Monitor 24</ui5-li>

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
@@ -41,18 +41,18 @@ <h2 class="control-header">List</h2>
 		<h3>Basic List</h3>
 		<div class="snippet">
 			<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>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <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>
 		</xmp></pre>
 	</section>