From 4c3b58873dba72509fe37a44ed60a9389fb309d8 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Fri, 17 Apr 2026 15:31:07 +0300 Subject: [PATCH 1/2] fix(ui5-select): correct dropdown button height --- packages/main/src/themes/Select.css | 1 + packages/main/src/themes/base/Select-parameters.css | 2 ++ .../main/src/themes/sap_horizon/Select-parameters.css | 8 +++++--- .../src/themes/sap_horizon_dark/Select-parameters.css | 8 +++++--- 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/main/src/themes/Select.css b/packages/main/src/themes/Select.css index 94971eab04f4..5d70cb491b13 100644 --- a/packages/main/src/themes/Select.css +++ b/packages/main/src/themes/Select.css @@ -25,6 +25,7 @@ cursor: pointer; overflow: hidden; border-radius: var(--_ui5_input_border_radius); + background: var(--_ui5_select_bottom_border_gradient); } .ui5-select-label-root { diff --git a/packages/main/src/themes/base/Select-parameters.css b/packages/main/src/themes/base/Select-parameters.css index d7008031e5f1..15cb00c9092f 100644 --- a/packages/main/src/themes/base/Select-parameters.css +++ b/packages/main/src/themes/base/Select-parameters.css @@ -3,6 +3,8 @@ --_ui5_select_label_color: var(--sapField_TextColor); --_ui5_select_icon_width: 2.25rem; --_ui5_select_icon_wrapper_height: 100%; + --_ui5_select_bottom_border_gradient: none; + --_ui5_select_icon_wrapper_state_height: calc(100% - 0.125rem); } @container style(--ui5_content_density: compact) { diff --git a/packages/main/src/themes/sap_horizon/Select-parameters.css b/packages/main/src/themes/sap_horizon/Select-parameters.css index ed7f6472bc5d..9d0b1f91acb5 100644 --- a/packages/main/src/themes/sap_horizon/Select-parameters.css +++ b/packages/main/src/themes/sap_horizon/Select-parameters.css @@ -2,6 +2,8 @@ :host { --_ui5_select_hover_icon_left_border: none; - --_ui5_select_icon_wrapper_height: calc(100% - 0.0625rem); - --_ui5_select_icon_wrapper_state_height: calc(100% - 0.125rem); -} \ No newline at end of file + --_ui5_select_icon_wrapper_height: 100%; + --_ui5_select_icon_wrapper_state_height: 100%; + --_ui5_input_icon_hover_bg: transparent; + --_ui5_select_bottom_border_gradient: linear-gradient(var(--sapField_BorderColor), var(--sapField_BorderColor)) bottom / 100% var(--sapField_BorderWidth) no-repeat; +} diff --git a/packages/main/src/themes/sap_horizon_dark/Select-parameters.css b/packages/main/src/themes/sap_horizon_dark/Select-parameters.css index ed7f6472bc5d..9d0b1f91acb5 100644 --- a/packages/main/src/themes/sap_horizon_dark/Select-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Select-parameters.css @@ -2,6 +2,8 @@ :host { --_ui5_select_hover_icon_left_border: none; - --_ui5_select_icon_wrapper_height: calc(100% - 0.0625rem); - --_ui5_select_icon_wrapper_state_height: calc(100% - 0.125rem); -} \ No newline at end of file + --_ui5_select_icon_wrapper_height: 100%; + --_ui5_select_icon_wrapper_state_height: 100%; + --_ui5_input_icon_hover_bg: transparent; + --_ui5_select_bottom_border_gradient: linear-gradient(var(--sapField_BorderColor), var(--sapField_BorderColor)) bottom / 100% var(--sapField_BorderWidth) no-repeat; +} From df940924f79c70178e9f7b806327b6cee63326c3 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Fri, 24 Apr 2026 14:50:31 +0300 Subject: [PATCH 2/2] fix: address comments --- packages/main/src/Select.ts | 1 + packages/main/src/themes/base/Select-parameters.css | 2 +- packages/main/src/themes/sap_horizon/Select-parameters.css | 1 + packages/main/src/themes/sap_horizon_dark/Select-parameters.css | 1 + 4 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 71a6f13508d3..6bcbe010ca1d 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -1105,6 +1105,7 @@ class Select extends UI5Element implements IFormInputElement { }, responsivePopover: { "min-width": `${this.offsetWidth}px`, + "margin-top": "var(--sapField_BorderWidth)", }, }; } diff --git a/packages/main/src/themes/base/Select-parameters.css b/packages/main/src/themes/base/Select-parameters.css index 15cb00c9092f..18495f7104a9 100644 --- a/packages/main/src/themes/base/Select-parameters.css +++ b/packages/main/src/themes/base/Select-parameters.css @@ -4,7 +4,7 @@ --_ui5_select_icon_width: 2.25rem; --_ui5_select_icon_wrapper_height: 100%; --_ui5_select_bottom_border_gradient: none; - --_ui5_select_icon_wrapper_state_height: calc(100% - 0.125rem); + --_ui5_select_icon_wrapper_state_height: 100%; } @container style(--ui5_content_density: compact) { diff --git a/packages/main/src/themes/sap_horizon/Select-parameters.css b/packages/main/src/themes/sap_horizon/Select-parameters.css index 2069671ada85..edf106fbe0a2 100644 --- a/packages/main/src/themes/sap_horizon/Select-parameters.css +++ b/packages/main/src/themes/sap_horizon/Select-parameters.css @@ -5,6 +5,7 @@ --_ui5_select_icon_wrapper_height: 100%; --_ui5_select_icon_wrapper_state_height: 100%; --_ui5_input_icon_hover_bg: transparent; + --_ui5_input_icon_pressed_bg: transparent; --_ui5_select_bottom_border_gradient: linear-gradient(var(--sapField_BorderColor), var(--sapField_BorderColor)) bottom / 100% var(--sapField_BorderWidth) no-repeat; --_ui5_input_focus_outline_color: var(--sapContent_FocusColor); --_ui5_input_readonly_focus_border_radius: 0; diff --git a/packages/main/src/themes/sap_horizon_dark/Select-parameters.css b/packages/main/src/themes/sap_horizon_dark/Select-parameters.css index 2069671ada85..edf106fbe0a2 100644 --- a/packages/main/src/themes/sap_horizon_dark/Select-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Select-parameters.css @@ -5,6 +5,7 @@ --_ui5_select_icon_wrapper_height: 100%; --_ui5_select_icon_wrapper_state_height: 100%; --_ui5_input_icon_hover_bg: transparent; + --_ui5_input_icon_pressed_bg: transparent; --_ui5_select_bottom_border_gradient: linear-gradient(var(--sapField_BorderColor), var(--sapField_BorderColor)) bottom / 100% var(--sapField_BorderWidth) no-repeat; --_ui5_input_focus_outline_color: var(--sapContent_FocusColor); --_ui5_input_readonly_focus_border_radius: 0;