chore: correct usage of IAvatar (#8196)

Co-authored-by: Nayden Naydenov <[email protected]>

Author: 2 people

packages/main/src/AvatarGroup.ts

@@ -14,7 +14,7 @@ import {
 	isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Button from "./Button.js";
-import type IAvatar from "./Avatar.js";
+import type { IAvatar } from "./Interfaces.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarGroupType from "./types/AvatarGroupType.js";
 import AvatarColorScheme from "./types/AvatarColorScheme.js";
@@ -373,11 +373,11 @@ class AvatarGroup extends UI5Element {
 		return {
 			overflowButton: {
 				"ui5-avatar-group-overflow-btn": true,
-				"ui5-avatar-group-overflow-btn-xs": this.firstAvatarSize === "XS",
-				"ui5-avatar-group-overflow-btn-s": this.firstAvatarSize === "S",
-				"ui5-avatar-group-overflow-btn-m": this.firstAvatarSize === "M",
-				"ui5-avatar-group-overflow-btn-l": this.firstAvatarSize === "L",
-				"ui5-avatar-group-overflow-btn-xl": this.firstAvatarSize === "XL",
+				"ui5-avatar-group-overflow-btn-xs": this.firstAvatarSize === AvatarSize.XS,
+				"ui5-avatar-group-overflow-btn-s": this.firstAvatarSize === AvatarSize.S,
+				"ui5-avatar-group-overflow-btn-m": this.firstAvatarSize === AvatarSize.M,
+				"ui5-avatar-group-overflow-btn-l": this.firstAvatarSize === AvatarSize.L,
+				"ui5-avatar-group-overflow-btn-xl": this.firstAvatarSize === AvatarSize.XL,
 			},
 		};
 	}

packages/main/src/Interfaces.ts

@@ -6,13 +6,20 @@ import type TableMode from "./types/TableMode.js";
 import type SemanticColor from "./types/SemanticColor.js";
 import type Tab from "./Tab.js";
 import type ListItemType from "./types/ListItemType.js";
+import type AvatarColorScheme from "./types/AvatarColorScheme.js";
+import AvatarSize from "./types/AvatarSize.js";
 
 /**
  * Interface for components that represent an avatar and may be slotted in numerous higher-order components such as <code>ui5-avatar-group</code>
  *
  * @public
  */
-interface IAvatar extends HTMLElement {}
+interface IAvatar extends HTMLElement, ITabbable {
+	_effectiveBackgroundColor: AvatarColorScheme;
+	size: `${AvatarSize}`;
+	_effectiveSize: AvatarSize;
+	interactive: boolean;
+}
 
 /**
  * Interface for components that may be used as a button inside numerous higher-order components