docs(ui5-search): add sample for search item actions (#12655)

ndeshev · web-flow · commit a5600902e5e7 · 2025-11-11T18:25:14.000+02:00
related to: #12405
diff --git a/packages/website/docs/_components_pages/fiori/Search/Search.mdx b/packages/website/docs/_components_pages/fiori/Search/Search.mdx
@@ -7,6 +7,7 @@ import Advanced from "../../../_samples/fiori/Search/Advanced/Advanced.md";
 import Byline from "../../../_samples/fiori/Search/Byline/Byline.md";
 import AdvancedFilter from "../../../_samples/fiori/Search/AdvancedFilter/AdvancedFilter.md"
 import ShowMore from "../../../_samples/fiori/Search/ShowMore/ShowMore.md"
+import Actions from "../../../_samples/fiori/Search/Actions/Actions.md"
 
 <%COMPONENT_OVERVIEW%>
 
@@ -39,3 +40,8 @@ This example shows how to use a Show More Item.
 
 <ShowMore />
 
+### Actions
+This example shows how to use a interactive elements in search items.
+
+<Actions />
+
diff --git a/packages/website/docs/_samples/fiori/Search/Actions/Actions.md b/packages/website/docs/_samples/fiori/Search/Actions/Actions.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/fiori/Search/Actions/main.js b/packages/website/docs/_samples/fiori/Search/Actions/main.js
@@ -0,0 +1,5 @@
+import "@ui5/webcomponents-fiori/dist/Search.js";
+import "@ui5/webcomponents-icons/dist/share.js";
+import "@ui5/webcomponents-icons/dist/copy.js";
+import "@ui5/webcomponents-fiori/dist/SearchItem.js";
+import "@ui5/webcomponents-fiori/dist/SearchItemGroup.js";
diff --git a/packages/website/docs/_samples/fiori/Search/Actions/sample.html b/packages/website/docs/_samples/fiori/Search/Actions/sample.html
@@ -0,0 +1,21 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body style="background-color: var(--sapBackgroundColor); height: 350px">
+<!-- playground-fold-end -->
+    <ui5-search id="actions-search" show-clear-icon>
+        <ui5-search-item text="List Item with Multiple Actions" icon="globe" deletable>
+            <ui5-button slot="actions" design="Transparent" icon="share" tooltip="Share"></ui5-button>
+            <ui5-button slot="actions" design="Transparent" icon="copy" tooltip="Copy"></ui5-button>
+        </ui5-search-item>
+    </ui5-search> 
+<!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+</html>
+<!-- playground-fold-end -->
