fix build

Author: fifoosid

packages/main/test/pages/AvatarGroup.html

@@ -294,15 +294,15 @@ <h3>AvatarGroup with user defined overflow button</h3>
 		hiddenItems.forEach(function (avatar, index) {
 			var color = avatarGroup.colorScheme[firstHiddenIndex + index]
 			html += '<div class="avatar-slot" style="padding: 5px">' +
-						'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-color="' + color + '"></ui5-avatar>' +
+						'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-design="' + color + '"></ui5-avatar>' +
 					'</div>';
 		});
 
 		for (var index = 0; index < hiddenItems; index++) {
 			var avatarRef = items[index];
 
 			html +=  '<div class="avatar-slot">' +
-						'<ui5-avatar interactive image="' + avatarRef.image + '" initials="' + avatarRef.initials + '" background-color="' + avatarRef._effectiveBackgroundColor + '"></ui5-avatar>' +
+						'<ui5-avatar interactive image="' + avatarRef.image + '" initials="' + avatarRef.initials + '" background-design="' + avatarRef._effectiveBackgroundColor + '"></ui5-avatar>' +
 					'</div>';
 		}
 		placeholder.innerHTML = html;

packages/main/test/samples/AvatarGroup.sample.html

@@ -62,7 +62,7 @@ <h4>Avatar Group - type "Individual"</h4>
 				function onAvatarClicked(avatarRef) {
 					const avatarIndex = avatarGroup.items.indexOf(avatarRef);
 
-					popAvatar.backgroundColor = avatarGroup.colorScheme[avatarIndex];
+					popAvatar.backgroundDesign = avatarGroup.colorScheme[avatarIndex];
 					popAvatar.initials = avatarRef.initials;
 					popAvatar.image = avatarRef.image;
 					popAvatar.icon = avatarRef.icon;
@@ -81,7 +81,7 @@ <h4>Avatar Group - type "Individual"</h4>
 						const color = avatarGroup.colorScheme[firstHiddenIndex + index];
 
 						html += '<div class="avatar-slot" style="padding: 5px">' +
-									'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-color="' + color + '"></ui5-avatar>' +
+									'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-design="' + color + '"></ui5-avatar>' +
 								'</div>';
 					});
 
@@ -143,7 +143,7 @@ <h4>Avatar Group - type "Individual"</h4>
 		avatarGroup.hiddenItems.forEach((avatar, index) => {
 			html += `<ui5-avatar 
 						...
-						background-color="${avatarGroup.colorScheme[firstHiddenIndex + index]}"
+						background-design="${avatarGroup.colorScheme[firstHiddenIndex + index]}"
 					</ui5-avatar>`;
 		});
 
@@ -206,7 +206,7 @@ <h4>Avatar Group - type "Group"</h4>
 						const avatarColor = avatarGroup.colorScheme[index];
 
 						html += '<div class="avatar-slot" style="padding: 3px">' +
-									'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-color="' + avatarColor + '"></ui5-avatar>' +
+									'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-design="' + avatarColor + '"></ui5-avatar>' +
 								'</div>';
 					});
 

packages/main/test/specs/AvatarGroup.spec.js

@@ -39,13 +39,13 @@ describe("avatar-group rendering", () => {
 		});
 	});
 
-	it("tests if _background-color attribute is automatically set to avatars", () => {
+	it("tests if _background-design attribute is automatically set to avatars", () => {
 		const avatars = browser.$$("#avatar-group-group ui5-avatar");
 
 		let index = 0;
 
 		avatars.forEach(avatar => {
-			const avatarBackgroundColor = avatar.getAttribute("_background-color");
+			const avatarBackgroundColor = avatar.getAttribute("_background-design");
 
 			if (++index > 10) {
 				index = 1;