From d54412fc8a0fdd810842e02e84bcb3573cf66e04 Mon Sep 17 00:00:00 2001 From: i518532 Date: Wed, 11 Mar 2026 11:32:04 +0200 Subject: [PATCH 1/5] fix(ui5-responsive-popover): scope styles for input controls --- packages/main/src/themes/ResponsivePopoverCommon.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css index 6ae7ec843251..0e4c1ea22a53 100644 --- a/packages/main/src/themes/ResponsivePopoverCommon.css +++ b/packages/main/src/themes/ResponsivePopoverCommon.css @@ -43,7 +43,7 @@ padding: .1875rem .5rem } -[inner-input] { +[ui5-responsive-popover] [inner-input] { background: transparent; color: inherit; border: none; @@ -62,19 +62,19 @@ border-radius: var(--_ui5_input_border_radius); } -[inner-input]::selection, -[inner-input]::-moz-selection { +[ui5-responsive-popover] [inner-input]::selection, +[ui5-responsive-popover] [inner-input]::-moz-selection { background: var(--sapSelectedColor); color: var(--sapContent_ContrastTextColor); } /* Input placeholder */ -[inner-input]::-webkit-input-placeholder { +[ui5-responsive-popover] [inner-input]::-webkit-input-placeholder { font-style: var(--_ui5_input_placeholder_style); color: var(--sapField_PlaceholderTextColor); } -[inner-input]::-moz-placeholder { +[ui5-responsive-popover] [inner-input]::-moz-placeholder { font-style: var(--_ui5_input_placeholder_style); color: var(--sapField_PlaceholderTextColor); } From 94450762050d6efb45cf74b72c0a23e1a2ab62d7 Mon Sep 17 00:00:00 2001 From: i518532 Date: Thu, 12 Mar 2026 08:56:34 +0200 Subject: [PATCH 2/5] fix(fix(ui5-responsive-popover): correct tests --- packages/main/src/themes/MultiComboBox.css | 2 +- packages/main/src/themes/MultiInput.css | 2 +- packages/main/src/themes/ResponsivePopoverCommon.css | 10 +++++----- packages/main/src/themes/base/Input-parameters.css | 4 +++- packages/main/src/themes/base/sizes-parameters.css | 1 + 5 files changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css index 748fba70685f..b2f749bb6581 100644 --- a/packages/main/src/themes/MultiComboBox.css +++ b/packages/main/src/themes/MultiComboBox.css @@ -8,7 +8,7 @@ } :host([tokenizer-available]) { - min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width)); + min-width: calc(var(--_ui5_input_min_width_tokenizer_available) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width)); } :host(:not([hidden])) { diff --git a/packages/main/src/themes/MultiInput.css b/packages/main/src/themes/MultiInput.css index ab82555c4f85..19c1c39963a8 100644 --- a/packages/main/src/themes/MultiInput.css +++ b/packages/main/src/themes/MultiInput.css @@ -5,7 +5,7 @@ } :host([tokenizer-available]) { - min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width)); + min-width: calc(var(--_ui5_input_min_width_tokenizer_available) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width)); } .ui5-multi-input-tokenizer { diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css index 0e4c1ea22a53..6ae7ec843251 100644 --- a/packages/main/src/themes/ResponsivePopoverCommon.css +++ b/packages/main/src/themes/ResponsivePopoverCommon.css @@ -43,7 +43,7 @@ padding: .1875rem .5rem } -[ui5-responsive-popover] [inner-input] { +[inner-input] { background: transparent; color: inherit; border: none; @@ -62,19 +62,19 @@ border-radius: var(--_ui5_input_border_radius); } -[ui5-responsive-popover] [inner-input]::selection, -[ui5-responsive-popover] [inner-input]::-moz-selection { +[inner-input]::selection, +[inner-input]::-moz-selection { background: var(--sapSelectedColor); color: var(--sapContent_ContrastTextColor); } /* Input placeholder */ -[ui5-responsive-popover] [inner-input]::-webkit-input-placeholder { +[inner-input]::-webkit-input-placeholder { font-style: var(--_ui5_input_placeholder_style); color: var(--sapField_PlaceholderTextColor); } -[ui5-responsive-popover] [inner-input]::-moz-placeholder { +[inner-input]::-moz-placeholder { font-style: var(--_ui5_input_placeholder_style); color: var(--sapField_PlaceholderTextColor); } diff --git a/packages/main/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css index fa5471b6d5a3..3dd88aea2e05 100644 --- a/packages/main/src/themes/base/Input-parameters.css +++ b/packages/main/src/themes/base/Input-parameters.css @@ -1,6 +1,7 @@ :host { --_ui5_input_width: 13.125rem; --_ui5_input_min_width: 2.75rem; + --_ui5_input_min_width_tokenizer_available: 3rem; --_ui5_input_height: var(--sapElement_Height); --_ui5_input_margin_top_bottom: 0.25rem; --_ui5_input_hover_border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_Hover_BorderColor); @@ -69,12 +70,13 @@ --_ui5_input_icon_wrapper_state_height: 100%; --_ui5_input_icon_wrapper_success_state_height: 100%; --_ui5-input-icons-count: 0; - --_ui5_input_tokenizer_min_width: 3.25rem; + --_ui5_input_tokenizer_min_width: 3.5rem; } @container style(--ui5_content_density: compact) { :host { --_ui5_input_min_width: 2rem; + --_ui5_input_min_width_tokenizer_available: 2rem; --_ui5_input_icon_width: 2rem; --_ui5_input_error_warning_icon_padding: .1875rem .375rem .1875rem .4375rem; --_ui5_input_error_warning_focused_icon_padding: .1875rem .375rem .1875rem .4375rem; diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 05ab49800e29..0eb80229019f 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -269,6 +269,7 @@ --_ui5_input_inner_space_to_tokenizer: 0.125rem; --_ui5_input_inner_space_to_n_more_text: 0.125rem; --_ui5_input_icon_min_width: var(--_ui5_input_compact_min_width); + --_ui5_input_min_width_tokenizer_available: 2rem; /* Menu */ --_ui5_menu_item_padding: 0 0.75rem 0 0.5rem; From 4b4111446618140af18e51df69b2737a9e26d814 Mon Sep 17 00:00:00 2001 From: i518532 Date: Thu, 12 Mar 2026 09:16:08 +0200 Subject: [PATCH 3/5] fix(ui5-multi-input, ui5-combobox): fix tests --- packages/main/src/themes/ResponsivePopoverCommon.css | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css index 6ae7ec843251..d96875cc5b2b 100644 --- a/packages/main/src/themes/ResponsivePopoverCommon.css +++ b/packages/main/src/themes/ResponsivePopoverCommon.css @@ -43,7 +43,7 @@ padding: .1875rem .5rem } -[inner-input] { +[ui5-responsive-popover] [inner-input] { background: transparent; color: inherit; border: none; @@ -53,7 +53,6 @@ line-height: normal; padding: var(--_ui5_input_inner_padding); box-sizing: border-box; - min-width: 3rem; text-overflow: ellipsis; flex: 1; outline: none; @@ -62,19 +61,19 @@ border-radius: var(--_ui5_input_border_radius); } -[inner-input]::selection, -[inner-input]::-moz-selection { +[ui5-responsive-popover] [inner-input]::selection, +[ui5-responsive-popover] [inner-input]::-moz-selection { background: var(--sapSelectedColor); color: var(--sapContent_ContrastTextColor); } /* Input placeholder */ -[inner-input]::-webkit-input-placeholder { +[ui5-responsive-popover] [inner-input]::-webkit-input-placeholder { font-style: var(--_ui5_input_placeholder_style); color: var(--sapField_PlaceholderTextColor); } -[inner-input]::-moz-placeholder { +[ui5-responsive-popover] [inner-input]::-moz-placeholder { font-style: var(--_ui5_input_placeholder_style); color: var(--sapField_PlaceholderTextColor); } From db8ec08a9e672174f1e1b1b660bd3046b9dad203 Mon Sep 17 00:00:00 2001 From: i518532 Date: Thu, 12 Mar 2026 09:22:32 +0200 Subject: [PATCH 4/5] fix(ui5-multi-input, ui5-combobox): fix tests --- packages/main/src/themes/ResponsivePopoverCommon.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css index d96875cc5b2b..0e4c1ea22a53 100644 --- a/packages/main/src/themes/ResponsivePopoverCommon.css +++ b/packages/main/src/themes/ResponsivePopoverCommon.css @@ -53,6 +53,7 @@ line-height: normal; padding: var(--_ui5_input_inner_padding); box-sizing: border-box; + min-width: 3rem; text-overflow: ellipsis; flex: 1; outline: none; From 8d39a6d89d6f4885a182719dd6ab7c0e4a1b6072 Mon Sep 17 00:00:00 2001 From: i518532 Date: Thu, 12 Mar 2026 10:10:05 +0200 Subject: [PATCH 5/5] fix(ui5-multi-input): correct min-width when tokenizer available --- packages/main/src/themes/ResponsivePopoverCommon.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css index 0e4c1ea22a53..6ae7ec843251 100644 --- a/packages/main/src/themes/ResponsivePopoverCommon.css +++ b/packages/main/src/themes/ResponsivePopoverCommon.css @@ -43,7 +43,7 @@ padding: .1875rem .5rem } -[ui5-responsive-popover] [inner-input] { +[inner-input] { background: transparent; color: inherit; border: none; @@ -62,19 +62,19 @@ border-radius: var(--_ui5_input_border_radius); } -[ui5-responsive-popover] [inner-input]::selection, -[ui5-responsive-popover] [inner-input]::-moz-selection { +[inner-input]::selection, +[inner-input]::-moz-selection { background: var(--sapSelectedColor); color: var(--sapContent_ContrastTextColor); } /* Input placeholder */ -[ui5-responsive-popover] [inner-input]::-webkit-input-placeholder { +[inner-input]::-webkit-input-placeholder { font-style: var(--_ui5_input_placeholder_style); color: var(--sapField_PlaceholderTextColor); } -[ui5-responsive-popover] [inner-input]::-moz-placeholder { +[inner-input]::-moz-placeholder { font-style: var(--_ui5_input_placeholder_style); color: var(--sapField_PlaceholderTextColor); }