feat(ui5-search-item): add delete search item functionality

Author: Vonahz

packages/fiori/cypress/specs/Search.cy.tsx

@@ -390,10 +390,10 @@ describe("Properties", () => {
 			.should("be.visible");
 	});
 
-	it("displays item's delete button on hover", () => {
+	it("displays item's delete button on hover if deletable is true", () => {
 		cy.mount(
 			<Search>
-				<SearchItem text="Item 1"/>
+				<SearchItem text="Item 1" deletable/>
 				<SearchItem text="Item 2"/>
 			</Search>
 		);
@@ -404,16 +404,26 @@ describe("Properties", () => {
 			.realClick();
 
 		cy.realPress("I");
+       
+        cy.get("[ui5-search-item]")
+			.eq(0)
+			.realHover();
 
 		cy.get("[ui5-search-item]")
+			.eq(0)
+			.shadow()
+			.find(".ui5-search-item-selected-delete")
+			.should("be.visible");
+
+        cy.get("[ui5-search-item]")
 			.eq(1)
 			.realHover();
 
 		cy.get("[ui5-search-item]")
 			.eq(1)
 			.shadow()
 			.find(".ui5-search-item-selected-delete")
-			.should("be.visible");
+			.should("not.exist");
 	});
 });
 
@@ -811,7 +821,7 @@ describe("Events", () => {
 		}
 		cy.mount(
 			<Search>
-				<SearchItem text="Item 1" icon={history} onDelete={onDelete}/>
+				<SearchItem text="Item 1" icon={history} deletable onDelete={onDelete}/>
 			</Search>
 		);
 

packages/fiori/src/SearchItem.ts

@@ -81,6 +81,14 @@ class SearchItem extends ListItemBase {
 	@property({ type: Boolean })
 	selected = false;
 
+	/**
+	 * Defines whether the search item is deletable.
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	deletable = false;
+
 	/**
 	 * Defines the scope of the search item
 	 * @default undefined

packages/fiori/src/SearchItemTemplate.tsx

@@ -43,7 +43,10 @@ export default function SearchFieldTemplate(this: SearchItem) {
 
 						<span part="subtitle" class="ui5-search-item-description">{this.description}</span>
 					</div>
-					<Button class="ui5-search-item-selected-delete" design={ButtonDesign.Transparent} icon={decline} onClick={this._onDeleteButtonClick}></Button>
+
+					{this.deletable &&
+						<Button class="ui5-search-item-selected-delete" design={ButtonDesign.Transparent} icon={decline} onClick={this._onDeleteButtonClick}></Button>
+					}
 				</div>
 			</div>
 		</li >

packages/fiori/src/themes/SearchItem.css

@@ -24,13 +24,12 @@
 	flex: 1;
 }
 
-.ui5-search-item-selected-delete {
+:host([desktop]) .ui5-search-item-selected-delete {
 	display: none;
 }
 
-:host([selected]:hover),
-:host(:focus-within),
-:host(:hover) {
+:host(:hover),
+:host(:focus-within) {
 	.ui5-search-item-selected-delete {
 		display: inline-block;
 	}

packages/fiori/test/pages/Search.html

@@ -33,9 +33,9 @@
 		<ui5-search show-clear-icon>
 			<ui5-search-message-area slot="messageArea" description="You can try the following" text="Oh, there are no results"></ui5-search-message-area>
 
+			<ui5-search-item text="List Item Deletable" icon="history" deletable></ui5-search-item>
 			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
-			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
-			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
+			<ui5-search-item text="List Item Deletable" icon="history" deletable></ui5-search-item>
 			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
 			<ui5-search-item text="List Item" icon="globe" ></ui5-search-item>
 			<ui5-search-item text="List Item" icon="globe" ></ui5-search-item>
@@ -296,6 +296,7 @@
 				const searchItem = document.createElement('ui5-search-item');
 				searchItem.text = item.name;
 				searchItem.icon = 'search';
+                searchItem.deletable = true;
 				searchItem.addEventListener('ui5-delete', onDelete);
 				parent.appendChild(searchItem);
 			});