diff --git a/packages/fiori/cypress/specs/Search.cy.tsx b/packages/fiori/cypress/specs/Search.cy.tsx index 1d42f1e53ffb..bb36ec2b028a 100644 --- a/packages/fiori/cypress/specs/Search.cy.tsx +++ b/packages/fiori/cypress/specs/Search.cy.tsx @@ -833,6 +833,31 @@ describe("Properties", () => { .find(".ui5-search-item-selected-delete") .should("be.focused"); }); + + it("SearchItemGroup has wrapping type set to Normal", () => { + cy.mount( + + + + + + + ); + + cy.get("[ui5-search]") + .shadow() + .find("input") + .realClick(); + + cy.get("[ui5-search]") + .realPress("L"); + + // Verify that the header element has the correct wrapping-type attribute + cy.get("ui5-search-item-group") + .shadow() + .find("[ui5-li-group-header]") + .should("have.attr", "wrapping-type", "Normal"); + }); }); describe("Events", () => { diff --git a/packages/fiori/src/SearchItemGroup.ts b/packages/fiori/src/SearchItemGroup.ts index 96ab8f717d6b..1f44eeb321d4 100644 --- a/packages/fiori/src/SearchItemGroup.ts +++ b/packages/fiori/src/SearchItemGroup.ts @@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js"; import SearchItemGroupCss from "./generated/themes/SearchItemGroup.css.js"; import ListBoxItemGroupTemplate from "@ui5/webcomponents/dist/ListBoxItemGroupTemplate.js"; +import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js"; /** * @class @@ -25,6 +26,10 @@ class SearchItemGroup extends ListItemGroup { get isGroupItem(): boolean { return true; } + + getGroupHeaderWrapping(): WrappingType { + return WrappingType.Normal; + } } SearchItemGroup.define(); diff --git a/packages/fiori/src/themes/SearchItemGroup.css b/packages/fiori/src/themes/SearchItemGroup.css index 18384968fcfe..906176cf21fe 100644 --- a/packages/fiori/src/themes/SearchItemGroup.css +++ b/packages/fiori/src/themes/SearchItemGroup.css @@ -14,6 +14,10 @@ list-style-type: none; } +[ui5-li-group-header]::part(native-li) { + line-height: normal; + padding-bottom: 0.5rem; +} [ui5-li-group-header] { border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor); diff --git a/packages/fiori/test/pages/Search.html b/packages/fiori/test/pages/Search.html index e68a0e770df8..ca7254e3ae2d 100644 --- a/packages/fiori/test/pages/Search.html +++ b/packages/fiori/test/pages/Search.html @@ -258,9 +258,14 @@ -
- Search with lazy loaded Suggestions - Autocomplete and highlighting - +
+ Search with Suggestions with long group header text (wrapping) + + + + + +