feat(ListItemType): add Detail type (#1323)

Author: dimovpetar

packages/main/src/ListItem.hbs

@@ -23,6 +23,15 @@
 		</div>
 
 		{{> iconEnd}}
+		{{#if typeDetail}}
+			<div class="ui5-li-detailbtn">
+				<ui5-button
+					design="Transparent"
+					icon="edit"
+					@click="{{onDetailClick}}"
+				></ui5-button>
+			</div>
+		{{/if}}
 
 		{{#if placeSelectionElementAfter}}
 			{{> selectionElement}}

packages/main/src/ListItem.js

@@ -1,5 +1,6 @@
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/icons/decline.js";
+import "@ui5/webcomponents-icons/dist/icons/edit.js";
 import ListItemType from "./types/ListItemType.js";
 import ListMode from "./types/ListMode.js";
 import ListItemBase from "./ListItemBase.js";
@@ -28,10 +29,10 @@ const metadata = {
 
 		/**
 		 * Defines the visual indication and behavior of the list items.
-		 * Available options are <code>Active</code> (by default) and <code>Inactive</code>.
+		 * Available options are <code>Active</code> (by default), <code>Inactive</code> and <code>Detail</code>.
 		 * <br><br>
 		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover,
-		 * while with type <code>Inactive</code> - will not.
+		 * while with type <code>Inactive</code> and <code>Detail</code> - will not.
 		 *
 		 * @type {string}
 		 * @defaultvalue "Active"
@@ -69,8 +70,14 @@ const metadata = {
 		},
 	},
 	events: {
+		/**
+		 * Fired when the user clicks on the detail button when type is <code>Detail</code>.
+		 *
+		 * @event
+		 * @public
+		 */
+		detailClick: {},
 		_press: {},
-		_detailPress: {},
 		_focused: {},
 		_focusForward: {},
 	},
@@ -220,6 +227,10 @@ class ListItem extends ListItemBase {
 		this.fireEvent("_selectionRequested", { item: this, selectionComponentPressed: false });
 	}
 
+	onDetailClick(event) {
+		this.fireEvent("detailClick", { item: this, selected: this.selected });
+	}
+
 	fireItemPress(event) {
 		if (this.isInactive) {
 			return;
@@ -229,7 +240,7 @@ class ListItem extends ListItemBase {
 	}
 
 	get isInactive() {
-		return this.type === ListItemType.Inactive;
+		return this.type === ListItemType.Inactive || this.type === ListItemType.Detail;
 	}
 
 	get placeSelectionElementBefore() {
@@ -257,6 +268,10 @@ class ListItem extends ListItemBase {
 	get modeDelete() {
 		return this._mode === ListMode.Delete;
 	}
+
+	get typeDetail() {
+		return this.type === ListItemType.Detail;
+	}
 }
 
 export default ListItem;

packages/main/src/types/ListItemType.js

@@ -18,6 +18,13 @@ const ListItemTypes = {
 	 * @type {Active}
 	 */
 	Active: "Active",
+
+	/**
+	 * Enables detail button of the list item that fires detailClick event.
+	 * @public
+	 * @type {Detail}
+	 */
+	Detail: "Detail",
 };
 
 /**

packages/main/test/pages/List.html

@@ -74,11 +74,12 @@ <h2>ui5-list</h2>
 
 	<br/><br/>
 
-	<ui5-list header-text="API: ListItem type='Active/Inactive'" mode="SingleSelect">
+	<ui5-list header-text="API: ListItem type='Active/Inactive/Detail'" mode="SingleSelect">
 		<ui5-li >Active item - press</ui5-li>
 		<ui5-li >Active item - press</ui5-li>
 		<ui5-li selected type="Inactive">Inactive item</ui5-li>
 		<ui5-li type="Inactive">Inactive item</ui5-li>
+		<ui5-li type="Detail">Detail item</ui5-li>
 	</ui5-list>
 
 	<br/><br/>
@@ -147,6 +148,7 @@ <h3 id="infoLbl">Items 3/3</h3>
 		<ui5-li id="arg">Argentina</ui5-li>
 		<ui5-li id="bg">Bulgaria</ui5-li>
 		<ui5-li id="ch">China</ui5-li>
+		<ui5-li type="Detail">Detail item</ui5-li>
 	</ui5-list>
 
 	<br/><br/>

packages/main/test/pages/List_test_page.html

@@ -113,6 +113,13 @@
 		<ui5-li type="Inactive">Inactive item</ui5-li>
 	</ui5-list>
 
+	<br/><br/>
+	<span id="detailPressCounter">0</span>
+	<ui5-list header-text="API: ListItem type='Detail'">
+		<ui5-li id="detailListItem" type="Detail">Detail item</ui5-li>
+		<ui5-li >Normal item</ui5-li>
+	</ui5-list>
+
 	<script>
 		'use strict';
 
@@ -158,6 +165,10 @@
 			}
 			loadMoreResult.value= ++loadMoreCounter;
 		});
+
+		detailListItem.addEventListener("ui5-detailClick", (e) => {
+			detailPressCounter.innerHTML = parseInt(detailPressCounter.innerHTML) + 1;
+		});
 	</script>
 </body>
 </html>

packages/main/test/specs/List.spec.js

@@ -215,4 +215,14 @@ describe("List Tests", () => {
 
 		assert.strictEqual(loadMoreResult.getAttribute("value"), "1", "The event loadMore is fired.");
 	});
+
+	it("detailPress event is fired", () => {
+		const detailCounterResult = $("#detailPressCounter");
+		const firstItem = $("#detailListItem");
+		const detailButton = firstItem.shadow$(".ui5-li-detailbtn")
+
+		detailButton.click();
+
+		assert.strictEqual(detailCounterResult.getProperty("innerHTML"), "1", "detailClick event has been fired once");
+	});
 });