From 69219b8032b012d7cda27551d1d4de8c567508d2 Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Wed, 11 Mar 2026 16:13:53 +0200 Subject: [PATCH 1/3] feat(ui5-search): update visual hover and active state of shell search scope --- packages/fiori/src/themes/SearchField.css | 24 +++++++------------ .../themes/base/SearchField-parameters.css | 2 ++ .../sap_fiori_3/SearchField-parameters.css | 2 ++ .../SearchField-parameters.css | 2 ++ .../SearchField-parameters.css | 2 ++ .../SearchField-parameters.css | 2 ++ .../SearchField-parameters.css | 4 +++- .../SearchField-parameters.css | 2 ++ 8 files changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/fiori/src/themes/SearchField.css b/packages/fiori/src/themes/SearchField.css index b23ea0cb6c17..50973cb8b177 100644 --- a/packages/fiori/src/themes/SearchField.css +++ b/packages/fiori/src/themes/SearchField.css @@ -87,8 +87,15 @@ --_ui5_select_label_color: var(--sapShell_TextColor); } -[ui5-select]:hover { - box-shadow: var(--sapField_Hover_Shadow); +[ui5-select]:hover, +.ui5-search-field-select::part(icon-wrapper):hover { + box-shadow: var(--_ui5-search_input_scope_hover_shadow); +} + +[ui5-select]:active, +.ui5-search-field-select:active::part(icon-wrapper) { + box-shadow: var(--_ui5-search_input_scope_active_shadow); + background: var(--sapShell_Active_Background); } [ui5-select]::part(icon) { @@ -259,7 +266,6 @@ .ui5-shell-search-field-icon:hover, .ui5-shell-search-field-input-button:hover { background: var(--sapShell_Hover_Background); - border: 1px solid var(--sapButton_Lite_Hover_BorderColor); color: var(--sapShell_InteractiveTextColor); } @@ -283,18 +289,6 @@ 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); diff --git a/packages/fiori/src/themes/base/SearchField-parameters.css b/packages/fiori/src/themes/base/SearchField-parameters.css index 0068a8e68edb..f7857d66e95c 100644 --- a/packages/fiori/src/themes/base/SearchField-parameters.css +++ b/packages/fiori/src/themes/base/SearchField-parameters.css @@ -10,6 +10,8 @@ --_ui5-search-elements-hover-background: none; --_ui5-search-elements-active-background: none; --_ui5_search_input_scope_margin: 0 0.125rem 0 .5rem; + --_ui5-search_input_scope_hover_shadow: 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Hover_BorderColor); + --_ui5-search_input_scope_active_shadow: 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Active_BorderColor); --_ui5-search-elements-background: inherit; --_ui5_search_wrapper_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor); --_ui5_search_input_outline: none; diff --git a/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css index 46ca073813dd..25455d3465b6 100644 --- a/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css @@ -9,6 +9,8 @@ --_ui5-search-wrapper-hover-background: none; --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; + --_ui5-search_input_scope_hover_shadow: none; + --_ui5-search_input_scope_active_shadow: none; --_ui5-search-elements-background: var(--sapShell_InteractiveBackground); --_ui5-search-elements-hover-background: var(--sapShell_Hover_Background); --_ui5-search-elements-active-background: var(--sapShell_Active_Background); diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css index 3810f05884c5..398218acec36 100644 --- a/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css @@ -9,6 +9,8 @@ --_ui5-search-wrapper-hover-background: none; --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; + --_ui5-search_input_scope_hover_shadow: none; + --_ui5-search_input_scope_active_shadow: none; --_ui5-search-elements-background: var(--sapShell_InteractiveBackground); --_ui5-search-elements-hover-background: var(--sapShell_Hover_Background); --_ui5-search-elements-active-background: var(--sapShell_Active_Background); diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css index 927431bda7a5..692fc8dfef4a 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css @@ -9,6 +9,8 @@ --_ui5-search-wrapper-hover-background: none; --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; + --_ui5-search_input_scope_hover_shadow: none; + --_ui5-search_input_scope_active_shadow: none; --_ui5-search-elements-background: var(--sapShell_InteractiveBackground); --_ui5-search-elements-hover-background: var(--sapShell_Hover_Background); --_ui5-search-elements-active-background: var(--sapShell_Active_Background); diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css index e0885713758e..ac17dfaa3724 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css @@ -9,6 +9,8 @@ --_ui5-search-wrapper-hover-background: none; --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; + --_ui5-search_input_scope_hover_shadow: none; + --_ui5-search_input_scope_active_shadow: none; --_ui5-search-elements-background: var(--sapShell_InteractiveBackground); --_ui5-search-elements-hover-background: var(--sapShell_Hover_Background); --_ui5-search-elements-active-background: var(--sapShell_Active_Background); diff --git a/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css index 1c335b438dbf..8ddfe247813c 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css @@ -7,8 +7,10 @@ --_ui5-search-wrapper-background: none; --_ui5_search_separator_background: none; --_ui5-search-wrapper-hover-background: none; - --_ui5-search-wrapper-hover-background-color: none; + --_ui5-search-wrapper-hover-background-color: var(--sapField_Hover_Background); --_ui5_search_input_scope_margin: 0; + --_ui5-search_input_scope_hover_shadow: none; + --_ui5-search_input_scope_active_shadow: none; --_ui5-search-elements-background: var(--sapShell_InteractiveBackground); --_ui5-search-elements-hover-background: var(--sapShell_Hover_Background); --_ui5-search-elements-active-background: var(--sapShell_Active_Background); diff --git a/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css index 1c335b438dbf..10236c07edc7 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/SearchField-parameters.css @@ -9,6 +9,8 @@ --_ui5-search-wrapper-hover-background: none; --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; + --_ui5-search_input_scope_hover_shadow: none; + --_ui5-search_input_scope_active_shadow: none; --_ui5-search-elements-background: var(--sapShell_InteractiveBackground); --_ui5-search-elements-hover-background: var(--sapShell_Hover_Background); --_ui5-search-elements-active-background: var(--sapShell_Active_Background); From e6ef6eb0436f4d4915fcc34b0585b367a91c8190 Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Thu, 12 Mar 2026 14:48:58 +0200 Subject: [PATCH 2/3] feat(ui5-search): update visual hover and active state of shell search scope --- packages/fiori/src/themes/SearchField.css | 1 + .../fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/fiori/src/themes/SearchField.css b/packages/fiori/src/themes/SearchField.css index 50973cb8b177..f7fda09f755d 100644 --- a/packages/fiori/src/themes/SearchField.css +++ b/packages/fiori/src/themes/SearchField.css @@ -266,6 +266,7 @@ .ui5-shell-search-field-icon:hover, .ui5-shell-search-field-input-button:hover { background: var(--sapShell_Hover_Background); + border: 1px solid var(--sapButton_Lite_Hover_BorderColor); color: var(--sapShell_InteractiveTextColor); } diff --git a/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css index 8ddfe247813c..10236c07edc7 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/SearchField-parameters.css @@ -7,7 +7,7 @@ --_ui5-search-wrapper-background: none; --_ui5_search_separator_background: none; --_ui5-search-wrapper-hover-background: none; - --_ui5-search-wrapper-hover-background-color: var(--sapField_Hover_Background); + --_ui5-search-wrapper-hover-background-color: none; --_ui5_search_input_scope_margin: 0; --_ui5-search_input_scope_hover_shadow: none; --_ui5-search_input_scope_active_shadow: none; From 939b4ccec1d652a43f39bf03d68006bbfdc2f384 Mon Sep 17 00:00:00 2001 From: Milen Karmidzhanov Date: Thu, 12 Mar 2026 15:14:32 +0200 Subject: [PATCH 3/3] feat(ui5-search): update visual hover and active state of shell search scope --- packages/fiori/src/themes/base/SearchField-parameters.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fiori/src/themes/base/SearchField-parameters.css b/packages/fiori/src/themes/base/SearchField-parameters.css index f7857d66e95c..705d977ec68f 100644 --- a/packages/fiori/src/themes/base/SearchField-parameters.css +++ b/packages/fiori/src/themes/base/SearchField-parameters.css @@ -10,8 +10,8 @@ --_ui5-search-elements-hover-background: none; --_ui5-search-elements-active-background: none; --_ui5_search_input_scope_margin: 0 0.125rem 0 .5rem; - --_ui5-search_input_scope_hover_shadow: 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Hover_BorderColor); - --_ui5-search_input_scope_active_shadow: 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Active_BorderColor); + --_ui5-search_input_scope_hover_shadow: inset 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Hover_BorderColor); + --_ui5-search_input_scope_active_shadow: inset 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Active_BorderColor); --_ui5-search-elements-background: inherit; --_ui5_search_wrapper_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor); --_ui5_search_input_outline: none;