feat(ui5-search): items wrapping (#12681)

Author: MapTo0

packages/fiori/src/themes/SearchItem.css

@@ -2,8 +2,27 @@
 	border: none;
 }
 
+:host(:focus-within) {
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: calc(-1 * var(--sapContent_FocusWidth) - 0.125rem);
+}
+
 :host {
 	border: none;
+	padding-top: var(--_ui5_search_item_vertical_padding);
+	padding-bottom: var(--_ui5_search_item_vertical_padding);
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+	padding-left: 1rem;
+	padding-right: 1rem;
+}
+
+.ui5-li-root {
+	padding: 0;
+}
+
+.ui5-li-root:focus:after {
+	display: none;
 }
 
 .ui5-search-item-content {
@@ -53,17 +72,16 @@
 	font-family: var(--sapFontFamily);
 	font-weight: normal;
 	color: var(--sapList_TextColor);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+	line-height: 1rem;
 }
 
 .ui5-search-item-titles-container {
-	overflow: hidden;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 	flex: 1;
+	max-width: 100%;
+	gap: 1rem;
 }
 
 .ui5-search-item-icon {
@@ -74,13 +92,8 @@
 }
 
 :host([description]) {
-	height: auto;
-	min-height: var(--_ui5_list_item_base_height);
-}
-
-:host([description]) .ui5-search-item-content {
-	padding-top: .5rem;
-	padding-bottom: .5rem;
+	padding-top: var(--_ui5_search_byline_vertical_padding);
+	padding-bottom: var(--_ui5_search_byline_vertical_padding);
 }
 
 :host([description]) .ui5-search-item-description {
@@ -93,8 +106,4 @@
 	font-size: var(--sapFontSize);
 	font-weight: normal;
 	color: var(--sapContent_LabelColor);
-	margin-top: .25rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
 }

packages/fiori/src/themes/base/Search-parameters.css

@@ -0,0 +1,10 @@
+:root {
+	--_ui5_search_item_vertical_padding: 1rem;
+	--_ui5_search_byline_vertical_padding: .5rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_search_item_vertical_padding: 0.5rem;
+}

packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css

@@ -12,6 +12,7 @@
 @import "../base/ViewSettingsDialog-parameters.css";
 @import "../base/Wizard-parameters.css";
 @import "./SearchField-parameters.css";
+@import "../base/Search-parameters.css";
 @import "../base/WizardTab-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "./DynamicPageTitle-parameters.css";

packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -12,6 +12,7 @@
 @import "../base/ViewSettingsDialog-parameters.css";
 @import "../base/Wizard-parameters.css";
 @import "./SearchField-parameters.css";
+@import "../base/Search-parameters.css";
 @import "../base/WizardTab-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";

packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -12,6 +12,7 @@
 @import "../base/ViewSettingsDialog-parameters.css";
 @import "../base/Wizard-parameters.css";
 @import "./SearchField-parameters.css";
+@import "../base/Search-parameters.css";
 @import "./WizardTab-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "../base/DynamicPage-parameters.css";

packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -13,6 +13,7 @@
 @import "../base/Wizard-parameters.css";
 @import "./WizardTab-parameters.css";
 @import "./SearchField-parameters.css";
+@import "../base/Search-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "./DynamicPageTitle-parameters.css";

packages/fiori/src/themes/sap_horizon/parameters-bundle.css

@@ -17,6 +17,8 @@
 @import "./MediaGallery-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/SearchField-parameters.css";
+@import "../base/Search-parameters.css";
+@import "../base/Search-parameters.css";
 @import "./DynamicPageTitle-parameters.css";
 @import "../base/DynamicPageHeader-parameters.css";
 @import "./DynamicPageHeaderActions-parameters.css";

packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css

@@ -9,6 +9,7 @@
 @import "../base/ShellBar-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "../base/SearchField-parameters.css";
+@import "../base/Search-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./SideNavigation-parameters.css";
 

packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css

@@ -16,6 +16,7 @@
 @import "./WizardTab-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "./SearchField-parameters.css";
+@import "../base/Search-parameters.css";
 @import "./DynamicPageTitle-parameters.css";
 @import "../base/DynamicPageHeader-parameters.css";
 @import "../sap_horizon/DynamicPageHeaderActions-parameters.css";

packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css

@@ -15,6 +15,7 @@
 @import "../base/ShellBar-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "./SearchField-parameters.css";
+@import "../base/Search-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
 @import "../base/DynamicPageHeader-parameters.css";