feat(ui5-search): add actions to search items

BGSOFUIRILA-4120

Author: ndeshev

packages/fiori/src/SearchItem.ts

@@ -117,6 +117,20 @@ class SearchItem extends ListItemBase {
 	@slot()
 	image!: Array<HTMLElement>;
 
+	/**
+	 * Defines the secondary actionable elements.
+	 * This slot allows placing additional interactive elements (such as buttons, icons, or tags)
+	 * next to the delete button, providing flexible customization for various user actions.
+	 *
+	 * **Note:** While the slot is flexible, for consistency with design guidelines,
+	 * it's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.
+	 *
+	 * @public
+	 * @since 2.13.0
+	 */
+	@slot()
+	secondaryActions!: Array<HTMLElement>;
+
 	_markupText = "";
 
 	@i18n("@ui5/webcomponents-fiori")
@@ -180,6 +194,10 @@ class SearchItem extends ListItemBase {
 	get _deleteButtonTooltip() {
 		return SearchItem.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON);
 	}
+
+	get hasSecondaryActions() {
+		return !!this.secondaryActions.length;
+	}
 }
 
 SearchItem.define();

packages/fiori/src/SearchItemTemplate.tsx

@@ -44,14 +44,22 @@ export default function SearchFieldTemplate(this: SearchItem) {
 						<span part="subtitle" class="ui5-search-item-description">{this.description}</span>
 					</div>
 
-					{this.deletable &&
-						<Button class="ui5-search-item-selected-delete"
-							design={ButtonDesign.Transparent}
-							icon={decline}
-							onClick={this._onDeleteButtonClick}
-							tooltip={this._deleteButtonTooltip}
-							onKeyDown={this._onDeleteButtonKeyDown}></Button>
-					}
+					<div class="ui5-search-item-actions-container">
+						{this.hasSecondaryActions &&
+							<div class="ui5-search-item-secondary-actions">
+								<slot name="secondaryActions"></slot>
+							</div>
+						}
+
+						{this.deletable &&
+							<Button class="ui5-search-item-selected-delete"
+								design={ButtonDesign.Transparent}
+								icon={decline}
+								onClick={this._onDeleteButtonClick}
+								tooltip={this._deleteButtonTooltip}
+								onKeyDown={this._onDeleteButtonKeyDown}></Button>
+						}
+					</div>
 				</div>
 			</div>
 		</li >

packages/fiori/src/themes/SearchItem.css

@@ -24,15 +24,35 @@
 	flex: 1;
 }
 
+.ui5-search-item-actions-container {
+	display: flex;
+	align-items: center;
+	gap: 0.125rem;
+}
+
 :host([desktop]) .ui5-search-item-selected-delete {
 	display: none;
 }
 
+:host([desktop]) .ui5-search-item-secondary-actions {
+	display: none;
+}
+
 :host(:hover),
 :host(:focus-within) {
 	.ui5-search-item-selected-delete {
 		display: inline-block;
 	}
+	
+	.ui5-search-item-secondary-actions {
+		display: flex;
+	}
+}
+
+.ui5-search-item-secondary-actions {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
 }
 
 .ui5-search-item-text {
@@ -85,4 +105,4 @@
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-}
+}

packages/fiori/test/pages/Search.html

@@ -182,6 +182,28 @@
 		<ui5-search id="delete-search" show-clear-icon></ui5-search>
 	</div>
 
+	<div class="container">
+		<ui5-label>Search with Secondary Actions - Example of flexible action slot</ui5-label>
+		<ui5-search id="secondary-actions-search" show-clear-icon>
+			<ui5-search-item text="List Item with Favorite Action" icon="history" deletable>
+				<ui5-button slot="secondaryActions" design="Transparent" icon="favorite" tooltip="Add to favorites"></ui5-button>
+			</ui5-search-item>
+			<ui5-search-item text="List Item with Edit Action" icon="search" deletable>
+				<ui5-button slot="secondaryActions" design="Transparent" icon="edit" tooltip="Edit item"></ui5-button>
+			</ui5-search-item>
+			<ui5-search-item text="List Item with Multiple Actions" icon="globe" deletable>
+				<ui5-button slot="secondaryActions" design="Transparent" tabindex="1" icon="share" tooltip="Share"></ui5-button>
+				<ui5-button slot="secondaryActions" design="Transparent" tabindex="1" icon="copy" tooltip="Copy"></ui5-button>
+			</ui5-search-item>
+			<ui5-search-item text="List Item with Tag Action" icon="history">
+				<ui5-tag slot="secondaryActions" design="Set2" color-scheme="8">Important</ui5-tag>
+			</ui5-search-item>
+		</ui5-search>
+		<ui5-text style="padding-top: 0.25rem; font-style: italic;">
+			Hover over search items to see secondary actions. Use Tab/Shift+Tab to navigate between action buttons and delete button.
+		</ui5-text>
+	</div>
+
 	<div class="container">
 		<ui5-label>Search with Suggestions - Filter by typing</ui5-label>
 		<ui5-search id="filtering" show-clear-icon placeholder="Start typing ..."></ui5-search>