Skip to content

Commit a3a3a11

Browse files
fifoosidfifoosid
authored
refactor(ui5-avatar): rename backgroundColor property to colorScheme (#3222)
Part of #3107 BREAKING_CHANGE: The "backgroundColor" property of ui5-avatar is changed to "colorScheme"
1 parent ef2d332 commit a3a3a11

File tree

9 files changed

+83
-83
lines changed

9 files changed

+83
-83
lines changed

‎packages/main/src/Avatar.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import Icon from "./Icon.js";
1616
import AvatarSize from "./types/AvatarSize.js";
1717
import AvatarShape from "./types/AvatarShape.js";
1818
import AvatarFitType from "./types/AvatarFitType.js";
19-
import AvatarBackgroundColor from "./types/AvatarBackgroundColor.js";
19+
import AvatarColorScheme from "./types/AvatarColorScheme.js";
2020

2121
/**
2222
* @public
@@ -150,7 +150,7 @@ const metadata = {
150150
},
151151

152152
/**
153-
* Defines the background color of the desired image.
153+
* Defines the background color of the content.
154154
* <br><br>
155155
* Available options are:
156156
* <ul>
@@ -166,21 +166,21 @@ const metadata = {
166166
* <li><code>Accent10</code></li>
167167
* <li><code>Placeholder</code></li>
168168
* </ul>
169-
* @type {AvatarBackgroundColor}
169+
* @type {AvatarColorScheme}
170170
* @defaultvalue "Accent6"
171171
* @public
172172
*/
173-
backgroundColor: {
174-
type: AvatarBackgroundColor,
175-
defaultValue: AvatarBackgroundColor.Accent6,
173+
colorScheme: {
174+
type: AvatarColorScheme,
175+
defaultValue: AvatarColorScheme.Accent6,
176176
},
177177

178178
/**
179179
* @private
180180
*/
181-
_backgroundColor: {
181+
_colorScheme: {
182182
type: String,
183-
defaultValue: AvatarBackgroundColor.Accent6,
183+
defaultValue: AvatarColorScheme.Accent6,
184184
},
185185

186186
/**
@@ -314,7 +314,7 @@ class Avatar extends UI5Element {
314314
*/
315315
get _effectiveBackgroundColor() {
316316
// we read the attribute, because the "background-color" property will always have a default value
317-
return this.getAttribute("background-color") || this._backgroundColor;
317+
return this.getAttribute("_color-scheme") || this._colorScheme;
318318
}
319319

320320
get _role() {

‎packages/main/src/AvatarGroup.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import AvatarGroupCss from "./generated/themes/AvatarGroup.css.js";
2525
import Button from "./Button.js";
2626
import AvatarSize from "./types/AvatarSize.js";
2727
import AvatarGroupType from "./types/AvatarGroupType.js";
28-
import AvatarBackgroundColor from "./types/AvatarBackgroundColor.js";
28+
import AvatarColorScheme from "./types/AvatarColorScheme.js";
2929

3030
const OVERFLOW_BTN_CLASS = "ui5-avatar-group-overflow-btn";
3131
const AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;
@@ -309,7 +309,7 @@ class AvatarGroup extends UI5Element {
309309
}
310310

311311
/**
312-
* Returns an array containing the <code>AvatarBackgroundColor</code> values that correspond to the avatars in the <code>ui5-avatar-group</code>.
312+
* Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the <code>ui5-avatar-group</code>.
313313
* @readonly
314314
* @type { Array }
315315
* @defaultValue []
@@ -498,9 +498,9 @@ class AvatarGroup extends UI5Element {
498498
const colorIndex = this._getNextBackgroundColor();
499499
avatar.interactive = !this._isGroup;
500500

501-
if (!avatar.getAttribute("background-color")) {
501+
if (!avatar.getAttribute("_color-scheme")) {
502502
// AvatarGroup respects colors set to ui5-avatar
503-
avatar.setAttribute("_background-color", AvatarBackgroundColor[`Accent${colorIndex}`]);
503+
avatar.setAttribute("_color-scheme", AvatarColorScheme[`Accent${colorIndex}`]);
504504
}
505505

506506
if (!avatar.getAttribute("size")) {

‎packages/main/src/themes/Avatar.css

+22-22
Original file line numberDiff line numberDiff line change
@@ -119,58 +119,58 @@
119119
background-color: var(--ui5-avatar-accent6);
120120
}
121121

122-
:host([_background-color="Accent1"]),
123-
:host([background-color="Accent1"]) {
122+
:host([_color-scheme="Accent1"]),
123+
:host([color-scheme="Accent1"]) {
124124
background-color: var(--ui5-avatar-accent1);
125125
}
126126

127-
:host([_background-color="Accent2"]),
128-
:host([background-color="Accent2"]) {
127+
:host([_color-scheme="Accent2"]),
128+
:host([color-scheme="Accent2"]) {
129129
background-color: var(--ui5-avatar-accent2);
130130
}
131131

132-
:host([_background-color="Accent3"]),
133-
:host([background-color="Accent3"]) {
132+
:host([_color-scheme="Accent3"]),
133+
:host([color-scheme="Accent3"]) {
134134
background-color: var(--ui5-avatar-accent3);
135135
}
136136

137-
:host([_background-color="Accent4"]),
138-
:host([background-color="Accent4"]) {
137+
:host([_color-scheme="Accent4"]),
138+
:host([color-scheme="Accent4"]) {
139139
background-color: var(--ui5-avatar-accent4);
140140
}
141141

142-
:host([_background-color="Accent5"]),
143-
:host([background-color="Accent5"]) {
142+
:host([_color-scheme="Accent5"]),
143+
:host([color-scheme="Accent5"]) {
144144
background-color: var(--ui5-avatar-accent5);
145145
}
146146

147-
:host([_background-color="Accent6"]),
148-
:host([background-color="Accent6"]) {
147+
:host([_color-scheme="Accent6"]),
148+
:host([color-scheme="Accent6"]) {
149149
background-color: var(--ui5-avatar-accent6);
150150
}
151151

152-
:host([_background-color="Accent7"]),
153-
:host([background-color="Accent7"]) {
152+
:host([_color-scheme="Accent7"]),
153+
:host([color-scheme="Accent7"]) {
154154
background-color: var(--ui5-avatar-accent7);
155155
}
156156

157-
:host([_background-color="Accent8"]),
158-
:host([background-color="Accent8"]) {
157+
:host([_color-scheme="Accent8"]),
158+
:host([color-scheme="Accent8"]) {
159159
background-color: var(--ui5-avatar-accent8);
160160
}
161161

162-
:host([_background-color="Accent9"]),
163-
:host([background-color="Accent9"]) {
162+
:host([_color-scheme="Accent9"]),
163+
:host([color-scheme="Accent9"]) {
164164
background-color: var(--ui5-avatar-accent9);
165165
}
166166

167-
:host([_background-color="Accent10"]),
168-
:host([background-color="Accent10"]) {
167+
:host([_color-scheme="Accent10"]),
168+
:host([color-scheme="Accent10"]) {
169169
background-color: var(--ui5-avatar-accent10);
170170
}
171171

172-
:host([_background-color="Placeholder"]),
173-
:host([background-color="Placeholder"]) {
172+
:host([_color-scheme="Placeholder"]),
173+
:host([color-scheme="Placeholder"]) {
174174
background-color: var(--ui5-avatar-placeholder);
175175
}
176176

‎packages/main/src/types/AvatarBackgroundColor.js renamed to ‎packages/main/src/types/AvatarColorScheme.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
22

33
/**
4-
* Different types of AvatarBackgroundColor.
5-
* @lends sap.ui.webcomponents.main.types.AvatarBackgroundColor.prototype
4+
* Different types of AvatarColorSchemes.
5+
* @lends sap.ui.webcomponents.main.types.AvatarColorScheme.prototype
66
* @public
77
*/
8-
const AvatarBackGroundColors = {
8+
const AvatarColorSchemes = {
99
/**
1010
*
1111
* @public
@@ -86,19 +86,19 @@ const AvatarBackGroundColors = {
8686

8787
/**
8888
* @class
89-
* Different types of AvatarBackgroundColor.
89+
* Different types of AvatarColorScheme.
9090
* @constructor
9191
* @author SAP SE
92-
* @alias sap.ui.webcomponents.main.types.AvatarBackgroundColor
92+
* @alias sap.ui.webcomponents.main.types.AvatarColorScheme
9393
* @public
9494
* @enum {string}
9595
*/
96-
class AvatarBackgroundColor extends DataType {
96+
class AvatarColorScheme extends DataType {
9797
static isValid(value) {
98-
return !!AvatarBackGroundColors[value];
98+
return !!AvatarColorSchemes[value];
9999
}
100100
}
101101

102-
AvatarBackgroundColor.generateTypeAccessors(AvatarBackGroundColors);
102+
AvatarColorScheme.generateTypeAccessors(AvatarColorSchemes);
103103

104-
export default AvatarBackgroundColor;
104+
export default AvatarColorScheme;

‎packages/main/test/pages/Avatar.html

+19-19
Original file line numberDiff line numberDiff line change
@@ -69,31 +69,31 @@ <h3>Avatar - UI5 Icons</h3>
6969

7070
<section>
7171
<h3>Avatar - Background colors [ Accent1, Accent2, Accent3, Accent4, Accent5, Accent6, Accent7, Accent8, Accent9, Accent10, Placeholder ]</h3>
72-
<ui5-avatar background-color="Accent1" size="L"></ui5-avatar>
73-
<ui5-avatar background-color="Accent2" size="L"></ui5-avatar>
74-
<ui5-avatar background-color="Accent3" size="L"></ui5-avatar>
75-
<ui5-avatar background-color="Accent4" size="L"></ui5-avatar>
76-
<ui5-avatar background-color="Accent5" size="L"></ui5-avatar>
72+
<ui5-avatar color-scheme="Accent1" size="L"></ui5-avatar>
73+
<ui5-avatar color-scheme="Accent2" size="L"></ui5-avatar>
74+
<ui5-avatar color-scheme="Accent3" size="L"></ui5-avatar>
75+
<ui5-avatar color-scheme="Accent4" size="L"></ui5-avatar>
76+
<ui5-avatar color-scheme="Accent5" size="L"></ui5-avatar>
7777
<ui5-avatar size="L"></ui5-avatar>
78-
<ui5-avatar background-color="Accent7" size="L"></ui5-avatar>
79-
<ui5-avatar background-color="Accent8" size="L"></ui5-avatar>
80-
<ui5-avatar background-color="Accent9" size="L"></ui5-avatar>
81-
<ui5-avatar background-color="Accent10" size="L"></ui5-avatar>
82-
<ui5-avatar background-color="Placeholder" size="L"></ui5-avatar>
78+
<ui5-avatar color-scheme="Accent7" size="L"></ui5-avatar>
79+
<ui5-avatar color-scheme="Accent8" size="L"></ui5-avatar>
80+
<ui5-avatar color-scheme="Accent9" size="L"></ui5-avatar>
81+
<ui5-avatar color-scheme="Accent10" size="L"></ui5-avatar>
82+
<ui5-avatar color-scheme="Placeholder" size="L"></ui5-avatar>
8383
</section>
8484

8585
<section>
8686
<h3>Avatar - Initials</h3>
87-
<ui5-avatar initials="XS" background-color="Accent1" size="XS"></ui5-avatar>
88-
<ui5-avatar initials="S" background-color="Accent2" size="S"></ui5-avatar>
89-
<ui5-avatar initials="M" background-color="Accent3" size="M"></ui5-avatar>
90-
<ui5-avatar initials="L" background-color="Accent4" size="L"></ui5-avatar>
91-
<ui5-avatar initials="XL" background-color="Accent5" size="XL"></ui5-avatar>
87+
<ui5-avatar initials="XS" color-scheme="Accent1" size="XS"></ui5-avatar>
88+
<ui5-avatar initials="S" color-scheme="Accent2" size="S"></ui5-avatar>
89+
<ui5-avatar initials="M" color-scheme="Accent3" size="M"></ui5-avatar>
90+
<ui5-avatar initials="L" color-scheme="Accent4" size="L"></ui5-avatar>
91+
<ui5-avatar initials="XL" color-scheme="Accent5" size="XL"></ui5-avatar>
9292
<ui5-avatar initials="XS" shape="Square" size="XS"></ui5-avatar>
93-
<ui5-avatar initials="S" background-color="Accent7" shape="Square" size="S"></ui5-avatar>
94-
<ui5-avatar initials="M" background-color="Accent8" shape="Square" size="M"></ui5-avatar>
95-
<ui5-avatar initials="L" background-color="Accent9" shape="Square" size="L"></ui5-avatar>
96-
<ui5-avatar initials="XL" background-color="Accent10" shape="Square" size="XL"></ui5-avatar>
93+
<ui5-avatar initials="S" color-scheme="Accent7" shape="Square" size="S"></ui5-avatar>
94+
<ui5-avatar initials="M" color-scheme="Accent8" shape="Square" size="M"></ui5-avatar>
95+
<ui5-avatar initials="L" color-scheme="Accent9" shape="Square" size="L"></ui5-avatar>
96+
<ui5-avatar initials="XL" color-scheme="Accent10" shape="Square" size="XL"></ui5-avatar>
9797
</section>
9898

9999
<section>

‎packages/main/test/pages/AvatarGroup.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -294,15 +294,15 @@ <h3>AvatarGroup with user defined overflow button</h3>
294294
hiddenItems.forEach(function (avatar, index) {
295295
var color = avatarGroup.colorScheme[firstHiddenIndex + index]
296296
html += '<div class="avatar-slot" style="padding: 5px">' +
297-
'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-color="' + color + '"></ui5-avatar>' +
297+
'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" color-scheme="' + color + '"></ui5-avatar>' +
298298
'</div>';
299299
});
300300

301301
for (var index = 0; index < hiddenItems; index++) {
302302
var avatarRef = items[index];
303303

304304
html += '<div class="avatar-slot">' +
305-
'<ui5-avatar interactive image="' + avatarRef.image + '" initials="' + avatarRef.initials + '" background-color="' + avatarRef._effectiveBackgroundColor + '"></ui5-avatar>' +
305+
'<ui5-avatar interactive image="' + avatarRef.image + '" initials="' + avatarRef.initials + '" color-scheme="' + avatarRef._effectiveBackgroundColor + '"></ui5-avatar>' +
306306
'</div>';
307307
}
308308
placeholder.innerHTML = html;
@@ -314,7 +314,7 @@ <h3>AvatarGroup with user defined overflow button</h3>
314314
function onAvatarClicked(avatarGroup, avatarRef) {
315315
popAvatar.image = avatarRef.image;
316316
popAvatar.initials = avatarRef.initials;
317-
popAvatar.backgroundColor = avatarGroup.colorScheme[avatarGroup.items.indexOf(avatarRef)];
317+
popAvatar.colorScheme = avatarGroup.colorScheme[avatarGroup.items.indexOf(avatarRef)];
318318

319319
individualPop.close();
320320
individualPop.openBy(avatarRef);

‎packages/main/test/samples/Avatar.sample.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -76,18 +76,18 @@ <h4>Avatar with UI5 Icons</h4>
7676
<section>
7777
<h4>Avatar with Initials</h4>
7878
<div class="snippet">
79-
<ui5-avatar initials="XS" background-color="Accent1" size="XS"></ui5-avatar>
80-
<ui5-avatar initials="S" background-color="Accent2" size="S"></ui5-avatar>
81-
<ui5-avatar initials="M" background-color="Accent3" size="M"></ui5-avatar>
82-
<ui5-avatar initials="L" background-color="Accent4" size="L"></ui5-avatar>
83-
<ui5-avatar initials="XL" background-color="Accent5" size="XL"></ui5-avatar>
79+
<ui5-avatar initials="XS" color-scheme="Accent1" size="XS"></ui5-avatar>
80+
<ui5-avatar initials="S" color-scheme="Accent2" size="S"></ui5-avatar>
81+
<ui5-avatar initials="M" color-scheme="Accent3" size="M"></ui5-avatar>
82+
<ui5-avatar initials="L" color-scheme="Accent4" size="L"></ui5-avatar>
83+
<ui5-avatar initials="XL" color-scheme="Accent5" size="XL"></ui5-avatar>
8484
</div>
8585
<pre class="prettyprint lang-html"><xmp>
86-
<ui5-avatar initials="XS" background-color="Accent1" size="XS"></ui5-avatar>
87-
<ui5-avatar initials="S" background-color="Accent2" size="S"></ui5-avatar>
88-
<ui5-avatar initials="M" background-color="Accent3" size="M"></ui5-avatar>
89-
<ui5-avatar initials="L" background-color="Accent4" size="L"></ui5-avatar>
90-
<ui5-avatar initials="XL" background-color="Accent5" size="XL"></ui5-avatar>
86+
<ui5-avatar initials="XS" color-scheme="Accent1" size="XS"></ui5-avatar>
87+
<ui5-avatar initials="S" color-scheme="Accent2" size="S"></ui5-avatar>
88+
<ui5-avatar initials="M" color-scheme="Accent3" size="M"></ui5-avatar>
89+
<ui5-avatar initials="L" color-scheme="Accent4" size="L"></ui5-avatar>
90+
<ui5-avatar initials="XL" color-scheme="Accent5" size="XL"></ui5-avatar>
9191
</xmp></pre>
9292
</section>
9393

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ <h4>Avatar Group - type "Individual"</h4>
6262
function onAvatarClicked(avatarRef) {
6363
const avatarIndex = avatarGroup.items.indexOf(avatarRef);
6464

65-
popAvatar.backgroundColor = avatarGroup.colorScheme[avatarIndex];
65+
popAvatar.colorScheme = avatarGroup.colorScheme[avatarIndex];
6666
popAvatar.initials = avatarRef.initials;
6767
popAvatar.image = avatarRef.image;
6868
popAvatar.icon = avatarRef.icon;
@@ -81,7 +81,7 @@ <h4>Avatar Group - type "Individual"</h4>
8181
const color = avatarGroup.colorScheme[firstHiddenIndex + index];
8282

8383
html += '<div class="avatar-slot" style="padding: 5px">' +
84-
'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-color="' + color + '"></ui5-avatar>' +
84+
'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" color-scheme="' + color + '"></ui5-avatar>' +
8585
'</div>';
8686
});
8787

@@ -143,7 +143,7 @@ <h4>Avatar Group - type "Individual"</h4>
143143
avatarGroup.hiddenItems.forEach((avatar, index) => {
144144
html += `<ui5-avatar
145145
...
146-
background-color="${avatarGroup.colorScheme[firstHiddenIndex + index]}"
146+
color-scheme="${avatarGroup.colorScheme[firstHiddenIndex + index]}"
147147
</ui5-avatar>`;
148148
});
149149

@@ -206,7 +206,7 @@ <h4>Avatar Group - type "Group"</h4>
206206
const avatarColor = avatarGroup.colorScheme[index];
207207

208208
html += '<div class="avatar-slot" style="padding: 3px">' +
209-
'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" background-color="' + avatarColor + '"></ui5-avatar>' +
209+
'<ui5-avatar interactive icon="' + avatar.icon + '" image="' + avatar.image + '" initials="' + avatar.initials + '" color-scheme="' + avatarColor + '"></ui5-avatar>' +
210210
'</div>';
211211
});
212212

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -51,19 +51,19 @@ describe("avatar-group rendering", () => {
5151
});
5252
});
5353

54-
it("tests if _background-color attribute is automatically set to avatars", () => {
54+
it("tests if _background-design attribute is automatically set to avatars", () => {
5555
const avatars = browser.$$("#avatar-group-group ui5-avatar");
5656

5757
let index = 0;
5858

5959
avatars.forEach(avatar => {
60-
const avatarBackgroundColor = avatar.getAttribute("_background-color");
60+
const avatarBackgroundColor = avatar.getAttribute("_color-scheme");
6161

6262
if (++index > 10) {
6363
index = 1;
6464
}
6565

66-
assert.strictEqual(avatarBackgroundColor, `Accent${index}`, "AvatarGroup avatar-size property is assigned to avatars _size property");
66+
assert.strictEqual(avatarBackgroundColor, `Accent${index}`, "AvatarGroup _color-scheme property is assigned to avatars _size property");
6767
});
6868
});
6969

0 commit comments

Comments
 (0)