Skip to content

Commit f06d066

Browse files
hinzzxhinzzx
authored
fix(ui5-timeline, ui5-view-settings-dialog): correct parameters definition (#12915)
Previously few of our Cozy and Compact parameters for Timeline-related and ViewSettingsDialog components were defined in the wrong package sizes-parameters.css file. This could cause potential framework level issues. We now moved those definitions to the correct places. We're still monitoring for any noticeable visual changes. So misalignments might occur in the current state.
1 parent 26e3de7 commit f06d066

17 files changed

Lines changed: 118 additions & 83 deletions

‎packages/fiori/src/themes/base/TimelineGroupItem-parameters.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
:root {
22
--_ui5_timeline_tlgi_line_horizontal_height: 14.8125rem;
33
--_ui5_timeline_tlgi_root_horizontal_height: 19.9375rem;
4+
}
5+
6+
[data-ui5-compact-size],
7+
.ui5-content-density-compact,
8+
.sapUiSizeCompact {
9+
--_ui5_timeline_tlgi_compact_icon_before_height: calc(100% + 1.5rem);
10+
--_ui5_timeline_tlgi_horizontal_line_placeholder_before_width: var(--_ui5_timeline_tlgi_compact_icon_before_height);
11+
--_ui5_timeline_tlgi_horizontal_compact_root_margin_left: 0.5rem;
12+
--_ui5_timeline_tlgi_compact_root_gap: 0.5rem;
13+
--_ui5_timeline_tlgi_root_horizontal_height: 19.375rem;
414
}

‎packages/fiori/src/themes/base/TimelineItem-parameters.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,54 @@
1717
--_ui5_TimelineItem_bubble_content_padding: var(--_ui5_tl_bubble_padding);
1818
--_ui5_TimelineItem_bubble_content_subtitle_padding_top: 0.375rem;
1919
--_ui5_TimelineItem_bubble_content_description_padding_top: 0.75rem;
20+
21+
/* Timeline (container) */
22+
--_ui5_tl_bubble_padding: 1rem;
23+
--_ui5_tl_padding: 1rem 1rem 1rem .5rem;
24+
--_ui5_tl_li_margin_bottom: 1.625rem;
25+
26+
/* TimelineItem */
27+
--_ui5_timeline_tli_indicator_before_bottom: -1.5rem;
28+
--_ui5_timeline_tli_indicator_before_right: -1.625rem;
29+
--_ui5_timeline_tli_indicator_before_without_icon_bottom: -1.875rem;
30+
--_ui5_timeline_tli_indicator_before_without_icon_right: -1.9375rem;
31+
32+
/* TimelineItem COZY */
33+
--_ui5_timeline_tli_indicator_after_top: calc(-100% - 1rem);
34+
--_ui5_timeline_tli_indicator_after_height: calc(100% + 1rem);
35+
--_ui5_timeline_tli_indicator_before_height: 100%;
36+
--_ui5_timeline_tli_horizontal_indicator_after_width: calc(100% + 0.25rem);
37+
--_ui5_timeline_tli_horizontal_indicator_after_left: 1.9375rem;
38+
--_ui5_timeline_tli_horizontal_without_icon_indicator_before_width: calc(100% + 0.5rem);
39+
--_ui5_timeline_tli_horizontal_indicator_before_width: calc(100% + 0.5rem);
40+
--_ui5_timeline_tli_icon_horizontal_indicator_after_width: calc(100% + 0.25rem);
41+
--_ui5_timeline_tli_without_icon_horizontal_indicator_before_width: calc(100% + 0.375rem);
42+
--_ui5_timeline_tli_horizontal_indicator_short_after_width: 100%;
43+
}
44+
45+
[data-ui5-compact-size],
46+
.ui5-content-density-compact,
47+
.sapUiSizeCompact {
48+
/* Timeline (container) */
49+
--_ui5_tl_bubble_padding: .5rem;
50+
--_ui5_tl_padding: .5rem;
51+
--_ui5_tl_li_margin_bottom: .5rem;
52+
53+
/* TimelineItem */
54+
--_ui5_timeline_tli_indicator_before_bottom: -0.75rem;
55+
--_ui5_timeline_tli_indicator_before_right: -0.5rem;
56+
--_ui5_timeline_tli_indicator_before_without_icon_bottom: -1rem;
57+
--_ui5_timeline_tli_indicator_before_without_icon_right: -0.8125rem;
58+
59+
/* TimelineItem COMPACT */
60+
--_ui5_timeline_tli_indicator_before_height: calc(100% - 1.25rem);
61+
--_ui5_timeline_tli_horizontal_without_icon_indicator_before_width: var(--_ui5_timeline_tli_indicator_after_height);
62+
--_ui5_timeline_tli_horizontal_indicator_after_width: var(--_ui5_timeline_tli_indicator_after_height);
63+
--_ui5_timeline_tli_horizontal_indicator_before_width: var(--_ui5_timeline_tli_indicator_after_height);
64+
--_ui5_timeline_tli_icon_horizontal_indicator_after_width: var(--_ui5_timeline_tli_indicator_after_height);
65+
--_ui5_timeline_tli_indicator_after_top: calc(-100% + 0.9375rem);
66+
--_ui5_timeline_tli_indicator_after_height: calc(100% - 0.75rem);
67+
--_ui5_timeline_tli_horizontal_indicator_after_left: 1.8625rem;
68+
--_ui5_timeline_tli_horizontal_indicator_short_after_width: calc(100% - 1rem);
69+
--_ui5_timeline_tli_without_icon_horizontal_indicator_before_width: calc(100% - 0.625rem);
2070
}

‎packages/fiori/src/themes/base/ViewSettingsDialog-parameters.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,12 @@
44
--_ui5_vsd_content_li_padding: 0.375rem;
55
--_ui5_vsd_content_height: 23.4375rem;
66
--_ui5_vsd_expand_content_height: 26.1875rem;
7+
}
8+
9+
[data-ui5-compact-size],
10+
.ui5-content-density-compact,
11+
.sapUiSizeCompact {
12+
--_ui5_vsd_header_container: 2.5rem;
13+
--_ui5_vsd_sub_header_container_height: 2rem;
14+
--_ui5_vsd_expand_content_height: 25.4375rem;
715
}

‎packages/fiori/src/themes/sap_fiori_3/TimelineGroupItem-parameters.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,10 @@
33
:root {
44
--_ui5_timeline_tlgi_line_horizontal_height: 16.375rem;
55
--_ui5_timeline_tlgi_root_horizontal_height: 21.53125rem;
6+
}
7+
8+
[data-ui5-compact-size],
9+
.ui5-content-density-compact,
10+
.sapUiSizeCompact {
11+
--_ui5_timeline_tlgi_root_horizontal_height: 20.90625rem;
612
}

‎packages/fiori/src/themes/sap_fiori_3/TimelineItem-parameters.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import "../base/TimelineItem-parameters.css";
2+
3+
[data-ui5-compact-size],
4+
.ui5-content-density-compact,
5+
.sapUiSizeCompact {
6+
/* Timeline Item COMPACT - sap_fiori_3 specific values */
7+
--_ui5_timeline_tli_indicator_after_height: 50%;
8+
--_ui5_timeline_tli_indicator_after_top: -50%;
9+
--_ui5_timeline_tli_horizontal_indicator_after_width: calc(100% - 1rem);
10+
--_ui5_timeline_tli_icon_horizontal_indicator_after_width: calc(100% - 0.75rem);
11+
}

‎packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@import "../base/ProductSwitchItem-parameters.css";
88
@import "./ShellBar-parameters.css";
99
@import "../base/SideNavigation-parameters.css";
10-
@import "../base/TimelineItem-parameters.css";
10+
@import "./TimelineItem-parameters.css";
1111
@import "../base/UploadCollection-parameters.css";
1212
@import "../base/ViewSettingsDialog-parameters.css";
1313
@import "../base/Wizard-parameters.css";
@@ -19,4 +19,5 @@
1919
@import "../base/DynamicPageHeader-parameters.css";
2020
@import "./DynamicPageHeaderActions-parameters.css";
2121
@import "./TimelineGroupItem-parameters.css";
22+
@import "../base/rtl-parameters.css";
2223
@import "../base/UserSettingsAppearanceViewItem-parameters.css";

‎packages/fiori/src/themes/sap_fiori_3_dark/TimelineItem-parameters.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import "../base/TimelineItem-parameters.css";
2+
3+
[data-ui5-compact-size],
4+
.ui5-content-density-compact,
5+
.sapUiSizeCompact {
6+
--_ui5_timeline_tli_indicator_after_height: 50%;
7+
--_ui5_timeline_tli_indicator_after_top: -50%;
8+
--_ui5_timeline_tli_horizontal_indicator_after_width: calc(100% - 1rem);
9+
}

‎packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@import "../base/ProductSwitchItem-parameters.css";
88
@import "./ShellBar-parameters.css";
99
@import "../base/SideNavigation-parameters.css";
10-
@import "../base/TimelineItem-parameters.css";
10+
@import "./TimelineItem-parameters.css";
1111
@import "../base/UploadCollection-parameters.css";
1212
@import "../base/ViewSettingsDialog-parameters.css";
1313
@import "../base/Wizard-parameters.css";
@@ -19,4 +19,5 @@
1919
@import "../base/DynamicPageHeader-parameters.css";
2020
@import "../sap_fiori_3/DynamicPageHeaderActions-parameters.css";
2121
@import "../sap_fiori_3/TimelineGroupItem-parameters.css";
22+
@import "../base/rtl-parameters.css";
2223
@import "../base/UserSettingsAppearanceViewItem-parameters.css";

‎packages/fiori/src/themes/sap_fiori_3_hcb/TimelineItem-parameters.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,12 @@
33
:root {
44
--_ui5_TimelineItem_bubble_rtl_left_offset: -0.1875rem;
55
--_ui5_TimelineItem_bubble_rtl_right_offset: -0.6875rem;
6+
}
7+
8+
[data-ui5-compact-size],
9+
.ui5-content-density-compact,
10+
.sapUiSizeCompact {
11+
--_ui5_timeline_tli_indicator_after_height: 50%;
12+
--_ui5_timeline_tli_indicator_after_top: -50%;
13+
--_ui5_timeline_tli_horizontal_indicator_after_width: calc(100% - 1rem);
614
}

‎packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,5 @@
2020
@import "../base/DynamicPageHeader-parameters.css";
2121
@import "../sap_fiori_3/DynamicPageHeaderActions-parameters.css";
2222
@import "../sap_fiori_3/TimelineGroupItem-parameters.css";
23-
@import "../base/UserSettingsAppearanceViewItem-parameters.css";
23+
@import "../base/rtl-parameters.css";
24+
@import "../base/UserSettingsAppearanceViewItem-parameters.css";

0 commit comments

Comments
 (0)