feat(ui5-list): implement Horizon theme (#5057)

dobrinyonkov · web-flow · commit 27f8ea620748 · 2022-04-19T17:03:13.000+03:00
Related to: #5008
diff --git a/packages/main/src/themes/GroupHeaderListItem.css b/packages/main/src/themes/GroupHeaderListItem.css
@@ -3,10 +3,13 @@
 :host {
 	height: var(--_ui5_group_header_list_item_height);
 	background: var(--ui5-group-header-listitem-background-color);
-	border-bottom: 1px solid var(--sapList_TableGroupHeaderBorderColor);
 	color: var(--sapList_TableGroupHeaderTextColor);
 }
 
+:host([has-border]) {
+	border-bottom: 1px solid var(--sapList_GroupHeaderBorderColor);
+}
+
 .ui5-li-root.ui5-ghli-root {
 	padding-top: 0.5rem;
 	color: currentColor;
diff --git a/packages/main/src/themes/GrowingButton.css b/packages/main/src/themes/GrowingButton.css
@@ -3,6 +3,7 @@
 	align-items: center;
 	padding: var(--_ui5_load_more_padding);
 	border-top: 1px solid var(--sapList_BorderColor);
+	border-bottom: var(--_ui5_load_more_border-bottom);
 	box-sizing: border-box;
 	cursor: pointer;
 	outline: none;
diff --git a/packages/main/src/themes/List.css b/packages/main/src/themes/List.css
@@ -106,7 +106,8 @@
 	border-bottom: 1px solid var(--sapList_BorderColor);
 	padding: 0 1rem !important;
 	height: var(--_ui5_list_no_data_height);
-	font-size: var(--sapFontSize);
+	font-size: var(--_ui5_list_no_data_font_size);
+	font-family: "72override", var(--sapFontFamily);
 }
 
 .ui5-list-nodata-text {
diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css
@@ -167,6 +167,7 @@
 .ui5-li-deletebtn {
 	display: flex;
 	align-items: center;
+	margin-left: var(--_ui5_list_buttons_left_space);
 }
 
 .ui5-li-multisel-cb,
diff --git a/packages/main/src/themes/ListItemBase.css b/packages/main/src/themes/ListItemBase.css
@@ -50,10 +50,10 @@
 	content: "";
 	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	position: absolute;
-	top: 0.0625rem;
-	right: 0.0625rem;
-	bottom: 0.0625rem;
-	left: 0.0625rem;
+	top: 0.125rem;
+	right: 0.125rem;
+	bottom: 0.125rem;
+	left: 0.125rem;
 	pointer-events: none;
 }
 
@@ -81,5 +81,6 @@
 	max-width: 100%;
 	min-height: 1px; /* IE specific: fixes vertical centering with flex  */
 	font-family: "72override", var(--sapFontFamily);
+	color: var(--sapList_TextColor);
 	pointer-events: none;  /* IE specific: fixes focus crrectly applied*/
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -41,6 +41,7 @@
 	--_ui5_list_no_data_height: 3rem;
 	--_ui5_list_item_cb_margin_right: 0;
 	--_ui5_list_item_title_size: var(--sapFontLargeSize);
+	--_ui5_list_no_data_font_size: var(--sapFontLargeSize);
 	--_ui5_list_item_img_size: 3rem;
 	--_ui5_list_item_img_top_margin: 0.5rem;
 	--_ui5_list_item_img_bottom_margin: 0.5rem;
@@ -52,6 +53,7 @@
 	--_ui5_group_header_list_item_height: 2.75rem;
 	--_ui5_list_busy_row_height: 3rem;
 	--_ui5_month_picker_item_height: 3rem;
+	--_ui5_list_buttons_left_space: 0.125rem;
 
 	/* Popup subclasses */
 	--_ui5_popup_default_header_height: 2.75rem;
@@ -228,11 +230,13 @@
 	--_ui5_list_item_cb_margin_right: .5rem;
 	--_ui5_list_item_title_size: var(--sapFontSize);
 	--_ui5_list_item_img_top_margin: 0.55rem;
+	--_ui5_list_no_data_font_size: var(--sapFontSize);
 	--_ui5_list_item_dropdown_base_height: 2rem;
 	--_ui5_list_item_base_height: 2rem;
 	--_ui5_list_item_icon_size: 1rem;
 	--_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding));
 	--_ui5_list_busy_row_height: 2rem;
+	--_ui5_list_buttons_left_space: 0.125rem;
 
 	--_ui5_month_picker_item_height: 2rem;
 	--_ui5_year_picker_item_height: 2rem;
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/ListItem-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/ListItem-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5_list_buttons_left_space: 0.25rem;
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -19,6 +19,7 @@
 @import "../base/InputIcon-parameters.css";
 @import "./Link-parameters.css";
 @import "../base/List-parameters.css";
+@import "./ListItem-parameters.css";
 @import "../base/ListItemBase-parameters.css";
 @import "./MonthPicker-parameters.css";
 @import "./MessageStrip-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/ListItem-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/ListItem-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5_list_buttons_left_space: 0.25rem;
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -19,6 +19,7 @@
 @import "../base/InputIcon-parameters.css";
 @import "./Link-parameters.css";
 @import "../base/List-parameters.css";
+@import "./ListItem-parameters.css";
 @import "../base/ListItemBase-parameters.css";
 @import "./MonthPicker-parameters.css";
 @import "./MessageStrip-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon/GrowingButton-parameters.css b/packages/main/src/themes/sap_horizon/GrowingButton-parameters.css
@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_load_more_outline_width: var(--sapContent_FocusWidth);
+	--_ui5_load_more_border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 }
diff --git a/packages/main/src/themes/sap_horizon/List-parameters.css b/packages/main/src/themes/sap_horizon/List-parameters.css
@@ -1,5 +1,5 @@
 @import "../base/List-parameters.css";
 
 :root {
-	--ui5_list_footer_text_color: var(--sapTextColor);
+	--ui5_list_footer_text_color: var(--sapList_FooterTextColor);
 }
diff --git a/packages/main/src/themes/sap_horizon/ListItemBase-parameters.css b/packages/main/src/themes/sap_horizon/ListItemBase-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/ListItemBase-parameters.css";
 
 :root {
-	--ui5-listitem-focused-selected-border-bottom: 1px solid transparent;
 	--ui5-listitem-active-border-color: var(--sapContent_FocusColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/GrowingButton-parameters.css b/packages/main/src/themes/sap_horizon_dark/GrowingButton-parameters.css
@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_load_more_outline_width: var(--sapContent_FocusWidth);
+	--_ui5_load_more_border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/List-parameters.css b/packages/main/src/themes/sap_horizon_dark/List-parameters.css
@@ -1,5 +1,5 @@
 @import "../base/List-parameters.css";
 
 :root {
-	--ui5_list_footer_text_color: var(--sapTextColor);
+	--ui5_list_footer_text_color: var(--sapList_FooterTextColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/ListItemBase-parameters.css b/packages/main/src/themes/sap_horizon_dark/ListItemBase-parameters.css
@@ -3,5 +3,4 @@
 :root {
 	--ui5-listitem-active-border-color: var(--sapContent_FocusColor);
     --ui5-listitem-border-bottom: 1px solid transparent;
-	--ui5-listitem-selected-border-bottom: 1px solid transparent;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/ListItem-parameters.css b/packages/main/src/themes/sap_horizon_hcb/ListItem-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5_list_buttons_left_space: 0.25rem;
+}
diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -19,6 +19,7 @@
 @import "./InputIcon-parameters.css";
 @import "./Link-parameters.css";
 @import "../base/List-parameters.css";
+@import "./ListItem-parameters.css";
 @import "../base/ListItemBase-parameters.css";
 @import "./MonthPicker-parameters.css";
 @import "./MessageStrip-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcw/ListItem-parameters.css b/packages/main/src/themes/sap_horizon_hcw/ListItem-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5_list_buttons_left_space: 0.25rem;
+}
diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -19,6 +19,7 @@
 @import "./InputIcon-parameters.css";
 @import "./Link-parameters.css";
 @import "../base/List-parameters.css";
+@import "./ListItem-parameters.css";
 @import "../base/ListItemBase-parameters.css";
 @import "./MonthPicker-parameters.css";
 @import "./MessageStrip-parameters.css";

Original file line number	Diff line number	Diff line change
`@@ -106,7 +106,8 @@`
`106`	`106`	`border-bottom: 1px solid var(--sapList_BorderColor);`
`107`	`107`	`padding: 0 1rem !important;`
`108`	`108`	`height: var(--_ui5_list_no_data_height);`
`109`		`- font-size: var(--sapFontSize);`
	`109`	`+ font-size: var(--_ui5_list_no_data_font_size);`
	`110`	`+ font-family: "72override", var(--sapFontFamily);`
`110`	`111`	`}`
`111`	`112`
`112`	`113`	`.ui5-list-nodata-text {`
Original file line number	Diff line number	Diff line change
`@@ -167,6 +167,7 @@`
`167`	`167`	`.ui5-li-deletebtn {`
`168`	`168`	`display: flex;`
`169`	`169`	`align-items: center;`
	`170`	`+ margin-left: var(--_ui5_list_buttons_left_space);`
`170`	`171`	`}`
`171`	`172`
`172`	`173`	`.ui5-li-multisel-cb,`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+:root {`
	`2`	`+ --_ui5_list_buttons_left_space: 0.25rem;`
	`3`	`+}`