diff --git a/packages/fiori/src/Search.ts b/packages/fiori/src/Search.ts index c29e43beb832..94ee458866aa 100755 --- a/packages/fiori/src/Search.ts +++ b/packages/fiori/src/Search.ts @@ -75,6 +75,7 @@ type SearchEventDetails = { * @public * @since 2.9.0 * @experimental + * @csspart search-popover - Used to style the suggestions popover content */ @customElement({ tag: "ui5-search", diff --git a/packages/fiori/src/SearchPopoverTemplate.tsx b/packages/fiori/src/SearchPopoverTemplate.tsx index b5288d212c2a..cb45c678f353 100644 --- a/packages/fiori/src/SearchPopoverTemplate.tsx +++ b/packages/fiori/src/SearchPopoverTemplate.tsx @@ -30,6 +30,7 @@ export default function SearchPopoverTemplate(this: Search, headerTemplate?: Jsx onClose={this._handleClose} onBeforeClose={this._handleBeforeClose} onBeforeOpen={this._handleBeforeOpen} + exportparts="content: search-popover" class={{ "ui5-search-popover": true, "ui5-search-popover-phone": isPhone(), diff --git a/packages/fiori/src/themes/Search.css b/packages/fiori/src/themes/Search.css index 6866454b926b..138fa0720534 100644 --- a/packages/fiori/src/themes/Search.css +++ b/packages/fiori/src/themes/Search.css @@ -26,6 +26,7 @@ .ui5-search-popover::part(content) { padding: 0; box-shadow: none; + max-height: var(--_ui5_search_popover_max_height); } :host([loading]) .ui5-search-popover main { diff --git a/packages/fiori/src/themes/base/Search-parameters.css b/packages/fiori/src/themes/base/Search-parameters.css index 5b4044c2c273..0a62e9e22112 100644 --- a/packages/fiori/src/themes/base/Search-parameters.css +++ b/packages/fiori/src/themes/base/Search-parameters.css @@ -1,6 +1,7 @@ :host { --_ui5_search_item_vertical_padding: 1rem; --_ui5_search_byline_vertical_padding: .5rem; + --_ui5_search_popover_max_height: 39rem; } @container style(--ui5_content_density: compact) { diff --git a/packages/fiori/test/pages/Search.html b/packages/fiori/test/pages/Search.html index 049a985675bd..b637b22850da 100644 --- a/packages/fiori/test/pages/Search.html +++ b/packages/fiori/test/pages/Search.html @@ -19,6 +19,10 @@ .last { padding-bottom: 2rem; } + + #search-custom-max-height::part(search-popover) { + max-height: 10rem; + } @@ -258,7 +262,7 @@ -
+
Search with Suggestions with long group header text (wrapping) @@ -268,6 +272,22 @@
+
+ Search with custom popover max-height (10rem) using CSS part + + + + + + + + + + + + +
+