Skip to content

Commit 102b482

Browse files
fifoosidfifoosid
committed
fix comments
1 parent a80e9a4 commit 102b482

File tree

8 files changed

+79
-79
lines changed

8 files changed

+79
-79
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 AvatarBackgroundDesign from "./types/AvatarBackgroundDesign.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 {AvatarBackgroundDesign}
169+
* @type {AvatarColorScheme}
170170
* @defaultvalue "Accent6"
171171
* @public
172172
*/
173-
backgroundDesign: {
174-
type: AvatarBackgroundDesign,
175-
defaultValue: AvatarBackgroundDesign.Accent6,
173+
colorScheme: {
174+
type: AvatarColorScheme,
175+
defaultValue: AvatarColorScheme.Accent6,
176176
},
177177

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

186186
/**
@@ -294,7 +294,7 @@ class Avatar extends UI5Element {
294294
*/
295295
get _effectiveBackgroundColor() {
296296
// we read the attribute, because the "background-color" property will always have a default value
297-
return this.getAttribute("background-design") || this._backgroundDesign;
297+
return this.getAttribute("background-design") || this._colorScheme;
298298
}
299299

300300
get validInitials() {

‎packages/main/src/AvatarGroup.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import AvatarGroupCss from "./generated/themes/AvatarGroup.css.js";
1515
import Button from "./Button.js";
1616
import AvatarSize from "./types/AvatarSize.js";
1717
import AvatarGroupType from "./types/AvatarGroupType.js";
18-
import AvatarBackgroundDesign from "./types/AvatarBackgroundDesign.js";
18+
import AvatarColorScheme from "./types/AvatarColorScheme.js";
1919

2020
const OVERFLOW_BTN_CLASS = "ui5-avatar-group-overflow-btn";
2121
const AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;
@@ -253,7 +253,7 @@ class AvatarGroup extends UI5Element {
253253
}
254254

255255
/**
256-
* Returns an array containing the <code>AvatarBackgroundDesign</code> values that correspond to the avatars in the <code>ui5-avatar-group</code>.
256+
* Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the <code>ui5-avatar-group</code>.
257257
* @readonly
258258
* @type { Array }
259259
* @defaultValue []
@@ -405,7 +405,7 @@ class AvatarGroup extends UI5Element {
405405

406406
if (!avatar.getAttribute("background-design")) {
407407
// AvatarGroup respects colors set to ui5-avatar
408-
avatar.setAttribute("_background-design", AvatarBackgroundDesign[`Accent${colorIndex}`]);
408+
avatar.setAttribute("_color-scheme", AvatarColorScheme[`Accent${colorIndex}`]);
409409
}
410410

411411
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-design="Accent1"]),
123-
:host([background-design="Accent1"]) {
122+
:host([_color-scheme="Accent1"]),
123+
:host([color-scheme="Accent1"]) {
124124
background-color: var(--ui5-avatar-accent1);
125125
}
126126

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

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

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

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

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

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

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

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

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

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

‎packages/main/src/types/AvatarBackgroundDesign.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 AvatarBackgroundDesigns.
5-
* @lends sap.ui.webcomponents.main.types.AvatarBackgroundDesign.prototype
4+
* Different types of AvatarColorSchemes.
5+
* @lends sap.ui.webcomponents.main.types.AvatarColorScheme.prototype
66
* @public
77
*/
8-
const AvatarBackGroundDesigns = {
8+
const AvatarColorSchemes = {
99
/**
1010
*
1111
* @public
@@ -86,19 +86,19 @@ const AvatarBackGroundDesigns = {
8686

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

102-
AvatarBackgroundDesign.generateTypeAccessors(AvatarBackGroundDesigns);
102+
AvatarColorScheme.generateTypeAccessors(AvatarColorSchemes);
103103

104-
export default AvatarBackgroundDesign;
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-design="Accent1" size="L"></ui5-avatar>
73-
<ui5-avatar background-design="Accent2" size="L"></ui5-avatar>
74-
<ui5-avatar background-design="Accent3" size="L"></ui5-avatar>
75-
<ui5-avatar background-design="Accent4" size="L"></ui5-avatar>
76-
<ui5-avatar background-design="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-design="Accent7" size="L"></ui5-avatar>
79-
<ui5-avatar background-design="Accent8" size="L"></ui5-avatar>
80-
<ui5-avatar background-design="Accent9" size="L"></ui5-avatar>
81-
<ui5-avatar background-design="Accent10" size="L"></ui5-avatar>
82-
<ui5-avatar background-design="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-design="Accent1" size="XS"></ui5-avatar>
88-
<ui5-avatar initials="S" background-design="Accent2" size="S"></ui5-avatar>
89-
<ui5-avatar initials="M" background-design="Accent3" size="M"></ui5-avatar>
90-
<ui5-avatar initials="L" background-design="Accent4" size="L"></ui5-avatar>
91-
<ui5-avatar initials="XL" background-design="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-design="Accent7" shape="Square" size="S"></ui5-avatar>
94-
<ui5-avatar initials="M" background-design="Accent8" shape="Square" size="M"></ui5-avatar>
95-
<ui5-avatar initials="L" background-design="Accent9" shape="Square" size="L"></ui5-avatar>
96-
<ui5-avatar initials="XL" background-design="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-design="' + 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-design="' + 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-design="Accent1" size="XS"></ui5-avatar>
80-
<ui5-avatar initials="S" background-design="Accent2" size="S"></ui5-avatar>
81-
<ui5-avatar initials="M" background-design="Accent3" size="M"></ui5-avatar>
82-
<ui5-avatar initials="L" background-design="Accent4" size="L"></ui5-avatar>
83-
<ui5-avatar initials="XL" background-design="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-design="Accent1" size="XS"></ui5-avatar>
87-
<ui5-avatar initials="S" background-design="Accent2" size="S"></ui5-avatar>
88-
<ui5-avatar initials="M" background-design="Accent3" size="M"></ui5-avatar>
89-
<ui5-avatar initials="L" background-design="Accent4" size="L"></ui5-avatar>
90-
<ui5-avatar initials="XL" background-design="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.backgroundDesign = 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-design="' + 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-design="${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-design="' + 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

0 commit comments

Comments
 (0)