feat(ui5-li): add description property (#54)

SAP · Feb 15, 2019 · fe79710 · fe79710
1 parent 33152b9
commit fe79710
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 29 deletions.
diff --git a/packages/main/src/StandardListItem.hbs b/packages/main/src/StandardListItem.hbs
@@ -1,7 +1,14 @@
 {{>include "./ListItem.hbs"}}
 
 {{#*inline "listItemContent"}}
-	<span class="sapMSLITitle">{{ctr._nodeText}}</span>
+	<div class="sapMSLITextWrapper">
+		{{#if ctr._nodeText}}
+			<span class="sapMSLITitle">{{ctr._nodeText}}</span>
+		{{/if}}
+		{{#if ctr.description}}
+			<span class="sapMSLIDescription">{{ctr.description}}</span>
+		{{/if}}
+	</div>
 {{/inline}}
 
 {{#*inline "imageBegin"}}

diff --git a/packages/main/src/StandardListItem.js b/packages/main/src/StandardListItem.js
@@ -17,6 +17,16 @@ const metadata = {
 	usesNodeText: true,
 	properties: /** @lends sap.ui.webcomponents.main.StandardListItem.prototype */ {
 
+		/**
+		 * Defines the description displayed right under the item text, if such is present.
+		 * @type {String}
+		 * @public
+		 */
+		description: {
+			type: String,
+			defaultValue: "",
+		},
+
 		/**
 		 * Defines the <code>icon</code> source URI.
 		 * </br></br>

diff --git a/packages/main/src/StandardListItemTemplateContext.js b/packages/main/src/StandardListItemTemplateContext.js
@@ -6,10 +6,13 @@ class StandardListItemTemplateContext {
 		const hasIcon = !!state.icon;
 		const iconEnd = state.iconEnd;
 		const hasImage = !!state.image;
+		const hasDesc = state.description && !!state.description.length;
+		const hasTitle = state._nodeText && !!state._nodeText.length;
 
 		context.displayImage = hasImage;
 		context.displayIconBegin = (hasIcon && !iconEnd);
 		context.displayIconEnd = (hasIcon && iconEnd);
+		context.classes.main.sapMSLIWithTitleAndDescription = hasDesc && hasTitle;
 
 		return context;
 	}

diff --git a/packages/main/src/themes/base/ListItem.less b/packages/main/src/themes/base/ListItem.less
@@ -11,18 +11,42 @@
 /* ======================================= */
 
 .sapMSLI {
-	&.sapMLIBActive .sapMSLITitle {
+	&.sapMLIBActive .sapMSLITitle,
+	&.sapMLIBActive .sapMSLIDescription {
 		color: @sapUiListActiveTextColor;
 	}
 
+	&.sapMSLIWithTitleAndDescription {
+		height: 5rem;
+		padding: 1rem;
+
+		.sapMSLITitle {
+			padding-bottom: 0.375rem;
+		}
+	}
+
+	.sapMSLITextWrapper {
+		display: flex;
+		flex-direction: column;
+		min-width: 1px;
+		line-height: normal;
+	}
+
 	.sapMSLITitle {
+		font-size: @sapMFontLargeSize;
+		color: @sapUiListTextColor;
+	}
+
+	.sapMSLITitle,
+	.sapMSLIDescription {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		font-size: 1rem;
-		height: 3rem;
-		line-height: 3rem;
-		color: @sapUiListTextColor;
+	}
+
+	.sapMSLIDescription {
+		font-size: @sapMFontMediumSize;
+		color: @sapUiContentLabelColor;
 	}
 
 	.sapMSLIImg {

diff --git a/packages/main/src/themes/sap_fiori_3/ListItem.less b/packages/main/src/themes/sap_fiori_3/ListItem.less
@@ -4,12 +4,7 @@
 @import "../base/ListItem.less";
 
 /* ============================= */
-/* Global Belize parameters      */
+/* Global Fiori 3 parameters     */
 /* ============================= */
 @import "./base.less";
-@import "./global.less";
-
-/* ======================================= */
-/* CSS for control sap.m/StandardListItem  */
-/* Belize theme                            */
-/* ======================================= */
+@import "./global.less";
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/List_test_page.html b/packages/main/test/sap/ui/webcomponents/main/pages/List_test_page.html
@@ -38,6 +38,12 @@
 	<button id="btnAfter">After</button>
 	<label id="lblResult">0</label>
 
+	<ui5-list id="listWithDesc">
+		<ui5-li image="./img/HT-1000.jpg" type="Active" description="2GB RAM, Intel i7 4.5 GHz">Laptop HP</ui5-li>
+		<ui5-li image="./img/HT-2026.jpg" type="Active" description="2GB RAM, Intel i7 4.5 GHz">Audio cabel</ui5-li>
+		<ui5-li image="./img/HT-2002.jpg" type="Active" description="2GB RAM, Intel i7 4.5 GHz">DVD set</ui5-li>
+	</ui5-list>
+
 	<script>
 		'use strict';
 

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
@@ -40,18 +40,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://meal" type="Active">Pineapple</ui5-li>
-				<ui5-li icon="sap-icon://meal" type="Active">Orange</ui5-li>
-				<ui5-li icon="sap-icon://meal" type="Active">Banana</ui5-li>
-				<ui5-li icon="sap-icon://meal" type="Active">Mango</ui5-li>
+				<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="Tropical plant with an edible fruit">Pineapple</ui5-li>
+				<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="Occurs between red and yellow">Orange</ui5-li>
+				<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="The yellow lengthy fruit">Banana</ui5-li>
+				<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="The tropical stone fruit">Mango</ui5-li>
 			</ui5-list>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-list id="myList" class="full-width">
-	<ui5-li icon="sap-icon://meal" type="Active">Pineapple</ui5-li>
-	<ui5-li icon="sap-icon://meal" type="Active">Orange</ui5-li>
-	<ui5-li icon="sap-icon://meal" type="Active">Banana</ui5-li>
-	<ui5-li icon="sap-icon://meal" type="Active">Mango</ui5-li>
+	<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="Tropical plant with an edible fruit">Pineapple</ui5-li>
+	<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="Occurs between red and yellow">Orange</ui5-li>
+	<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="The yellow lengthy fruit">Banana</ui5-li>
+	<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="The tropical stone fruit">Mango</ui5-li>
 </ui5-list>
 		</xmp></pre>
 	</section>
@@ -63,7 +63,7 @@ <h3>List in Single-selection Mode</h3>
 				<ui5-li key="Argentina" type="Active" selected icon="sap-icon://map" icon-end>Argentina</ui5-li>
 				<ui5-li key="Bulgaria" type="Active" icon="sap-icon://map" icon-end>Bulgaria</ui5-li>
 				<ui5-li key="China" type="Active" icon="sap-icon://map" icon-end>China</ui5-li>
-				<ui5-li key="Europe" type="Inactive"  icon="sap-icon://map" icon-end>Europe (ui5-li type='Inactive')</ui5-li>
+				<ui5-li key="Denmark" type="Inactive"  icon="sap-icon://map" icon-end>Denmark (ui5-li type='Inactive')</ui5-li>
 			</ui5-list>
 
 			<script>
@@ -76,10 +76,10 @@ <h3>List in Single-selection Mode</h3>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-list id="country-selector" mode="SingleSelect" header-text="Select a country:">
-	<ui5-li key="argentina" type="Active" selected icon="sap-icon://map" icon-end>Argentina</ui5-li>
-	<ui5-li key="bulgaria" type="Active" icon="sap-icon://map" icon-end>Bulgaria</ui5-li>
-	<ui5-li key="china" type="Active" icon="sap-icon://map" icon-end>China</ui5-li>
-	<ui5-li key="europe" type="Inactive" icon="sap-icon://map" icon-end>Europe (ui5-li type='Inactive')</ui5-li>
+	<ui5-li key="Argentina" type="Active" selected icon="sap-icon://map" icon-end>Argentina</ui5-li>
+	<ui5-li key="Bulgaria" type="Active" icon="sap-icon://map" icon-end>Bulgaria</ui5-li>
+	<ui5-li key="China" type="Active" icon="sap-icon://map" icon-end>China</ui5-li>
+	<ui5-li key="Denmark" type="Inactive"  icon="sap-icon://map" icon-end>Denmark (ui5-li type='Inactive')</ui5-li>
 </ui5-list>
 
 <script>
@@ -152,7 +152,7 @@ <h3>List Item Separation Types</h3>
 				<ui5-li icon="sap-icon://product" type="Active">Item #2</ui5-li>
 				<ui5-li icon="sap-icon://product" type="Active">Item #3</ui5-li>
 			</ui5-list>
-			<ui5-list  header-text="Inner separators" separators="Inner" class="full-width">
+			<ui5-list header-text="Inner separators" separators="Inner" class="full-width">
 				<ui5-li icon="sap-icon://shipping-status" type="Active">Devilered</ui5-li>
 				<ui5-li icon="sap-icon://shipping-status" type="Active">Pending</ui5-li>
 				<ui5-li icon="sap-icon://shipping-status" type="Active">Declined</ui5-li>
@@ -164,7 +164,7 @@ <h3>List Item Separation Types</h3>
 	<ui5-li icon="sap-icon://product" type="Active">Item #2</ui5-li>
 	<ui5-li icon="sap-icon://product" type="Active">Item #3</ui5-li>
 </ui5-list>
-<ui5-list  header-text="Inner separators" separators="Inner" class="full-width">
+<ui5-list header-text="Inner separators" separators="Inner" class="full-width">
 	<ui5-li icon="sap-icon://shipping-status" type="Active">Devilered</ui5-li>
 	<ui5-li icon="sap-icon://shipping-status" type="Active">Pending</ui5-li>
 	<ui5-li icon="sap-icon://shipping-status" type="Active">Declined</ui5-li>

diff --git a/packages/main/test/specs/List.spec.js b/packages/main/test/specs/List.spec.js
@@ -99,7 +99,7 @@ describe("List Tests", () => {
 		assert.ok(browser.$('#btnAfter').isFocused(), "focus is outside the list");
 	});
 
-	it("inner single selection sradio button checkbox is skipped on tab", () => {
+	it("inner single selection radio button checkbox is skipped on tab", () => {
 		browser.url("http://localhost:8080/test-resources/sap/ui/webcomponents/main/pages/List_test_page.html");
 		list.root.setProperty("mode", "SingleSelect");
 
@@ -110,4 +110,16 @@ describe("List Tests", () => {
 
 		assert.ok(browser.$('#btnAfter').isFocused(), "focus is outside the list");
 	});
+
+	it("item size and classed, when an item has both text and description", () => {
+		const ITEM_WITH_DESCRIPTION_AND_TITLE_HEIGHT = 80;
+		const firstItem =  $("#listWithDesc ui5-li[slot=items-1]");
+		const firstItemHeight = firstItem.getSize("height");
+		const rootElement =  browser.findElementDeep("#listWithDesc ui5-li[slot=items-1] >>> .sapMSLI");
+		const descriptionElement =  browser.findElementDeep("#listWithDesc ui5-li[slot=items-1] >>> .sapMSLIDescription");
+
+		assert.strictEqual(firstItemHeight, ITEM_WITH_DESCRIPTION_AND_TITLE_HEIGHT, "The size of the item is : " + firstItemHeight);
+		assert.ok(descriptionElement, "The description span is rendered.");
+		assert.ok(rootElement.hasClass("sapMSLIWithTitleAndDescription"), "The sapMSLIWithTitleAndDescription class is added to the root element.");
+	});
 });