feat(ui5-li): highlight property added (#8421)

Fixes: #8317

packages/main/src/ListItem.hbs

@@ -33,6 +33,10 @@
 			{{> selectionElement}}
 		{{/if}}
 
+		{{#if _hasHighlightColor}}
+			<div class="ui5-li-highlight"></div>
+		{{/if}}
+
 		<div part="content" id="{{_id}}-content" class="ui5-li-content">
 			{{> imageBegin}}
 			{{> iconBegin}}

packages/main/src/ListItem.ts

@@ -9,6 +9,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/edit.js";
+import HighlightTypes from "./types/HighlightTypes.js";
 import ListItemType from "./types/ListItemType.js";
 import ListMode from "./types/ListMode.js";
 import ListItemBase from "./ListItemBase.js";
@@ -165,6 +166,16 @@ abstract class ListItem extends ListItemBase {
 	@property()
 	title!: string;
 
+	/**
+	 * Defines the highlight state of the list items.
+	 * Available options are: `"None"` (by default), `"Success"`, `"Warning"`, `"Information"` and `"Error"`.
+	 * @default "None"
+	 * @public
+	 * @since 1.24
+	 */
+	@property({ type: HighlightTypes, defaultValue: HighlightTypes.None })
+	highlight!: `${HighlightTypes}`;
+
 	/**
 	 * Indicates if the list item is actionable, e.g has hover and pressed effects.
 	 * @private
@@ -491,6 +502,10 @@ abstract class ListItem extends ListItemBase {
 		};
 	}
 
+	get _hasHighlightColor() {
+		return this.highlight !== HighlightTypes.None;
+	}
+
 	get hasConfigurableMode() {
 		return true;
 	}

packages/main/src/themes/ListItem.css

@@ -222,3 +222,30 @@
 :host [ui5-checkbox].ui5-li-singlesel-radiobtn {
 	margin-right: var(--_ui5_list_item_cb_margin_right);
 }
+
+/* highlight */
+.ui5-li-highlight {
+	position: absolute;
+    width: 0.375rem;
+    bottom: 0;
+    left: 0;
+    top: 0;
+    border-inline-end: 0.0625rem solid var(--ui5-listitem-background-color);
+    box-sizing: border-box;
+}
+
+:host([highlight="Error"]) .ui5-li-highlight {
+	background: var(--sapNegativeTextColor);
+}
+
+:host([highlight="Warning"]) .ui5-li-highlight {
+	background: var(--sapCriticalTextColor);
+}
+
+:host([highlight="Success"]) .ui5-li-highlight {
+	background: var(--sapPositiveTextColor);
+}
+
+:host([highlight="Information"]) .ui5-li-highlight {
+	background: var(--sapInformativeTextColor);
+}

packages/main/src/types/HighlightTypes.ts

@@ -0,0 +1,33 @@
+/**
+ * Different types of HighlightTypes .
+ *
+ * @public
+ */
+enum HighlightTypes {
+	/**
+	 * @public
+	 */
+	None = "None",
+
+	/**
+	 * @public
+	 */
+	Success = "Success",
+
+	/**
+	 * @public
+	 */
+	Warning = "Warning",
+
+	/**
+	 * @public
+	 */
+	Error = "Error",
+
+	/**
+	 * @public
+	 */
+	Information = "Information",
+}
+
+export default HighlightTypes;

packages/main/test/pages/List.html

@@ -219,6 +219,15 @@ <h3 id="infoLbl">Items 3/3</h3>
 
 	<br/><br/>
 
+	<ui5-list header-text="API: Highlight">
+		<ui5-li highlight="Error" image="./img/HT-1000.jpg" >Laptop HP</ui5-li>
+		<ui5-li highlight="Information" image="./img/HT-1010.jpg" >laptop Lenovo</ui5-li>
+		<ui5-li highlight="Success" image="./img/HT-1022.jpg" >IPhone 3</ui5-li>
+		<ui5-li highlight="Warning" image="./img/HT-2002.jpg" >DVD set</ui5-li>
+	</ui5-list>
+
+	<br/><br/>
+
 	<ui5-list header-text="API: noDataText" separators="None" no-data-text="No Data Available"></ui5-list>
 
 	<ui5-list header-text="API: CustomListItem" mode="SingleSelectEnd">

packages/main/test/pages/List_test_page.html

@@ -322,6 +322,13 @@ <h2 id="testHeader">Test aria</h2>
 		</ui5-li-custom>
 	</ui5-list>
 
+	<ui5-list id="highlight">
+		<ui5-li highlight="Error" image="./img/HT-1000.jpg" >Laptop HP</ui5-li>
+		<ui5-li highlight="Information" image="./img/HT-1010.jpg" >laptop Lenovo</ui5-li>
+		<ui5-li highlight="Success" image="./img/HT-1022.jpg" >IPhone 3</ui5-li>
+		<ui5-li highlight="Warning" image="./img/HT-2002.jpg" >DVD set</ui5-li>
+	</ui5-list>
+
 	<input id="customListItemSelectResult" value="0"/>
 
 	<script>

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

@@ -616,6 +616,21 @@ describe("List Tests", () => {
 		assert.strictEqual(rootTooltip, innerTooltip, "Tooltip of root element and title of inner li element are equal after runtime change.");
 	});
 
+	it("Tests the highlight property", async () => {
+		const listItem = await browser.$("#highlight ui5-li:nth-child(1)");
+		const initialValueState = "Error";
+		let highlightValue = await listItem.getProperty("highlight");
+
+		assert.strictEqual(highlightValue, initialValueState, "Highlight property is correctly set to the list item.");
+
+		const newValueState = "Information";
+		await listItem.setProperty("highlight", "Information");
+		highlightValue = await listItem.getProperty("highlight");
+
+		assert.strictEqual(highlightValue, newValueState, "Highlight property is correctly changed.");
+
+	});
+
 	it("Tests the growingButtonText property", async () => {
 		const list = await browser.$("#infiniteScrollEx2");
 		const btnText = "Custom text"

packages/playground/_stories/main/List/List.stories.ts

@@ -221,3 +221,16 @@ export const SeparationTypes: StoryFn = () =>
       <ui5-li icon="shipping-status">Pending</ui5-li>
       <ui5-li icon="shipping-status">Declined</ui5-li>
     </ui5-list>`;
+
+export const HighlightTypes: StoryFn = () =>
+  html` <ui5-list
+      header-text="Highlight Types"
+      separators="Inner"
+      class="full-width"
+    >
+      <ui5-li highlight="None">None</ui5-li>
+      <ui5-li highlight="Success">Success</ui5-li>
+      <ui5-li highlight="Warning">Warning</ui5-li>
+      <ui5-li highlight="Error">Error</ui5-li>
+      <ui5-li highlight="Information">Information</ui5-li>
+    </ui5-list>`;