feat(ui5-shellbar): add profile slot (#1222)

Introduce profile slot, instead of property profile to give more freedom to users, enabling usage of both images and icons for a profile. Fixes: #1099 BREAKING CHANGE: profile property is removed in favour of profile slot
SAP · Feb 18, 2020 · 9dab18b · 9dab18b
1 parent 756b78b
commit 9dab18b
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 35 deletions.
diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs
@@ -57,15 +57,14 @@
 						@click={{this.press}}>
 					</ui5-icon>
 				{{else}}
-					<div
-						tabindex="{{this._tabIndex}}"
+					<slot
+						name="profile"
 						id="{{this.id}}"
 						style="{{this.style}}"
 						class="{{this.classes}}"
-						@click="{{this.press}}"
-					>
-						<span style="{{this.subStyles}}" class="{{this.subclasses}}"></span>
-					</div>
+						tabindex="{{this._tabIndex}}"
+						@click={{this.press}}
+					></slot>
 				{{/if}}
 			{{/each}}
 		</div>

diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js
@@ -74,16 +74,6 @@ const metadata = {
 			type: String,
 		},
 
-		/**
-		 * Defines the source URI of the profile action.
-		 * If no source is set - profile will be excluded from actions.
-		 * @type {string}
-		 * @public
-		 */
-		profile: {
-			type: String,
-		},
-
 		/**
 		 * Defines, if the notification icon would be displayed.
 		 * @type {boolean}
@@ -167,6 +157,18 @@ const metadata = {
 			type: HTMLElement,
 		},
 
+		/**
+		 * You can pass <code>ui5-avatar</code> to set the profile image/icon.
+		 * If no profile slot is set - profile will be excluded from actions.
+		 * @type {HTMLElement}
+		 * @slot
+		 * @since 1.0.0-rc.6
+		 * @public
+		 */
+		profile: {
+			type: HTMLElement,
+		},
+
 		/**
 		 * Defines the items displayed in menu after a click on the primary title.
 		 * <br><br>
@@ -223,7 +225,7 @@ const metadata = {
 		},
 
 		/**
-		 * Fired, when the profile icon is activated.
+		 * Fired, when the profile slot is present.
 		 *
 		 * @event
 		 * @param {HTMLElement} targetRef dom ref of the activated element
@@ -297,7 +299,7 @@ const metadata = {
  * <h3 class="comment-api-title">Overview</h3>
  *
  * The <code>ui5-shellbar</code> is meant to serve as an application header
- * and includes numerous built-in features, such as: logo, profile icon, title, search field, notifications and so on.
+ * and includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.
  * <br><br>
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents-fiori/dist/ShellBar";</code>
@@ -802,7 +804,7 @@ class ShellBar extends UI5Element {
 				priority: 4,
 				subclasses: "ui5-shellbar-image-buttonImage",
 				style: `order: ${this.profile ? 5 : -10};`,
-				subStyles: `${this.profile ? `background-image: url(${this.profile})` : ""}`,
+				profile: true,
 				id: `${this._id}-item-${3}`,
 				domOrder: this.profile ? (++domOrder) : -1,
 				show: this.profile,

diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
@@ -65,6 +65,18 @@
 	z-index: 1;
 }
 
+slot[name="profile"] {
+	min-width: 0;
+}
+
+::slotted(ui5-avatar) {
+	min-width: 0;
+	width: 2.25rem;
+	height: 2.25rem;
+	padding: .25rem;
+	background-color: transparent;
+}
+
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner {
 	border: none;
 }

diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
@@ -86,10 +86,11 @@
         class="shellbar-example"
         logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
         primary-title="SAP Labs Bulgaria"
-        profile="https://openui5nightly.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png"
         show-notifications
         show-product-switch
 >
+    <ui5-avatar slot="profile" icon="customer"></ui5-avatar>
+
     <ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
     <ui5-shellbar-item icon="thing-type" text="Messages"></ui5-shellbar-item>
     <ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
@@ -105,14 +106,15 @@
         primary-title="Product Title"
         secondary-title="Second title"
         logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
-        profile="https://openui5nightly.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png"
         second-title="Second Title"
         notification-count="99+"
         show-notifications
         show-product-switch
         show-co-pilot
 >
 
+    <ui5-avatar slot="profile" image="https://openui5nightly.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png"></ui5-avatar>
+
     <ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
 
     <ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>

diff --git a/packages/fiori/test/samples/ShellBar.sample.html b/packages/fiori/test/samples/ShellBar.sample.html
@@ -18,12 +18,12 @@ <h3>ShellBar</h3>
 		primary-title="Corporate Portal"
 		secondary-title="secondary title"
 		logo="../../../assets/images/sap-logo-svg.svg"
-		profile="../../../assets/images/avatars/woman_avatar_5.png"
 		notification-count="99+"
 		show-notifications
 		show-product-switch
 		show-co-pilot
 	>
+		<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
 
 		<ui5-button icon="nav-back" slot="startButton"></ui5-button>
 
@@ -67,13 +67,14 @@ <h3>ShellBar</h3>
 	primary-title="Corporate Portal"
 	secondary-title="secondary title"
 	logo="../../../assets/images/sap-logo-svg.svg"
-	profile="../../../assets/images/avatars/woman_avatar_5.png"
 	notification-count="99+"
 	show-notifications
 	show-product-switch
 	show-co-pilot
 >
 
+	<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
+
 	<ui5-button icon="nav-back" slot="startButton"></ui5-button>
 
 	<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
@@ -118,54 +119,57 @@ <h3>ShellBar</h3>
 	<h3>Basic ShellBar</h3>
 	<div class="snippet">
 		<ui5-shellbar
-			profile="../../../assets/images/avatars/woman_avatar_5.png"
 			primary-title="Corporate Portal"
 			secondary-title="secondary title"
 			logo="../../../assets/images/sap-logo-svg.svg"
 		>
 
-		<ui5-button icon="nav-back" slot="startButton"></ui5-button>
+			<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
+
+			<ui5-button icon="nav-back" slot="startButton"></ui5-button>
 
 		</ui5-shellbar>
 	</div>
 
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-shellbar
-	profile="../../../assets/images/avatars/woman_avatar_5.png"
 	primary-title="Corporate Portal"
 	secondary-title="secondary title"
 	logo="../../../assets/images/sap-logo-svg.svg"
 >
+	<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
+
+	<ui5-button icon="nav-back" slot="startButton"></ui5-button>
 </ui5-shellbar>
 	</xmp></pre>
 </section>
 
-<!-- ShellBar with searhc and notifications -->
+<!-- ShellBar with search and notifications -->
 <section>
 	<h3>ShellBar with search and notifications</h3>
 	<div class="snippet">
 		<ui5-shellbar
-			profile="../../../assets/images/avatars/woman_avatar_5.png"
 			primary-title="Corporate Portal"
 			secondary-title="secondary title"
 			logo="../../../assets/images/sap-logo-svg.svg"
 			show-notifications
 			notification-count="22"
 		>
+			<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
 
 			<ui5-input slot="searchField" placeholer="Enter service..."></ui5-input>
 		</ui5-shellbar>
 	</div>
 
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-shellbar
-	profile="../../../assets/images/avatars/woman_avatar_5.png"
 	primary-title="Corporate Portal"
 	secondary-title="secondary title"
 	logo="../../../images/sap-logo-svg.svg"
 	show-notifications
 	notification-count="22"
 	>
+	<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
 
 	<ui5-input slot="searchField" placeholer="Enter service..."></ui5-input>
 </ui5-shellbar>
@@ -177,7 +181,6 @@ <h3>ShellBar with search and notifications</h3>
 	<h3>ShellBar with product switch and CoPilot</h3>
 	<div class="snippet">
 		<ui5-shellbar
-			profile="../../../assets/images/avatars/woman_avatar_5.png"
 			primary-title="Corporate Portal"
 			secondary-title="secondary title"
 			logo="../../../assets/images/sap-logo-svg.svg"
@@ -186,13 +189,12 @@ <h3>ShellBar with product switch and CoPilot</h3>
 			show-notifications
 			notification-count="22"
 		>
-
+			<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
 		</ui5-shellbar>
 	</div>
 
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-shellbar
-profile="../../../assets/images/avatars/woman_avatar_5.png"
 primary-title="Corporate Portal"
 secondary-title="secondary title"
 logo="../../../assets/images/sap-logo-svg.svg"
@@ -201,7 +203,7 @@ <h3>ShellBar with product switch and CoPilot</h3>
 show-notifications
 notification-count="22"
 >
-
+	<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
 </ui5-shellbar>
 	</xmp></pre>
 </section>

diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js
@@ -223,7 +223,7 @@ describe("Component Behavior", () => {
 			});
 
 			it("tests profilePress event", () => {
-				const profileIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-image-button");
+				const profileIcon = browser.$("#shellbar").$("ui5-avatar");
 				const input = browser.$("#press-input");
 
 				profileIcon.click();
@@ -325,7 +325,7 @@ describe("Component Behavior", () => {
 			});
 
 			it("tests profilePress event", () => {
-				const profileIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-image-button");
+				const profileIcon = browser.$("#shellbar").$("ui5-avatar");
 				const input = browser.$("#press-input");
 
 				profileIcon.click();