Skip to content

Commit dda0591

Browse files
ilhan007ilhan007
authored
fix(ui5-*): improve vertical alignment of inline web comps (#12718)
Improve vertical alignment of inline web comps by forcing same `vertical-align` (vertical-align: middle in this case brought by FormComponents.css). Before: <img width="951" height="172" alt="Screenshot 2025-11-25 at 16 36 36" src="https://github.com/user-attachments/assets/116b43b1-e7c4-460c-858b-2673d76ad5d5" /> After <img width="1353" height="109" alt="Screenshot 2025-11-25 at 16 33 57" src="https://github.com/user-attachments/assets/3393c21c-3f9d-497d-8990-4d23480bdb72" /> **Changes** - **RatingIndicator**, **Switch**, **CheckBox**, **RadioButton**, **DatePicker**, **Slider** now use `vertical-align: middle` as the rest of the form components - **StepInput** was the only input element with width: 100% falling on next line, all the rest can stay side by side - **Text** use to behave as a block element, falling on next line, due to its `display: -webkit-box;` => changed to `display: -webkit-inline-box;` to behave properly - **Slider** focus placement is fixed. e.g equal space around the handles before <img width="285" height="66" alt="Screenshot 2025-12-02 at 11 03 05" src="https://github.com/user-attachments/assets/26a599b8-62c5-4a1e-a3c7-1c644428aefc" /> after <img width="438" height="79" alt="Screenshot 2025-12-02 at 15 42 33" src="https://github.com/user-attachments/assets/b5ff3f03-2861-4cfe-9b42-0f71090be56b" />
1 parent a6bc028 commit dda0591

File tree

12 files changed

+342
-7
lines changed

12 files changed

+342
-7
lines changed

‎packages/main/cypress/specs/VerticalAlignment.cy.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import CheckBox from "../../src/CheckBox.js";
2+
import Switch from "../../src/Switch.js";
3+
import Link from "../../src/Link.js";
4+
import Label from "../../src/Label.js";
5+
import Text from "../../src/Text.js";
6+
import RatingIndicator from "../../src/RatingIndicator.js";
7+
import StepInput from "../../src/StepInput.js";
8+
import Button from "../../src/Button.js";
9+
import ComboBox from "../../src/ComboBox.js";
10+
import ComboBoxItem from "../../src/ComboBoxItem.js";
11+
import SegmentedButtonItem from "../../src/SegmentedButtonItem.js";
12+
import SegmentedButton from "../../src/SegmentedButton.js";
13+
import Input from "../../src/Input.js";
14+
import DatePicker from "../../src/DatePicker.js";
15+
import RadioButton from "../../src/RadioButton.js";
16+
import RangeSlider from "../../src/RangeSlider.js";
17+
import Slider from "../../src/Slider.js";
18+
import Select from "../../src/Select.js";
19+
import Option from "../../src/Option.js";
20+
import FileUploader from "../../src/FileUploader.js";
21+
22+
describe("Vertical Alignment", () => {
23+
it("tests container height to detect and avoid vertical misalignment", () => {
24+
cy.mount(
25+
<>
26+
<div id="container">
27+
<Input value="value"></Input>
28+
<DatePicker value="today"></DatePicker>
29+
<SegmentedButton accessibleName="Geographic location">
30+
<SegmentedButtonItem>Map</SegmentedButtonItem>
31+
<SegmentedButtonItem selected>Satellite</SegmentedButtonItem>
32+
</SegmentedButton>
33+
<ComboBox value="Bulgaria">
34+
<ComboBoxItem text="Algeria" id="cbi"></ComboBoxItem>
35+
<ComboBoxItem text="Argentina"></ComboBoxItem>
36+
<ComboBoxItem text="Bosnia and Herzegovina"></ComboBoxItem>
37+
<ComboBoxItem text="Brazil"></ComboBoxItem>
38+
<ComboBoxItem text="Bulgaria"></ComboBoxItem>
39+
<ComboBoxItem text="Canada"></ComboBoxItem>
40+
<ComboBoxItem text="Chile"></ComboBoxItem>
41+
</ComboBox>
42+
<Select>
43+
<Option>Option 1</Option>
44+
<Option>Option 2</Option>
45+
<Option>Option 3</Option>
46+
</Select>
47+
</div>
48+
49+
<div id="container2">
50+
<CheckBox text="Check" checked></CheckBox>
51+
<Switch textOn="On" textOff="Off"></Switch>
52+
<RadioButton text="option c" checked></RadioButton>
53+
<Label>Lorem ipsum dolor sit</Label>
54+
<Text>Some text here</Text>
55+
<Button>Click Me</Button>
56+
<Link href="https://ui5webcomponents.github.io" target="_blank">Link</Link>
57+
<StepInput></StepInput>
58+
<FileUploader></FileUploader>
59+
</div>
60+
61+
<div id="container3">
62+
<RatingIndicator></RatingIndicator>
63+
</div>
64+
65+
<div id="container4">
66+
<RangeSlider id="range_slider1" style={{ width: "200px" }}></RangeSlider>
67+
<Slider id="slider1" style={{ width: "200px" }}></Slider>
68+
</div>
69+
</>
70+
);
71+
72+
cy.get("#container").should("have.css", "height", "44px");
73+
cy.get("#container2").should("have.css", "height", "44px");
74+
cy.get("#container3").should("have.css", "height", "48px");
75+
cy.get("#container4").should("have.css", "height", "53px");
76+
});
77+
});

‎packages/main/src/themes/CheckBox.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "./InvisibleTextStyles.css";
22
@import "./TapHighlightColor.css";
3+
@import "./FormComponents.css";
34

45
:host(:not([hidden])) {
56
display: inline-block;

‎packages/main/src/themes/DatePicker.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import "./InvisibleTextStyles.css";
22
@import "./InputIcon.css";
33
@import "./InputSharedStyles.css";
4+
@import "./FormComponents.css";
45

56
:host(:not([hidden])) {
67
display: inline-block;

‎packages/main/src/themes/RadioButton.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "./InvisibleTextStyles.css";
2+
@import "./FormComponents.css";
23

34
:host(:not([hidden])) {
45
display: inline-block;

‎packages/main/src/themes/RatingIndicator.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "./FormComponents.css";
2+
13
:host(:not([hidden])) {
24
display: inline-block;
35
font-size: 24px;

‎packages/main/src/themes/SliderBase.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "./InvisibleTextStyles.css";
2+
@import "./FormComponents.css";
23

34
:host([disabled]) {
45
opacity: var(--_ui5_slider_disabled_opacity);
@@ -9,7 +10,6 @@
910
:host {
1011
box-sizing: border-box;
1112
cursor: pointer;
12-
vertical-align: top;
1313
width: 100%;
1414
}
1515

‎packages/main/src/themes/StepInput.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55

66
:host(:not([hidden])) {
77
display: inline-block;
8-
width: 100%;
98
line-height: normal;
109
letter-spacing: normal;
1110
word-spacing: normal;

‎packages/main/src/themes/Switch.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "./InvisibleTextStyles.css";
22
@import "./TapHighlightColor.css";
3+
@import "./FormComponents.css";
34

45
:host(:not([hidden])) {
56
display: inline-block;

‎packages/main/src/themes/Text.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
}
1616

1717
:host(:not([max-lines="1"])) {
18-
display: -webkit-box;
18+
display: -webkit-inline-box;
1919
-webkit-line-clamp: var(--_ui5_text_max_lines);
2020
line-clamp: var(--_ui5_text_max_lines);
2121
-webkit-box-orient: vertical;

‎packages/main/src/themes/sap_horizon/SliderBase-parameters.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343

4444
--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
4545
--_ui5_range_slider_active_handle_icon_display: none;
46-
--_ui5_range_slider_progress_focus_top: -15px;
46+
--_ui5_range_slider_progress_focus_top: -1.063rem;
4747
--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
4848
--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
4949
--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
@@ -64,7 +64,7 @@
6464
--_ui5_slider_handle_width: 1.5rem;
6565
--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
6666
--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
67-
--_ui5_range_slider_progress_focus_top: -.8125rem;
67+
--_ui5_range_slider_progress_focus_top: -.938rem;
6868
--_ui5_slider_tooltip_bottom: 1.75rem;
6969
--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
7070
--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);

0 commit comments

Comments
 (0)