Skip to content

Commit 9646c3e

Browse files
fifoosidfifoosid
authored
feat(ui5-avatar): implement default slot (#3237)
1 parent 99a25be commit 9646c3e

File tree

10 files changed

+342
-181
lines changed

10 files changed

+342
-181
lines changed

‎packages/main/src/Avatar.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
role="{{_role}}"
1111
aria-haspopup="{{_ariaHasPopup}}"
1212
>
13-
{{#if image}}
14-
<span class="ui5-avatar-img" style="{{styles.img}}" role="img" aria-label="{{accessibleNameText}}"></span>
13+
{{#if hasImage}}
14+
<slot></slot>
1515
{{else if icon}}
1616
<ui5-icon class="ui5-avatar-icon" name="{{icon}}" accessible-name="{{accessibleNameText}}"></ui5-icon>
1717
{{else if initials}}

‎packages/main/src/Avatar.js

+29-37
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
4-
import encodeCSS from "@ui5/webcomponents-base/dist/util/encodeCSS.js";
54

65
import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
76
// Template
@@ -15,7 +14,6 @@ import AvatarCss from "./generated/themes/Avatar.css.js";
1514
import Icon from "./Icon.js";
1615
import AvatarSize from "./types/AvatarSize.js";
1716
import AvatarShape from "./types/AvatarShape.js";
18-
import AvatarFitType from "./types/AvatarFitType.js";
1917
import AvatarColorScheme from "./types/AvatarColorScheme.js";
2018

2119
/**
@@ -24,6 +22,7 @@ import AvatarColorScheme from "./types/AvatarColorScheme.js";
2422
const metadata = {
2523
tag: "ui5-avatar",
2624
languageAware: true,
25+
managedSlots: true,
2726
properties: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
2827

2928
/**
@@ -44,20 +43,10 @@ const metadata = {
4443
type: Boolean,
4544
},
4645

47-
/**
48-
* Defines the source path to the desired image.
49-
* @type {string}
50-
* @defaultvalue ""
51-
* @public
52-
*/
53-
image: {
54-
type: String,
55-
},
56-
5746
/**
5847
* Defines the name of the UI5 Icon, that would be displayed.
5948
* <br>
60-
* <b>Note:</b> If <code>image</code> is set, the property would be ignored.
49+
* <b>Note:</b> If <code>image</code> slot is provided, the property would be ignored.
6150
* <br>
6251
* <b>Note:</b> You should import the desired icon first, then use its name as "icon".
6352
* <br><br>
@@ -133,24 +122,7 @@ const metadata = {
133122
},
134123

135124
/**
136-
* Defines the fit type of the desired image.
137-
* <br><br>
138-
* Available options are:
139-
* <ul>
140-
* <li><code>Cover</code></li>
141-
* <li><code>Contain</code></li>
142-
* </ul>
143-
* @type {AvatarFitType}
144-
* @defaultvalue "Cover"
145-
* @public
146-
*/
147-
imageFitType: {
148-
type: AvatarFitType,
149-
defaultValue: AvatarFitType.Cover,
150-
},
151-
152-
/**
153-
* Defines the background color of the content.
125+
* Defines the background color of the desired image.
154126
* <br><br>
155127
* Available options are:
156128
* <ul>
@@ -211,8 +183,31 @@ const metadata = {
211183
type: String,
212184
noAttribute: true,
213185
},
186+
187+
_hasImage: {
188+
type: Boolean,
189+
},
214190
},
215191
slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
192+
/**
193+
* Receives the desired <code>&lt;img&gt;</code> tag
194+
*
195+
* <b>Note:</b> If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:
196+
* <br /> <br />
197+
* <code>
198+
* ui5-avatar:not(:defined) { <br />
199+
* &nbsp;visibility: hidden; <br />
200+
* } <br />
201+
* </code>
202+
* @type {HTMLElement}
203+
* @slot
204+
* @public
205+
* @since 1.0.0-rc.15
206+
*/
207+
"default": {
208+
propertyName: "image",
209+
type: HTMLElement,
210+
},
216211
},
217212
events: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
218213
/**
@@ -343,12 +338,9 @@ class Avatar extends UI5Element {
343338
return this.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
344339
}
345340

346-
get styles() {
347-
return {
348-
img: {
349-
"background-image": `url("${encodeCSS(this.image)}")`,
350-
},
351-
};
341+
get hasImage() {
342+
this._hasImage = !!this.image.length;
343+
return this._hasImage;
352344
}
353345

354346
_onclick(event) {

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

+11-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
}
2828

2929
/* Shapes */
30-
:host([shape="Square"]) {
30+
:host([shape="Square"]),
31+
:host([shape="Square"]) ::slotted(*){
3132
border-radius: .25rem;
3233
}
3334

@@ -115,7 +116,15 @@
115116
width: 3rem;
116117
}
117118

118-
:host(:not([image])) {
119+
::slotted(*) {
120+
border-radius: 50%;
121+
width: 100%;
122+
height: 100%;
123+
}
124+
125+
:host(:not([background-color]):not([_has-image])),
126+
:host([_background-color="Accent6"]),
127+
:host([background-color="Accent6"]) {
119128
background-color: var(--ui5-avatar-accent6);
120129
}
121130

‎packages/main/src/types/AvatarFitType.js

-40
This file was deleted.

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

+76-19
Original file line numberDiff line numberDiff line change
@@ -20,33 +20,63 @@
2020
<body style="background-color: var(--sapBackgroundColor);">
2121
<section>
2222
<h3>Avatar - Basic sample</h3>
23-
<ui5-avatar image="./img/John_Miller.png"></ui5-avatar>
23+
<ui5-avatar>
24+
<img src="./img/John_Miller.png" alt="John Miller">
25+
</ui5-avatar>
2426
</section>
2527

2628
<section>
2729
<h3>Avatar - special characters in image path</h3>
28-
<ui5-avatar image="./img/John$$$ ' (_)Miller 100%25 &=.png" style="border: 1px dashed red;"></ui5-avatar>
29-
<ui5-avatar image="./img/John Miller.png" style="border: 1px dashed red;"></ui5-avatar>
30-
<ui5-avatar image="./img/John%20Miller.png" style="border: 1px dashed red;"></ui5-avatar>
31-
<ui5-avatar image="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" style="border: 1px dashed red;"></ui5-avatar>
30+
<ui5-avatar style="border: 1px dashed red;">
31+
<img src="./img/John$$$ ' (_)Miller 100%25 &=.png" alt="John Miller">
32+
</ui5-avatar>
33+
<ui5-avatar style="border: 1px dashed red;">
34+
<img src="./img/John Miller.png" alt="John Miller">
35+
</ui5-avatar>
36+
<ui5-avatar style="border: 1px dashed red;">
37+
<img src="./img/John%20Miller.png" alt="John Miller">
38+
</ui5-avatar>
39+
<ui5-avatar style="border: 1px dashed red;">
40+
<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" alt="SAP Logo">
41+
</ui5-avatar>
3242
</section>
3343

3444
<section>
3545
<h3>Avatar - Square [ XS, S, M, L, XL ]</h3>
36-
<ui5-avatar image="./img/woman_avatar_5.png" shape="Square" size="XS"></ui5-avatar>
37-
<ui5-avatar image="./img/woman_avatar_5.png" shape="Square" size="S"></ui5-avatar>
38-
<ui5-avatar image="./img/woman_avatar_5.png" shape="Square" size="M"></ui5-avatar>
39-
<ui5-avatar image="./img/woman_avatar_5.png" shape="Square" size="L"></ui5-avatar>
40-
<ui5-avatar image="./img/woman_avatar_5.png" shape="Square" size="XL"></ui5-avatar>
46+
<ui5-avatar shape="Square" size="XS">
47+
<img src="./img/woman_avatar_5.png" alt="Woman image">
48+
</ui5-avatar>
49+
<ui5-avatar shape="Square" size="S">
50+
<img src="./img/woman_avatar_5.png" alt="Woman image">
51+
</ui5-avatar>
52+
<ui5-avatar shape="Square" size="M">
53+
<img src="./img/woman_avatar_5.png" alt="Woman image">
54+
</ui5-avatar>
55+
<ui5-avatar shape="Square" size="L">
56+
<img src="./img/woman_avatar_5.png" alt="Woman image">
57+
</ui5-avatar>
58+
<ui5-avatar shape="Square" size="XL">
59+
<img src="./img/woman_avatar_5.png" alt="Woman image">
60+
</ui5-avatar>
4161
</section>
4262

4363
<section>
4464
<h3>Avatar - Circle [ XS, S, M, L, XL ]</h3>
45-
<ui5-avatar image="./img/John_Miller.png" size="XS"></ui5-avatar>
46-
<ui5-avatar image="./img/John_Miller.png" size="S"></ui5-avatar>
47-
<ui5-avatar image="./img/John_Miller.png" size="M"></ui5-avatar>
48-
<ui5-avatar image="./img/John_Miller.png" size="L"></ui5-avatar>
49-
<ui5-avatar image="./img/John_Miller.png" size="XL"></ui5-avatar>
65+
<ui5-avatar size="XS">
66+
<img src="./img/John_Miller.png" alt="John Miller">
67+
</ui5-avatar>
68+
<ui5-avatar size="S">
69+
<img src="./img/John_Miller.png" alt="John Miller">
70+
</ui5-avatar>
71+
<ui5-avatar size="M">
72+
<img src="./img/John_Miller.png" alt="John Miller">
73+
</ui5-avatar>
74+
<ui5-avatar size="L">
75+
<img src="./img/John_Miller.png" alt="John Miller">
76+
</ui5-avatar>
77+
<ui5-avatar size="XL">
78+
<img src="./img/John_Miller.png" alt="John Miller">
79+
</ui5-avatar>
5080
</section>
5181

5282
<section>
@@ -99,16 +129,24 @@ <h3>Avatar - Initials</h3>
99129
<section>
100130
<h3>Avatar - Custom</h3>
101131
<h4>Avatar with custom size</h4>
102-
<ui5-avatar id="myCustomAvatar" image="./img/Lamp_avatar_01.jpg" shape="Square" size="XL" style="width: 250px; height: 250px; border: 1px solid var(--sapField_BorderColor)"></ui5-avatar>
132+
<ui5-avatar id="myCustomAvatar" shape="Square" size="XL" style="width: 250px; height: 250px; border: 1px solid var(--sapField_BorderColor)">
133+
<img src="./img/Lamp_avatar_01.jpg" alt="Lamp" style="object-fit: cover;">
134+
</ui5-avatar>
103135
<h4>Avatar with custom size and imageFitType="Contain"</h4>
104-
<ui5-avatar id="myCustomAvatar1" image="./img/Lamp_avatar_01.jpg" shape="Square" size="XL" style="width: 250px; height: 250px; border: 1px solid var(--sapField_BorderColor)" image-fit-type="Contain"></ui5-avatar>
136+
<ui5-avatar id="myCustomAvatar1" shape="Square" size="XL" style="width: 250px; height: 250px; border: 1px solid var(--sapField_BorderColor)">
137+
<img src="./img/Lamp_avatar_01.jpg" alt="Lamp" style="object-fit: contain;">
138+
</ui5-avatar>
105139
</section>
106140

107141
<section>
108142
<h3>Avatar - test</h3>
109-
<ui5-avatar id="myAvatar1" image="./img/woman_avatar_5.png"></ui5-avatar>
143+
<ui5-avatar id="myAvatar1">
144+
<img src="./img/woman_avatar_5.png" alt="Woman image">
145+
</ui5-avatar>
110146
<ui5-avatar id="myAvatar2" icon="filter"></ui5-avatar>
111-
<ui5-avatar id="myAvatar3" image="./img/woman_avatar_5.png" icon="filter" initials="SF"></ui5-avatar>
147+
<ui5-avatar id="myAvatar3" icon="filter" initials="SF">
148+
<img src="./img/woman_avatar_5.png" alt="Woman image">
149+
</ui5-avatar>
112150
<ui5-avatar id="myAvatar4" initials="SF" shape="Square" size="M"></ui5-avatar>
113151
</section>
114152

@@ -145,5 +183,24 @@ <h3>Avatar - interactive</h3>
145183
});
146184
</script>
147185

186+
<style>
187+
.avatar-image {
188+
object-fit: cover;
189+
}
190+
191+
.avatar-image1 {
192+
object-fit: contain;
193+
}
194+
</style>
195+
196+
<ui5-avatar size="XL" shape="Circle">
197+
<img src="./img/Lamp_avatar_01.jpg" alt="Woman 1" class="avatar-image">
198+
</ui5-avatar>
199+
200+
<ui5-avatar size="XL" shape="Square">
201+
<img src="./img/Lamp_avatar_01.jpg" alt="Woman 1" class="avatar-image1">
202+
</ui5-avatar>
203+
204+
148205
</body>
149206
</html>

0 commit comments

Comments
 (0)