fix(ui5-li): fix visual deviations from Fiori 3 (#2314)

Changes:
- info text is align centrally and it is align bottom if description attribute exists
- title text is align centrally and it is align top if description attribute exists
- item's height is changed to 5rem if description / image attribute exist
- checkbox / radio button is positioned correctly

Fixes #2297
Fixes #2218

Author: nnaydenow

packages/main/src/ListItem.js

@@ -73,7 +73,6 @@ const metadata = {
 		_mode: {
 			type: ListMode,
 			defaultValue: ListMode.None,
-			noAttribute: true,
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {

packages/main/src/themes/ListItem.css

@@ -61,6 +61,22 @@
 	height: 5rem;
 }
 
+:host([has-title][image]) {
+	height: 5rem;
+}
+
+:host([image]) .ui5-li-content {
+	height: 3rem;
+}
+
+:host([description]) .ui5-li-root {
+	padding: 1rem;
+}
+
+:host([description]) .ui5-li-content {
+	height: 3rem;
+}
+
 :host([has-title][description]) .ui5-li-title {
 	padding-bottom: 0.375rem;
 }
@@ -73,6 +89,12 @@
 	line-height: normal;
 }
 
+:host([description]) .ui5-li-title-wrapper {
+	height: 100%;
+	justify-content: space-between;
+	padding: 0.125rem 0;
+}
+
 .ui5-li-title {
 	color: var(--sapTextColor);
 	font-size: var(--_ui5_list_item_title_size);
@@ -100,13 +122,17 @@
 	white-space: nowrap;
 }
 
+:host([description]) .ui5-li-info {
+	align-self: flex-end;
+}
+
 .ui5-li-img {
 	width: var(--_ui5_list_item_img_size);
 	min-width: var(--_ui5_list_item_img_size);
 	height: var(--_ui5_list_item_img_size);
 	min-height: var(--_ui5_list_item_img_size);
 	margin: var(--_ui5_list_item_img_margin);
-	border-radius: 0;
+	border-radius: 0.25rem;
 }
 
 .ui5-li-icon {
@@ -116,12 +142,6 @@
 	padding-right: 0.5rem;
 }
 
-:host([description]) .ui5-li-img {
-	width: 3rem;
-	height: 3rem;
-	border-radius: 0.25rem;
-}
-
 .ui5-li-content {
 	display: flex;
 	align-items: center;
@@ -142,6 +162,31 @@
 	flex-shrink: 0;
 }
 
+:host([description]) .ui5-li-singlesel-radiobtn {
+	align-self: flex-start;
+	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
+}
+
+:host([description]) .ui5-li-multisel-cb {
+	align-self: flex-start;
+	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
+}
+
+:host([_mode="SingleSelectBegin"]) .ui5-li-root {
+	padding-right: 1rem;
+	padding-left: 0;
+}
+
+:host([_mode="MultiSelect"]) .ui5-li-root {
+	padding-right: 1rem;
+	padding-left: 0;
+}
+
+:host([_mode="SingleSelectEnd"]) .ui5-li-root {
+	padding-right: 0;
+	padding-left: 1rem;
+}
+
 :host [ui5-checkbox].ui5-li-singlesel-radiobtn {
 	margin-right: var(--_ui5_list_item_cb_margin_right);
 }
@@ -155,3 +200,18 @@
 :host [dir="rtl"] .ui5-li-img {
 	margin: .5rem 0 .5rem 0.75rem;
 }
+
+:host([_mode="SingleSelectBegin"]) [dir="rtl"].ui5-li-root {
+	padding-right: 0;
+	padding-left: 1rem;
+}
+
+:host([_mode="MultiSelect"]) [dir="rtl"].ui5-li-root {
+	padding-right: 0;
+	padding-left: 1rem;
+}
+
+:host([_mode="SingleSelectEnd"]) [dir="rtl"].ui5-li-root {
+	padding-right: 1rem;
+	padding-left: 0;
+}

packages/main/src/themes/base/sizes-parameters.css

@@ -5,7 +5,7 @@
 	--_ui5_checkbox_root_side_padding: .6875rem;
 	--_ui5_checkbox_icon_size: 1rem;
 	--_ui5_custom_list_item_height: 3rem;
-	--_ui5_custom_list_item_rb_min_width: 3rem;
+	--_ui5_custom_list_item_rb_min_width: 2.75rem;
 	--_ui5_day_picker_item_width: 2.25rem;
 	--_ui5_day_picker_item_height: 2.875rem;
 	--_ui5_day_picker_empty_height: 3rem;
@@ -23,10 +23,11 @@
 	--_ui5_list_no_data_height: 3rem;
 	--_ui5_list_item_cb_margin_right: 0;
 	--_ui5_list_item_title_size: var(--sapMFontLargeSize);
-	--_ui5_list_item_img_size: 2rem;
+	--_ui5_list_item_img_size: 3rem;
 	--_ui5_list_item_img_margin: 0.5rem 0.75rem 0.5rem 0rem;
 	--_ui5_list_item_base_height: 2.75rem;
 	--_ui5_list_item_icon_size: 1.125rem;
+	--_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding));
 	--_ui5_list_busy_row_height: 3rem;
 	--_ui5_month_picker_item_height: 3rem;
 	--_ui5_year_picker_item_height: 3rem;
@@ -129,10 +130,10 @@
 	--_ui5_list_no_data_height: 2rem;
 	--_ui5_list_item_cb_margin_right: .5rem;
 	--_ui5_list_item_title_size: var(--sapFontSize);
-	--_ui5_list_item_img_size: 1.75rem;
 	--_ui5_list_item_img_margin: 0.55rem 0.75rem 0.5rem 0rem;
 	--_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_month_picker_item_height: 2rem;

packages/main/test/pages/List.html

@@ -14,7 +14,6 @@
 </head>
 
 <body style="background-color: var(--sapBackgroundColor);">
-
 	<ui5-title>List "infinite-scroll"</ui5-title>
 	<label style="font-size:2rem;">new items loaded:</label><label id="result" style="font-size:2rem;"> 0 times: 0</label>
 	<ui5-list id="infiniteScrollEx" style="height: 300px" infinite-scroll>
@@ -222,6 +221,37 @@ <h3 id="infoLbl">Items 3/3</h3>
 		</ui5-li-custom>
 	</ui5-list>
 
+	<br />
+	Change mode:
+	<ui5-select id="select">
+		<ui5-option selected>None</ui5-option>
+		<ui5-option>SingleSelect</ui5-option>
+		<ui5-option>SingleSelectBegin</ui5-option>
+		<ui5-option>SingleSelectEnd</ui5-option>
+		<ui5-option>MultiSelect</ui5-option>
+		<ui5-option>Delete</ui5-option>
+	</ui5-select>
+	<ui5-list id="myList6" header-text="visualization of different combinations of icon / title / description / info / image - (Current mode: None)">
+		<ui5-li-custom>
+			<div style="width: 100%; height: 3rem; display: flex; align-items: center; justify-content: space-between">
+				<ui5-button>Press me</ui5-button>
+				<ui5-link>Go to SAP</ui5-link>
+			</div>
+		</ui5-li-custom>
+		<ui5-li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+		<ui5-li description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+		<ui5-li info-state="Error" info="Lorem ipsum">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+		<ui5-li info-state="Error" info="Lorem ipsum" description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+		<ui5-li icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+		<ui5-li icon="home" description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+		<ui5-li icon="home" info-state="Error" info="Lorem ipsum">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+		<ui5-li icon="home" info-state="Error" info="Lorem ipsum" description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+		<ui5-li image="./img/woman_avatar_5.png">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+		<ui5-li image="./img/woman_avatar_5.png" description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+		<ui5-li image="./img/woman_avatar_5.png" info-state="Error" info="Lorem ipsum">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+		<ui5-li image="./img/woman_avatar_5.png" info-state="Error" info="Lorem ipsum" description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</ui5-li>
+	</ui5-list>
+
 	<script>
 		'use strict';
 
@@ -238,11 +268,28 @@ <h3 id="infoLbl">Items 3/3</h3>
 		var lblSelectionChange = document.getElementById('selectionChange');
 		var lblItemPress2 = document.getElementById('itemPress2');
 		var lblSelectionChange2 = document.getElementById('selectionChange2');
+		var visualizationList = document.getElementById('myList6');
+		var select = document.getElementById('select');
+		var modes = {
+			"None": undefined,
+			"SingleSelect": "SingleSelect",
+			"SingleSelectBegin": "SingleSelectBegin",
+			"SingleSelectEnd": "SingleSelectEnd",
+			"MultiSelect": "MultiSelect",
+			"Delete": "Delete"
+		}
 		var items = ["<ui5-li id='arg'>Argentina</ui5-li>", "<ui5-li id='bg'>Bulgaria</ui5-li>", "<ui5-li id='ch'>China</ui5-li>"];
 		var info = {
 			0: "0/3", 1: "1/3", 2: "2/3", 3: "3/3"
 		};
 
+		select.addEventListener("ui5-change", function (event) {
+			var value = event.detail.selectedOption.textContent;
+
+			visualizationList.mode = modes[value];
+			visualizationList.headerText = visualizationList.headerText.replace(/\(.+\)/, `(Current mode: ${value})`);
+		});
+
 		var getItems = function getItems(items) {
 			return items.map(function (item) {
 				return '<ui5-li  id="' + item.id + '">' + item.textContent + '</ui5-li>';