feat(ui5-avatar): add initials, imageFitType and bg-color (#1151)

packages/main/src/Avatar.hbs

@@ -1,7 +1,9 @@
 <div class="ui5-avatar-root">
-	{{#if displayIcon}}
+	{{#if image}}
+		<span alt="avatar" class="ui5-avatar-img" style="background-image: url({{image}})"></span>
+	{{else if icon}}
 		<ui5-icon class="ui5-avatar-icon" name="{{icon}}"></ui5-icon>
-	{{else}}
-		<img alt="avatar" class="ui5-avatar-img" src="{{img}}"/>
+	{{else if initials}}
+		<span class="ui5-avatar-initials">{{validInitials}}</span>
 	{{/if}}
 </div>

packages/main/src/Avatar.js

@@ -10,6 +10,8 @@ import AvatarCss from "./generated/themes/Avatar.css.js";
 import Icon from "./Icon.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarShape from "./types/AvatarShape.js";
+import AvatarFitType from "./types/AvatarFitType.js";
+import AvatarBackgroundColor from "./types/AvatarBackgroundColor.js";
 
 /**
  * @public
@@ -24,14 +26,14 @@ const metadata = {
 		 * @defaultvalue ""
 		 * @public
 		 */
-		img: {
+		image: {
 			type: String,
 		},
 
 		/**
 		 * Defines the name of the UI5 Icon, that would be displayed.
 		 * <br>
-		 * <b>Note:</b> if <code>img</code> is set, the property would be ignored.
+		 * <b>Note:</b> if <code>image</code> is set, the property would be ignored.
 		 * <br>
 		 * <b>Note:</b> you should import the desired icon first, then use its name as "icon".
 		 * <br><br>
@@ -48,6 +50,18 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the displayed initials.
+		 * <br>
+		 * Up to two Latin letters can be displayed as initials in a <code>ui5-avatar</code>.
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		initials: {
+			type: String,
+		},
+
 		/**
 		 * Defines the shape of the <code>ui5-avatar</code>.
 		 * <br><br>
@@ -82,6 +96,50 @@ const metadata = {
 			type: String,
 			defaultValue: AvatarSize.S,
 		},
+
+		/**
+		 * Defines the fit type of the desired image.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Cover</code></li>
+		 * <li><code>Contain</code></li>
+		 * <ul>
+		 * @type {String}
+		 * @defaultvalue "Cover"
+		 * @public
+		 */
+		imageFitType: {
+			type: String,
+			defaultValue: AvatarFitType.Cover,
+		},
+
+		/**
+		 * Defines the background color of the desired image.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Accent1</code></li>
+		 * <li><code>Accent2</code></li>
+		 * <li><code>Accent3</code></li>
+		 * <li><code>Accent4</code></li>
+		 * <li><code>Accent5</code></li>
+		 * <li><code>Accent6</code></li>
+		 * <li><code>Accent7</code></li>
+		 * <li><code>Accent8</code></li>
+		 * <li><code>Accent9</code></li>
+		 * <li><code>Accent10</code></li>
+		 * <li><code>Placeholder</code></li>
+		 * <ul>
+		 * @type {String}
+		 * @defaultvalue "Accent6"
+		 * @public
+		 */
+		backgroundColor: {
+			type: String,
+			defaultValue: AvatarBackgroundColor.Accent6,
+		},
+
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
 	},
@@ -134,8 +192,14 @@ class Avatar extends UI5Element {
 		super.define(...params);
 	}
 
-	get displayIcon() {
-		return !!this.icon && !this.img;
+	get validInitials() {
+		const validInitials = /^[a-zA-Z]{1,2}$/;
+
+		if (this.initials && validInitials.test(this.initials)) {
+			return this.initials;
+		}
+
+		return null;
 	}
 }
 

packages/main/src/themes/Avatar.css

@@ -8,46 +8,52 @@
 	width: 3rem;
 	border-radius: 50%;
 	outline: none;
+	color: var(--sapContent_ImagePlaceholderForegroundColor);
 }
 
 /* Shapes */
 :host([shape="Square"]) {
-	border-radius: 0.25rem;
+	border-radius: .25rem;
 }
 
 :host([shape="Square"]) .ui5-avatar-root {
-	border-radius: 0.25rem;
+	border-radius: .25rem;
 }
 
 :host([shape="Square"]) .ui5-avatar-img {
-	border-radius: 0.25rem;
+	border-radius: .25rem;
 }
 
 /* Sizes */
 
 :host([size="XS"]) {
 	height: 2rem;
 	width: 2rem;
+	font-size: .75rem;
 }
 
 :host([size="S"]) {
 	height: 3rem;
 	width: 3rem;
+	font-size: 1.125rem;
 }
 
 :host([size="M"]) {
 	height: 4rem;
 	width: 4rem;
+	font-size: 1.625rem;
 }
 
 :host([size="L"]) {
 	height: 5rem;
 	width: 5rem;
+	font-size: 2rem;
 }
 
 :host([size="XL"]) {
 	height: 7rem;
 	width: 7rem;
+	font-size: 2.75rem;
 }
 
 /* Icon */
@@ -81,12 +87,60 @@
 	width: 3rem;
 }
 
-:host(:not([img])) {
+:host(:not([image])) {
 	background-color: var(--sapAccentColor6);
 }
 
-:host(:not([img])) .ui5-avatar-icon {
-	color: var(--sapContent_ImagePlaceholderForegroundColor);
+:host([backgroundColor="Accent1"]) {
+	background-color: var(--sapAccentColor1);
+}
+
+:host([backgroundColor="Accent2"]) {
+	background-color: var(--sapAccentColor2);
+}
+
+:host([backgroundColor="Accent3"]) {
+	background-color: var(--sapAccentColor3);
+}
+
+:host([backgroundColor="Accent4"]) {
+	background-color: var(--sapAccentColor4);
+}
+
+:host([backgroundColor="Accent5"]) {
+	background-color: var(--sapAccentColor5);
+}
+
+:host([backgroundColor="Accent6"]) {
+	background-color: var(--sapAccentColor6);
+}
+
+:host([backgroundColor="Accent7"]) {
+	background-color: var(--sapAccentColor7);
+}
+
+:host([backgroundColor="Accent8"]) {
+	background-color: var(--sapAccentColor8);
+}
+
+:host([backgroundColor="Accent9"]) {
+	background-color: var(--sapAccentColor9);
+}
+
+:host([backgroundColor="Accent10"]) {
+	background-color: var(--sapAccentColor10);
+}
+
+:host([backgroundColor="Placeholder"]) {
+	background-color: var(--sapContent_ImagePlaceholderBackground);
+}
+
+:host(:not([image])) .ui5-avatar-icon {
+	color: inherit;
+}
+
+:host([image-fit-type="Contain"]) .ui5-avatar-img {
+	background-size: contain;
 }
 
 .ui5-avatar-root {
@@ -101,3 +155,14 @@
 	width: 100%;
 	border-radius: 50%;
 }
+
+.ui5-avatar-img {
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+}
+
+.ui5-avatar-initials {
+	position: absolute;
+	color: inherit;
+}

packages/main/src/types/AvatarBackgroundColor.js

@@ -0,0 +1,104 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * Different types of AvatarBackgroundColor.
+ * @lends sap.ui.webcomponents.main.types.AvatarBackgroundColor.prototype
+ * @public
+ */
+const AvatarBackGroundColors = {
+	/**
+	 *
+	 * @public
+	 * @type {Accent1}
+	 */
+	Accent1: "Accent1",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent2}
+	 */
+	Accent2: "Accent2",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent3}
+	 */
+	Accent3: "Accent3",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent4}
+	 */
+	Accent4: "Accent4",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent5}
+	 */
+	Accent5: "Accent5",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent6}
+	 */
+	Accent6: "Accent6",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent7}
+	 */
+	Accent7: "Accent7",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent8}
+	 */
+	Accent8: "Accent8",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent9}
+	 */
+	Accent9: "Accent9",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent10}
+	 */
+	Accent10: "Accent10",
+
+	/**
+	 *
+	 * @public
+	 * @type {Placeholder}
+	 */
+	Placeholder: "Placeholder",
+};
+
+/**
+ * @class
+ * Different types of AvatarBackgroundColor.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.AvatarBackgroundColor
+ * @public
+ * @enum {string}
+ */
+class AvatarBackgroundColor extends DataType {
+	static isValid(value) {
+		return !!AvatarBackGroundColors[value];
+	}
+}
+
+AvatarBackgroundColor.generataTypeAcessors(AvatarBackGroundColors);
+
+export default AvatarBackgroundColor;