From 6daff23a55bb09f1bf41d7177ded5cf13b6f1b1c Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 25 Nov 2025 16:28:41 +0200 Subject: [PATCH 1/6] fix(ui5-*): improve vertical alignment of inline web comps --- packages/main/src/themes/CheckBox.css | 1 + packages/main/src/themes/DatePicker.css | 1 + packages/main/src/themes/RadioButton.css | 1 + packages/main/src/themes/RatingIndicator.css | 1 + packages/main/src/themes/StepInput.css | 1 - packages/main/src/themes/Switch.css | 1 + packages/main/src/themes/Text.css | 2 +- .../main/test/pages/VerticalAlignment.html | 223 ++++++++++++++++++ 8 files changed, 229 insertions(+), 2 deletions(-) create mode 100644 packages/main/test/pages/VerticalAlignment.html diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index 5cd7b607b1e8..17a8b03cdba0 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/packages/main/src/themes/CheckBox.css @@ -1,5 +1,6 @@ @import "./InvisibleTextStyles.css"; @import "./TapHighlightColor.css"; +@import "./FormComponents.css"; :host(:not([hidden])) { display: inline-block; diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css index 11ceddfe6386..b55aaa304c09 100644 --- a/packages/main/src/themes/DatePicker.css +++ b/packages/main/src/themes/DatePicker.css @@ -1,6 +1,7 @@ @import "./InvisibleTextStyles.css"; @import "./InputIcon.css"; @import "./InputSharedStyles.css"; +@import "./FormComponents.css"; :host(:not([hidden])) { display: inline-block; diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css index cf46853524bf..2cf1e9379006 100644 --- a/packages/main/src/themes/RadioButton.css +++ b/packages/main/src/themes/RadioButton.css @@ -1,4 +1,5 @@ @import "./InvisibleTextStyles.css"; +@import "./FormComponents.css"; :host(:not([hidden])) { display: inline-block; diff --git a/packages/main/src/themes/RatingIndicator.css b/packages/main/src/themes/RatingIndicator.css index 3cffe8607bbc..566be4f3ca47 100644 --- a/packages/main/src/themes/RatingIndicator.css +++ b/packages/main/src/themes/RatingIndicator.css @@ -3,6 +3,7 @@ font-size: 24px; margin: var(--_ui5_rating_indicator_component_spacing); cursor: pointer; + vertical-align: middle; } :host([disabled]) { diff --git a/packages/main/src/themes/StepInput.css b/packages/main/src/themes/StepInput.css index b75d6e810894..902108a14c5b 100644 --- a/packages/main/src/themes/StepInput.css +++ b/packages/main/src/themes/StepInput.css @@ -5,7 +5,6 @@ :host(:not([hidden])) { display: inline-block; - width: 100%; line-height: normal; letter-spacing: normal; word-spacing: normal; diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 6c0445a42454..4a8fc7f2acd7 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -1,5 +1,6 @@ @import "./InvisibleTextStyles.css"; @import "./TapHighlightColor.css"; +@import "./FormComponents.css"; :host(:not([hidden])) { display: inline-block; diff --git a/packages/main/src/themes/Text.css b/packages/main/src/themes/Text.css index 51fde0bee10a..bf347cb863f5 100644 --- a/packages/main/src/themes/Text.css +++ b/packages/main/src/themes/Text.css @@ -15,7 +15,7 @@ } :host(:not([max-lines="1"])) { - display: -webkit-box; + display: -webkit-inline-box; -webkit-line-clamp: var(--_ui5_text_max_lines); line-clamp: var(--_ui5_text_max_lines); -webkit-box-orient: vertical; diff --git a/packages/main/test/pages/VerticalAlignment.html b/packages/main/test/pages/VerticalAlignment.html new file mode 100644 index 000000000000..924db674adc0 --- /dev/null +++ b/packages/main/test/pages/VerticalAlignment.html @@ -0,0 +1,223 @@ + + + + + ui5 webcomponents + + + + + + + + + + + + + + webc +
+ + + + Button + + + + + + + + + +
+ + +
+
+ webc +
+ + + + + + + + + + + Upload + + +
+ + +
+
+ + webc +
+ + + + + + + Button + + Lorem ipsum dolor sit + Link + Some text here + + + Map + Satellite + + + + + + + + + + + +
+ +
+
+ + webc +
+ + + + Button + + + + Tag Text + +
+ + + webc +
+ + + Lorem ipsum dolor sit + Some text here + Link + + +
+ +
+
+
+ + OpenUI5 +
+ +
+ + +
+
+
+ + OpenUI5 in VBOX +
+ +
+ +
+
+
+ + Mixed +
+ + + + + + + Button +
+ + From 0b5ad0dcd47278e26aac32066a3b5bc1b5de17fb Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Fri, 28 Nov 2025 11:04:36 +0200 Subject: [PATCH 2/6] chore: add one more sample --- .../main/test/pages/VerticalAlignment.html | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/main/test/pages/VerticalAlignment.html b/packages/main/test/pages/VerticalAlignment.html index 924db674adc0..54d7be659bb4 100644 --- a/packages/main/test/pages/VerticalAlignment.html +++ b/packages/main/test/pages/VerticalAlignment.html @@ -80,10 +80,40 @@ + + + +
+ + + + + + + + + + + + + + + + +
+ + +
+
+ webc
From 42c1fab0e0b52b2f66b0b5a1205d7887d33b8d8b Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 2 Dec 2025 18:20:23 +0200 Subject: [PATCH 3/6] chore: add Slider fixes --- packages/main/src/themes/SliderBase.css | 2 +- .../main/src/themes/sap_horizon/SliderBase-parameters.css | 4 ++-- .../src/themes/sap_horizon_dark/SliderBase-parameters.css | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css index 1649fabe8dc1..5f0ccbcf8c1a 100644 --- a/packages/main/src/themes/SliderBase.css +++ b/packages/main/src/themes/SliderBase.css @@ -9,7 +9,7 @@ :host { box-sizing: border-box; cursor: pointer; - vertical-align: top; + vertical-align: middle; width: 100%; } diff --git a/packages/main/src/themes/sap_horizon/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon/SliderBase-parameters.css index aa272d218433..d9d94ac59601 100644 --- a/packages/main/src/themes/sap_horizon/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon/SliderBase-parameters.css @@ -43,7 +43,7 @@ --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); --_ui5_range_slider_active_handle_icon_display: none; - --_ui5_range_slider_progress_focus_top: -15px; + --_ui5_range_slider_progress_focus_top: -1.063rem; --_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px); --_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem; --_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px); @@ -64,7 +64,7 @@ --_ui5_slider_handle_width: 1.5rem; --_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px); --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px); - --_ui5_range_slider_progress_focus_top: -.8125rem; + --_ui5_range_slider_progress_focus_top: -.938rem; --_ui5_slider_tooltip_bottom: 1.75rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); --_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px); diff --git a/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css index aa272d218433..d9d94ac59601 100644 --- a/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css @@ -43,7 +43,7 @@ --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); --_ui5_range_slider_active_handle_icon_display: none; - --_ui5_range_slider_progress_focus_top: -15px; + --_ui5_range_slider_progress_focus_top: -1.063rem; --_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px); --_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem; --_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px); @@ -64,7 +64,7 @@ --_ui5_slider_handle_width: 1.5rem; --_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px); --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px); - --_ui5_range_slider_progress_focus_top: -.8125rem; + --_ui5_range_slider_progress_focus_top: -.938rem; --_ui5_slider_tooltip_bottom: 1.75rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); --_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px); From 4df5937e1202d914d567df9cf8a95ac2505a589a Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 3 Dec 2025 09:44:00 +0200 Subject: [PATCH 4/6] chore: minor update --- packages/main/src/themes/SliderBase.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css index 5f0ccbcf8c1a..a8cd7e6ddf2d 100644 --- a/packages/main/src/themes/SliderBase.css +++ b/packages/main/src/themes/SliderBase.css @@ -1,4 +1,5 @@ @import "./InvisibleTextStyles.css"; +@import "./FormComponents.css"; :host([disabled]) { opacity: var(--_ui5_slider_disabled_opacity); @@ -9,7 +10,6 @@ :host { box-sizing: border-box; cursor: pointer; - vertical-align: middle; width: 100%; } From 0c8fa110abf562d57ac5f25d15b8309b1ab09c7f Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 3 Dec 2025 11:09:39 +0200 Subject: [PATCH 5/6] chore: minort update --- packages/main/src/themes/RatingIndicator.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/main/src/themes/RatingIndicator.css b/packages/main/src/themes/RatingIndicator.css index 566be4f3ca47..30e759f2691c 100644 --- a/packages/main/src/themes/RatingIndicator.css +++ b/packages/main/src/themes/RatingIndicator.css @@ -1,9 +1,10 @@ + @import "./FormComponents.css"; + :host(:not([hidden])) { display: inline-block; font-size: 24px; margin: var(--_ui5_rating_indicator_component_spacing); cursor: pointer; - vertical-align: middle; } :host([disabled]) { From 5f26ce0cf4df3f1696f962d89e11d2ff7088709b Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 17 Dec 2025 16:35:07 +0200 Subject: [PATCH 6/6] chore: add test --- .../cypress/specs/VerticalAlignment.cy.tsx | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 packages/main/cypress/specs/VerticalAlignment.cy.tsx diff --git a/packages/main/cypress/specs/VerticalAlignment.cy.tsx b/packages/main/cypress/specs/VerticalAlignment.cy.tsx new file mode 100644 index 000000000000..f14844d15bb9 --- /dev/null +++ b/packages/main/cypress/specs/VerticalAlignment.cy.tsx @@ -0,0 +1,77 @@ +import CheckBox from "../../src/CheckBox.js"; +import Switch from "../../src/Switch.js"; +import Link from "../../src/Link.js"; +import Label from "../../src/Label.js"; +import Text from "../../src/Text.js"; +import RatingIndicator from "../../src/RatingIndicator.js"; +import StepInput from "../../src/StepInput.js"; +import Button from "../../src/Button.js"; +import ComboBox from "../../src/ComboBox.js"; +import ComboBoxItem from "../../src/ComboBoxItem.js"; +import SegmentedButtonItem from "../../src/SegmentedButtonItem.js"; +import SegmentedButton from "../../src/SegmentedButton.js"; +import Input from "../../src/Input.js"; +import DatePicker from "../../src/DatePicker.js"; +import RadioButton from "../../src/RadioButton.js"; +import RangeSlider from "../../src/RangeSlider.js"; +import Slider from "../../src/Slider.js"; +import Select from "../../src/Select.js"; +import Option from "../../src/Option.js"; +import FileUploader from "../../src/FileUploader.js"; + +describe("Vertical Alignment", () => { + it("tests container height to detect and avoid vertical misalignment", () => { + cy.mount( + <> +
+ + + + Map + Satellite + + + + + + + + + + + +
+ +
+ + + + + Some text here + + Link + + +
+ +
+ +
+ +
+ + +
+ + ); + + cy.get("#container").should("have.css", "height", "44px"); + cy.get("#container2").should("have.css", "height", "44px"); + cy.get("#container3").should("have.css", "height", "48px"); + cy.get("#container4").should("have.css", "height", "53px"); + }); +});