fix(ui5-search): visual issues (#12061)

FIXES: #11982
FIXES: #11964
FIXES: #11981
FIXES: #11999
FIXES: #12042
FIXES: #11955

Author: MapTo0

packages/fiori/src/SearchItem.ts

@@ -7,6 +7,9 @@ import SearchItemCss from "./generated/themes/SearchItem.css.js";
 import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import { SEARCH_ITEM_DELETE_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import { i18n } from "@ui5/webcomponents-base/dist/decorators.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 
 /**
  * @class
@@ -112,6 +115,9 @@ class SearchItem extends ListItemBase {
 
 	_markupText = "";
 
+	@i18n("@ui5/webcomponents-fiori")
+	static i18nBundle: I18nBundle;
+
 	_onfocusin(e: FocusEvent) {
 		super._onfocusin(e);
 
@@ -132,6 +138,10 @@ class SearchItem extends ListItemBase {
 		// bold the matched text
 		this._markupText = this.highlightText ? generateHighlightedMarkup((this.text || ""), this.highlightText) : (this.text || "");
 	}
+
+	get _deleteButtonTooltip() {
+		return SearchItem.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON);
+	}
 }
 
 SearchItem.define();

packages/fiori/src/SearchItemTemplate.tsx

@@ -45,7 +45,7 @@ export default function SearchFieldTemplate(this: SearchItem) {
 					</div>
 
 					{this.deletable &&
-						<Button class="ui5-search-item-selected-delete" design={ButtonDesign.Transparent} icon={decline} onClick={this._onDeleteButtonClick}></Button>
+						<Button class="ui5-search-item-selected-delete" design={ButtonDesign.Transparent} icon={decline} onClick={this._onDeleteButtonClick} tooltip={this._deleteButtonTooltip}></Button>
 					}
 				</div>
 			</div>

packages/fiori/src/i18n/messagebundle.properties

@@ -191,6 +191,8 @@ SHELLBAR_SEARCH_FIELD = Search Field
 #XACT: ARIA announcement for the search button
 SHELLBAR_SEARCH_BTN_OPEN = Open Search
 
+#XACT: ARIA announcement for the search item delete button
+SEARCH_ITEM_DELETE_BUTTON=Remove Suggestion
 
 #XACT: ARIA announcement for the more button
 SHELLBAR_OVERFLOW = More

packages/fiori/src/themes/Search.css

@@ -97,11 +97,6 @@
 	border-radius: var(--_ui5_popup_border_radius);
 }
 
-.ui5-search-list {
-	margin: .25rem;
-	width: calc(100% - 0.5rem);
-}
-
 .ui5-search-popover-phone .ui5-search-popover-content {
 	position: relative;
 	width: 100%;

packages/fiori/src/themes/SearchField.css

@@ -97,10 +97,6 @@
 	color: var(--sapShell_InteractiveTextColor);
 }
 
-[ui5-select]::part(icon):hover {
-	background-color: var(--sapShell_Hover_Background);
-}
-
 [ui5-select]::part(popover) {
 	background-color: var(--sapShellColor);
 }
@@ -196,8 +192,6 @@
 	min-width: var(--_ui5_search_icon_size);
 	height: var(--_ui5_search_icon_size);
 	border-radius: var(--_ui5_search_icon_border_radius);
-	margin-inline-end: 0.25rem;
-	margin-inline-start: 0.1875rem;
 	box-sizing: border-box;
 	cursor: pointer;
 }
@@ -275,4 +269,31 @@
 
 .ui5-search-field-select {
 	--_ui5_input_focus_border_radius: var(--_ui5_search_input_border_radius);
+}
+
+.ui5-search-field-select:hover,
+.ui5-search-field-select[focused] {
+	background: var(--_ui5-search-wrapper-hover-background-color);
+}
+
+.ui5-search-field-select::part(icon-wrapper) {
+	border-radius: var(--_ui5_search_input_border_radius);
+	height: 100%;
+}
+
+.ui5-search-field-select[focused]::part(icon-wrapper) {
+	box-shadow: var(--sapField_Hover_Shadow);
+}
+
+:host(:not([collapsed]):hover):has([ui5-select]:hover) {
+	background: var(--_ui5-search-wrapper-background);
+}
+
+:host(:not([collapsed])):has([ui5-select][focused]) {
+	background: var(--_ui5-search-wrapper-background);
+}
+
+.ui5-search-field-inner-input::selection {
+	background: var(--sapSelectedColor);
+	color: var(--sapContent_ContrastTextColor);
 }

packages/fiori/src/themes/SearchItemGroup.css

@@ -1,13 +1,20 @@
-[ui5-li-group-header]::part(native-li) {
-	height: 100%;
-	padding: 0.5625rem .5rem;
+:host {
+	height: 2.75rem;
+	background: var(--sapList_GroupHeaderBackground);
+	color: var(--sapList_TableGroupHeaderTextColor);
 }
 
-[ui5-li-group-header] {
-	height: 2rem;
+.ui5-group-li-root {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+	list-style-type: none;
 }
 
-[ui5-li-group-header]::part(native-li):focus:after {
-	inset: 0 !important;
-	border-radius: 8px;
+
+[ui5-li-group-header] {
+	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
 }

packages/fiori/src/themes/SearchMessageArea.css

@@ -1,10 +1,8 @@
 :host {
-	width: calc(100% - 0.5rem);
+	width: 100%;
 	border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
 	box-sizing: border-box;
 	display: inline-block;
-	margin-left: .25rem;
-	margin-right: .25rem;
 }
 
 .ui5-search-message-area-wrapper {

packages/main/src/SelectTemplate.tsx

@@ -62,11 +62,12 @@ export default function SelectTemplate(this: Select) {
 				}
 
 				{!this.icon && !this.readonly &&
-					<div class={{
-						"ui5-select-icon-root": true,
-						"inputIcon": true,
-						"inputIcon--pressed": this._iconPressed,
-					}}>
+					<div part="icon-wrapper"
+						class={{
+							"ui5-select-icon-root": true,
+							"inputIcon": true,
+							"inputIcon--pressed": this._iconPressed,
+						}}>
 						<Icon
 							part="icon"
 							name={slimArrowDown}