docs(ui5-avatar-group): comment on the avatars' shape (#2798)

Make clear that the avatars with "Circle" shape is the one Fiori 3 suggests and meant to be used.

FIXES: #2612

Author: ilhan007

packages/main/src/AvatarGroup.js

@@ -100,7 +100,11 @@ const metadata = {
 	},
 	slots: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */ {
 		/**
-		 * Defines the items of the <code>ui5-avatar-group</code>.
+		 * Defines the items of the <code>ui5-avatar-group</code>. Use the <code>ui5-avatar</code> component as an item.
+		 * <br><br>
+		 * <b>Note:</b> The UX guidelines recommends using avatars with "Circle" shape.
+		 * Moreover, if you use avatars with "Square" shape, there will be visual inconsistency
+		 * as the built-in overflow action has "Circle" shape.
 		 * @type {HTMLElement[]}
 		 * @slot
 		 * @public
@@ -120,7 +124,7 @@ const metadata = {
 		* @public
 		* @since 1.0.0-rc.11
 		*/
-	   click: {
+		click: {
 			detail: {
 				targetRef: { type: HTMLElement },
 				overflowButtonClicked: { type: Boolean },

packages/main/test/pages/Avatar.html

@@ -23,13 +23,13 @@ <h3>Avatar - Basic sample</h3>
 		<ui5-avatar image="./img/John_Miller.png"></ui5-avatar>
 	</section>
 
-    <section>
-        <h3>Avatar - special characters in image path</h3>
-	    <ui5-avatar image="./img/John$$$ ' (_)Miller 100%25 &=.png" style="border: 1px dashed red;"></ui5-avatar>
-	    <ui5-avatar image="./img/John Miller.png" style="border: 1px dashed red;"></ui5-avatar>
-	    <ui5-avatar image="./img/John%20Miller.png" style="border: 1px dashed red;"></ui5-avatar>
-	    <ui5-avatar image="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" style="border: 1px dashed red;"></ui5-avatar>
-    </section>
+	<section>
+		<h3>Avatar - special characters in image path</h3>
+		<ui5-avatar image="./img/John$$$ ' (_)Miller 100%25 &=.png" style="border: 1px dashed red;"></ui5-avatar>
+		<ui5-avatar image="./img/John Miller.png" style="border: 1px dashed red;"></ui5-avatar>
+		<ui5-avatar image="./img/John%20Miller.png" style="border: 1px dashed red;"></ui5-avatar>
+		<ui5-avatar image="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" style="border: 1px dashed red;"></ui5-avatar>
+	</section>
 
 	<section>
 		<h3>Avatar - Square [ XS, S, M, L, XL ]</h3>