fix(ui5-avatar): make styles attribute dependant (#1360)

ilhan007 · web-flow · commit e2791b0775a4 · 2020-03-26T08:45:24.000+02:00
diff --git a/packages/main/src/themes/Avatar.css b/packages/main/src/themes/Avatar.css
@@ -95,47 +95,47 @@
 	background-color: var(--sapAccentColor6);
 }
 
-:host([backgroundColor="Accent1"]) {
+:host([background-color="Accent1"]) {
 	background-color: var(--sapAccentColor1);
 }
 
-:host([backgroundColor="Accent2"]) {
+:host([background-color="Accent2"]) {
 	background-color: var(--sapAccentColor2);
 }
 
-:host([backgroundColor="Accent3"]) {
+:host([background-color="Accent3"]) {
 	background-color: var(--sapAccentColor3);
 }
 
-:host([backgroundColor="Accent4"]) {
+:host([background-color="Accent4"]) {
 	background-color: var(--sapAccentColor4);
 }
 
-:host([backgroundColor="Accent5"]) {
+:host([background-color="Accent5"]) {
 	background-color: var(--sapAccentColor5);
 }
 
-:host([backgroundColor="Accent6"]) {
+:host([background-color="Accent6"]) {
 	background-color: var(--sapAccentColor6);
 }
 
-:host([backgroundColor="Accent7"]) {
+:host([background-color="Accent7"]) {
 	background-color: var(--sapAccentColor7);
 }
 
-:host([backgroundColor="Accent8"]) {
+:host([background-color="Accent8"]) {
 	background-color: var(--sapAccentColor8);
 }
 
-:host([backgroundColor="Accent9"]) {
+:host([background-color="Accent9"]) {
 	background-color: var(--sapAccentColor9);
 }
 
-:host([backgroundColor="Accent10"]) {
+:host([background-color="Accent10"]) {
 	background-color: var(--sapAccentColor10);
 }
 
-:host([backgroundColor="Placeholder"]) {
+:host([background-color="Placeholder"]) {
 	background-color: var(--sapContent_ImagePlaceholderBackground);
 }
 
diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html
@@ -61,31 +61,31 @@ <h3>Avatar - UI5 Icons</h3>
 
 	<section>
 		<h3>Avatar - Background colors [ Accent1, Accent2, Accent3, Accent4, Accent5, Accent6, Accent7, Accent8, Accent9, Accent10, Placeholder ]</h3>
-		<ui5-avatar backgroundColor="Accent1" size="L"></ui5-avatar>
-		<ui5-avatar backgroundColor="Accent2" size="L"></ui5-avatar>
-		<ui5-avatar backgroundColor="Accent3" size="L"></ui5-avatar>
-		<ui5-avatar backgroundColor="Accent4" size="L"></ui5-avatar>
-		<ui5-avatar backgroundColor="Accent5" size="L"></ui5-avatar>
+		<ui5-avatar background-color="Accent1" size="L"></ui5-avatar>
+		<ui5-avatar background-color="Accent2" size="L"></ui5-avatar>
+		<ui5-avatar background-color="Accent3" size="L"></ui5-avatar>
+		<ui5-avatar background-color="Accent4" size="L"></ui5-avatar>
+		<ui5-avatar background-color="Accent5" size="L"></ui5-avatar>
 		<ui5-avatar size="L"></ui5-avatar>
-		<ui5-avatar backgroundColor="Accent7" size="L"></ui5-avatar>
-		<ui5-avatar backgroundColor="Accent8" size="L"></ui5-avatar>
-		<ui5-avatar backgroundColor="Accent9" size="L"></ui5-avatar>
-		<ui5-avatar backgroundColor="Accent10" size="L"></ui5-avatar>
-		<ui5-avatar backgroundColor="Placeholder" size="L"></ui5-avatar>
+		<ui5-avatar background-color="Accent7" size="L"></ui5-avatar>
+		<ui5-avatar background-color="Accent8" size="L"></ui5-avatar>
+		<ui5-avatar background-color="Accent9" size="L"></ui5-avatar>
+		<ui5-avatar background-color="Accent10" size="L"></ui5-avatar>
+		<ui5-avatar background-color="Placeholder" size="L"></ui5-avatar>
 	</section>
 
 	<section>
 		<h3>Avatar - Initials</h3>
-		<ui5-avatar initials="XS" backgroundColor="Accent1" size="XS"></ui5-avatar>
-		<ui5-avatar initials="S" backgroundColor="Accent2" size="S"></ui5-avatar>
-		<ui5-avatar initials="M" backgroundColor="Accent3" size="M"></ui5-avatar>
-		<ui5-avatar initials="L" backgroundColor="Accent4" size="L"></ui5-avatar>
-		<ui5-avatar initials="XL" backgroundColor="Accent5" size="XL"></ui5-avatar>
+		<ui5-avatar initials="XS" background-color="Accent1" size="XS"></ui5-avatar>
+		<ui5-avatar initials="S" background-color="Accent2" size="S"></ui5-avatar>
+		<ui5-avatar initials="M" background-color="Accent3" size="M"></ui5-avatar>
+		<ui5-avatar initials="L" background-color="Accent4" size="L"></ui5-avatar>
+		<ui5-avatar initials="XL" background-color="Accent5" size="XL"></ui5-avatar>
 		<ui5-avatar initials="XS" shape="Square" size="XS"></ui5-avatar>
-		<ui5-avatar initials="S" backgroundColor="Accent7" shape="Square" size="S"></ui5-avatar>
-		<ui5-avatar initials="M" backgroundColor="Accent8" shape="Square" size="M"></ui5-avatar>
-		<ui5-avatar initials="L" backgroundColor="Accent9" shape="Square" size="L"></ui5-avatar>
-		<ui5-avatar initials="XL" backgroundColor="Accent10" shape="Square" size="XL"></ui5-avatar>
+		<ui5-avatar initials="S" background-color="Accent7" shape="Square" size="S"></ui5-avatar>
+		<ui5-avatar initials="M" background-color="Accent8" shape="Square" size="M"></ui5-avatar>
+		<ui5-avatar initials="L" background-color="Accent9" shape="Square" size="L"></ui5-avatar>
+		<ui5-avatar initials="XL" background-color="Accent10" shape="Square" size="XL"></ui5-avatar>
 	</section>
 
 	<section>
diff --git a/packages/main/test/samples/Avatar.sample.html b/packages/main/test/samples/Avatar.sample.html
@@ -76,18 +76,18 @@ <h4>Avatar with UI5 Icons</h4>
 <section>
 	<h4>Avatar with Initials</h4>
 	<div class="snippet">
-		<ui5-avatar initials="XS" backgroundColor="Accent1" size="XS"></ui5-avatar>
-		<ui5-avatar initials="S" backgroundColor="Accent2" size="S"></ui5-avatar>
-		<ui5-avatar initials="M" backgroundColor="Accent3" size="M"></ui5-avatar>
-		<ui5-avatar initials="L" backgroundColor="Accent4" size="L"></ui5-avatar>
-		<ui5-avatar initials="XL" backgroundColor="Accent5" size="XL"></ui5-avatar>
+		<ui5-avatar initials="XS" background-color="Accent1" size="XS"></ui5-avatar>
+		<ui5-avatar initials="S" background-color="Accent2" size="S"></ui5-avatar>
+		<ui5-avatar initials="M" background-color="Accent3" size="M"></ui5-avatar>
+		<ui5-avatar initials="L" background-color="Accent4" size="L"></ui5-avatar>
+		<ui5-avatar initials="XL" background-color="Accent5" size="XL"></ui5-avatar>
 	</div>
 <pre class="prettyprint lang-html"><xmp>
-	<ui5-avatar initials="XS" backgroundColor="Accent1" size="XS"></ui5-avatar>
-	<ui5-avatar initials="S" backgroundColor="Accent2" size="S"></ui5-avatar>
-	<ui5-avatar initials="M" backgroundColor="Accent3" size="M"></ui5-avatar>
-	<ui5-avatar initials="L" backgroundColor="Accent4" size="L"></ui5-avatar>
-	<ui5-avatar initials="XL" backgroundColor="Accent5" size="XL"></ui5-avatar>
+	<ui5-avatar initials="XS" background-color="Accent1" size="XS"></ui5-avatar>
+	<ui5-avatar initials="S" background-color="Accent2" size="S"></ui5-avatar>
+	<ui5-avatar initials="M" background-color="Accent3" size="M"></ui5-avatar>
+	<ui5-avatar initials="L" background-color="Accent4" size="L"></ui5-avatar>
+	<ui5-avatar initials="XL" background-color="Accent5" size="XL"></ui5-avatar>
 </xmp></pre>
 </section>
 

Original file line number	Diff line number	Diff line change
`@@ -95,47 +95,47 @@`
`95`	`95`	`background-color: var(--sapAccentColor6);`
`96`	`96`	`}`
`97`	`97`
`98`		`-:host([backgroundColor="Accent1"]) {`
	`98`	`+:host([background-color="Accent1"]) {`
`99`	`99`	`background-color: var(--sapAccentColor1);`
`100`	`100`	`}`
`101`	`101`
`102`		`-:host([backgroundColor="Accent2"]) {`
	`102`	`+:host([background-color="Accent2"]) {`
`103`	`103`	`background-color: var(--sapAccentColor2);`
`104`	`104`	`}`
`105`	`105`
`106`		`-:host([backgroundColor="Accent3"]) {`
	`106`	`+:host([background-color="Accent3"]) {`
`107`	`107`	`background-color: var(--sapAccentColor3);`
`108`	`108`	`}`
`109`	`109`
`110`		`-:host([backgroundColor="Accent4"]) {`
	`110`	`+:host([background-color="Accent4"]) {`
`111`	`111`	`background-color: var(--sapAccentColor4);`
`112`	`112`	`}`
`113`	`113`
`114`		`-:host([backgroundColor="Accent5"]) {`
	`114`	`+:host([background-color="Accent5"]) {`
`115`	`115`	`background-color: var(--sapAccentColor5);`
`116`	`116`	`}`
`117`	`117`
`118`		`-:host([backgroundColor="Accent6"]) {`
	`118`	`+:host([background-color="Accent6"]) {`
`119`	`119`	`background-color: var(--sapAccentColor6);`
`120`	`120`	`}`
`121`	`121`
`122`		`-:host([backgroundColor="Accent7"]) {`
	`122`	`+:host([background-color="Accent7"]) {`
`123`	`123`	`background-color: var(--sapAccentColor7);`
`124`	`124`	`}`
`125`	`125`
`126`		`-:host([backgroundColor="Accent8"]) {`
	`126`	`+:host([background-color="Accent8"]) {`
`127`	`127`	`background-color: var(--sapAccentColor8);`
`128`	`128`	`}`
`129`	`129`
`130`		`-:host([backgroundColor="Accent9"]) {`
	`130`	`+:host([background-color="Accent9"]) {`
`131`	`131`	`background-color: var(--sapAccentColor9);`
`132`	`132`	`}`
`133`	`133`
`134`		`-:host([backgroundColor="Accent10"]) {`
	`134`	`+:host([background-color="Accent10"]) {`
`135`	`135`	`background-color: var(--sapAccentColor10);`
`136`	`136`	`}`
`137`	`137`
`138`		`-:host([backgroundColor="Placeholder"]) {`
	`138`	`+:host([background-color="Placeholder"]) {`
`139`	`139`	`background-color: var(--sapContent_ImagePlaceholderBackground);`
`140`	`140`	`}`
`141`	`141`