fix(ui5-li): Scale image properly (#2059)

Use ui5-avatar internally to scale the user image within the list item properly

FIXES #2045

Author: ilhan007

packages/main/src/StandardListItem.hbs

@@ -19,7 +19,7 @@
 
 {{#*inline "imageBegin"}}
 	{{#if displayImage}}
-		<img part="img" src="{{image}}" class="ui5-li-img">
+		<ui5-avatar image="{{image}}" image-fit-type="Contain" shape="Square" class="ui5-li-img"></ui5-avatar>
 	{{/if}}
 {{/inline}}
 

packages/main/src/StandardListItem.js

@@ -1,6 +1,7 @@
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
+import Avatar from "./Avatar.js";
 import StandardListItemTemplate from "./generated/templates/StandardListItemTemplate.lit.js";
 
 /**
@@ -151,7 +152,10 @@ class StandardListItem extends ListItem {
 	}
 
 	static async onDefine() {
-		await Icon.define();
+		await Promise.all([
+			Icon.define(),
+			Avatar.define(),
+		]);
 	}
 }
 

packages/main/src/themes/Avatar.css

@@ -11,7 +11,7 @@
 	height: 3rem;
 	width: 3rem;
 	border-radius: 50%;
-    border: var(--ui5-avatar-initials-border);
+	border: var(--ui5-avatar-initials-border);
 	outline: none;
 	color: var(--ui5-avatar-initials-color);
 }
@@ -22,11 +22,11 @@
 }
 
 :host([shape="Square"]) .ui5-avatar-root {
-	border-radius: .25rem;
+	border-radius: inherit;
 }
 
 :host([shape="Square"]) .ui5-avatar-img {
-	border-radius: .25rem;
+	border-radius: inherit;
 }
 
 /* Sizes */

packages/main/src/themes/ListItem.css

@@ -106,6 +106,7 @@
 	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;
 }
 
 .ui5-li-icon {

packages/main/test/pages/List.html

@@ -20,7 +20,7 @@
 	<ui5-list id="infiniteScrollEx" style="height: 300px" infinite-scroll>
 		<ui5-li-groupheader>New Items</ui5-li-groupheader>
 		<ui5-li image="./img/HT-1000.jpg" icon="navigation-right-arrow" info="Available">Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.</ui5-li>
-		<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">Laptop Lenovo</ui5-li>
+		<ui5-li image="./img/portrait.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">Laptop Lenovo</ui5-li>
 		<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131"  info-state="Information">IPhone 3</ui5-li>
 
 		<ui5-li-groupheader>Discounted Items</ui5-li-groupheader>