From fb906103be36a053f1727e01d673a243306fe1d4 Mon Sep 17 00:00:00 2001 From: Nikolay Deshev Date: Wed, 1 Oct 2025 09:56:08 +0300 Subject: [PATCH 1/2] feat(ui5-search): add actions to search items BGSOFUIRILA-4120 --- packages/fiori/src/SearchItem.ts | 18 +++++++++++++++++ packages/fiori/src/SearchItemTemplate.tsx | 24 +++++++++++++++-------- packages/fiori/src/themes/SearchItem.css | 22 ++++++++++++++++++++- packages/fiori/test/pages/Search.html | 22 +++++++++++++++++++++ 4 files changed, 77 insertions(+), 9 deletions(-) diff --git a/packages/fiori/src/SearchItem.ts b/packages/fiori/src/SearchItem.ts index 5ae95c6afa5c..508cef34dbec 100644 --- a/packages/fiori/src/SearchItem.ts +++ b/packages/fiori/src/SearchItem.ts @@ -117,6 +117,20 @@ class SearchItem extends ListItemBase { @slot() image!: Array; + /** + * 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; + _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(); diff --git a/packages/fiori/src/SearchItemTemplate.tsx b/packages/fiori/src/SearchItemTemplate.tsx index 489a516e069d..a8cfc9f2e39c 100644 --- a/packages/fiori/src/SearchItemTemplate.tsx +++ b/packages/fiori/src/SearchItemTemplate.tsx @@ -44,14 +44,22 @@ export default function SearchFieldTemplate(this: SearchItem) { {this.description} - {this.deletable && - - } +
+ {this.hasSecondaryActions && +
+ +
+ } + + {this.deletable && + + } +
diff --git a/packages/fiori/src/themes/SearchItem.css b/packages/fiori/src/themes/SearchItem.css index 00eb8f3a0e6d..cbe02df706eb 100644 --- a/packages/fiori/src/themes/SearchItem.css +++ b/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; -} \ No newline at end of file +} diff --git a/packages/fiori/test/pages/Search.html b/packages/fiori/test/pages/Search.html index 475006aebff2..a960908125c6 100644 --- a/packages/fiori/test/pages/Search.html +++ b/packages/fiori/test/pages/Search.html @@ -182,6 +182,28 @@ +
+ Search with Secondary Actions - Example of flexible action slot + + + + + + + + + + + + + Important + + + + Hover over search items to see secondary actions. Use Tab/Shift+Tab to navigate between action buttons and delete button. + +
+
Search with Suggestions - Filter by typing From 99c1e7ad233e940f03c4d57259e4c061c3651578 Mon Sep 17 00:00:00 2001 From: Nikolay Deshev Date: Wed, 8 Oct 2025 19:46:39 +0300 Subject: [PATCH 2/2] feat(ui5-search) add actions to search items add tab navigation add tests --- packages/fiori/cypress/specs/Search.cy.tsx | 186 +++++++++++++++++++++ packages/fiori/src/SearchItem.ts | 82 ++++++++- packages/fiori/src/SearchItemTemplate.tsx | 6 +- packages/fiori/src/themes/SearchItem.css | 6 +- packages/fiori/test/pages/Search.html | 12 +- 5 files changed, 274 insertions(+), 18 deletions(-) diff --git a/packages/fiori/cypress/specs/Search.cy.tsx b/packages/fiori/cypress/specs/Search.cy.tsx index ad96b2cba5d0..0a2fccc75bf0 100644 --- a/packages/fiori/cypress/specs/Search.cy.tsx +++ b/packages/fiori/cypress/specs/Search.cy.tsx @@ -13,6 +13,10 @@ import Avatar from "@ui5/webcomponents/dist/Avatar.js"; import AvatarSize from "@ui5/webcomponents/dist/types/AvatarSize.js"; import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; import { SEARCH_ITEM_SHOW_MORE_COUNT, SEARCH_ITEM_SHOW_MORE_NO_COUNT } from "../../src/generated/i18n/i18n-defaults.js"; +import favorite from "@ui5/webcomponents-icons/dist/favorite.js"; +import edit from "@ui5/webcomponents-icons/dist/edit.js"; +import share from "@ui5/webcomponents-icons/dist/share.js"; +import copy from "@ui5/webcomponents-icons/dist/copy.js"; describe("Properties", () => { it("items slot with groups", () => { @@ -509,6 +513,188 @@ describe("Properties", () => { .find(".ui5-search-item-selected-delete") .should("not.exist"); }); + + it("displays action buttons in actions slot", () => { + cy.mount( + + +
- {this.hasSecondaryActions && -
- + {this.hasActions && +
+
} diff --git a/packages/fiori/src/themes/SearchItem.css b/packages/fiori/src/themes/SearchItem.css index cbe02df706eb..deef749c5ed5 100644 --- a/packages/fiori/src/themes/SearchItem.css +++ b/packages/fiori/src/themes/SearchItem.css @@ -34,7 +34,7 @@ display: none; } -:host([desktop]) .ui5-search-item-secondary-actions { +:host([desktop]) .ui5-search-item-actions { display: none; } @@ -44,12 +44,12 @@ display: inline-block; } - .ui5-search-item-secondary-actions { + .ui5-search-item-actions { display: flex; } } -.ui5-search-item-secondary-actions { +.ui5-search-item-actions { display: flex; align-items: center; gap: 0.25rem; diff --git a/packages/fiori/test/pages/Search.html b/packages/fiori/test/pages/Search.html index a960908125c6..6c914b80b5b7 100644 --- a/packages/fiori/test/pages/Search.html +++ b/packages/fiori/test/pages/Search.html @@ -183,20 +183,20 @@
- Search with Secondary Actions - Example of flexible action slot + Search with Actions - Example of flexible action slot - + - + - - + + - Important + Important