From 4338d56a9b7334a27a02d817c81d57b2cb746bc4 Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.myumyun@sap.com>
Date: Wed, 24 Jun 2020 09:32:49 +0300
Subject: [PATCH] feat(ui5-shellbar): enable tooltips of custom icons (#1863)

Changes:
- enable tooltips for custom shellbar items
- set tooltips for the built-in icons: search, notifications, profile, products and oveflow
- fix count stopped displaying after replacing ui5-icon with ui5-button

FIXES: https://github.com/SAP/ui5-webcomponents/issues/1854
---
 packages/fiori/src/ShellBar.hbs         |  6 ++++++
 packages/fiori/src/ShellBar.js          |  1 +
 packages/fiori/src/themes/ShellBar.css  |  4 ++--
 packages/fiori/test/pages/ShellBar.html | 18 +++++++++---------
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs
index 4c78b82ca036..61f462df6004 100644
--- a/packages/fiori/src/ShellBar.hbs
+++ b/packages/fiori/src/ShellBar.hbs
@@ -92,6 +92,7 @@
 					data-ui5-notification-count="{{notificationCount}}"
 					@click={{_handleSearchIconPress}}
 					aria-label="{{_searchText}}"
+					title="{{_searchText}}"
 					._buttonAccInfo="{{accInfo.search}}"
 				></ui5-button>
 			{{/if}}
@@ -102,6 +103,7 @@
 					style="{{this.style}}"
 					class="{{this.classes}}"
 					icon="{{this.icon}}"
+					title="{{this.title}}"
 					data-count="{{this.count}}"
 					data-ui5-notification-count="{{../notificationCount}}"
 					data-ui5-external-action-item-id="{{this.refItemid}}"
@@ -119,6 +121,7 @@
 				data-ui5-notification-count="{{notificationCount}}"
 				@click={{_handleNotificationsPress}}
 				aria-label="{{_notificationsText}}"
+				title="{{_notificationsText}}"
 				._buttonAccInfo="{{accInfo.notifications}}"
 			></ui5-button>
 			{{/if}}
@@ -130,6 +133,7 @@
 				icon="sap-icon://overflow"
 				@click="{{_handleOverflowPress}}"
 				aria-label="{{_overflowText}}"
+				title="{{_overflowText}}"
 				._buttonAccInfo="{{accInfo.overflow}}"
 			></ui5-button>
 
@@ -140,6 +144,7 @@
 					@click={{_handleProfilePress}}
 					style="{{styles.items.profile}}"
 					aria-label="{{_profileText}}"
+					title="{{_profileText}}"
 					._buttonAccInfo="{{accInfo.profile}}"
 					class="ui5-shellbar-button ui5-shellbar-image-button">
 						<slot
@@ -157,6 +162,7 @@
 				data-ui5-text="Product Switch"
 				@click={{_handleProductSwitchPress}}
 				aria-label="{{_productsText}}"
+				title="{{_productsText}}"
 				._buttonAccInfo="{{accInfo.products}}"
 			></ui5-button>
 			{{/if}}
diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js
index fb84f73efde5..11b2a5f876c0 100644
--- a/packages/fiori/src/ShellBar.js
+++ b/packages/fiori/src/ShellBar.js
@@ -760,6 +760,7 @@ class ShellBar extends UI5Element {
 					show: true,
 					press: this._handleCustomActionPress.bind(this),
 					custom: true,
+					title: item.title,
 				};
 			}),
 			{
diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
index 2d644e953d05..b0e56c3c432d 100644
--- a/packages/fiori/src/themes/ShellBar.css
+++ b/packages/fiori/src/themes/ShellBar.css
@@ -326,7 +326,7 @@ slot[name="profile"] {
 }
 
 :host([notification-count]) .ui5-shellbar-bell-button::before,
-ui5-icon[data-count]::before {
+.ui5-shellbar-button[data-count]::before {
 	position: absolute;
 	width: auto;
 	height: 1rem;
@@ -350,7 +350,7 @@ ui5-icon[data-count]::before {
 	content: attr(data-ui5-notification-count);
 }
 
-ui5-icon[data-count]::before {
+.ui5-shellbar-button[data-count]::before {
 	content: attr(data-count);
 }
 
diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
index deb13b50ff67..27af99a4fe8f 100644
--- a/packages/fiori/test/pages/ShellBar.html
+++ b/packages/fiori/test/pages/ShellBar.html
@@ -69,15 +69,15 @@
 			secondary-title="Second Title"
 			id="shellbarwithitems"
 	>
-		<ui5-shellbar-item icon="accelerated" text="Hello World!"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="accept" text="Hello World!"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="alert" text="Hello World!"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="discussion" text="Hello World!" count="42"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="error" text="Hello World!"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="hello-world" text="UI5 Webcomponents"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="laptop" text="UI5 Webcomponents"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="nutrition-activity" text="UI5 Webcomponents"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="sound-loud" text="UI5 Webcomponents"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="accelerated" text="Hello World!" title="Schedule"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="accept" text="Hello World!" title="Approve"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="alert" text="Hello World!" title="Warning"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="discussion" text="Hello World!" count="42" title="42 Messages"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="error" text="Hello World!" title="Attention"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="hello-world" text="UI5 Webcomponents" title="hello world"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="laptop" text="UI5 Webcomponents" title="Laptop"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="nutrition-activity" text="UI5 Webcomponents" title="Apple"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="sound-loud" text="UI5 Webcomponents" title="Sound"></ui5-shellbar-item>
 	</ui5-shellbar>
 
 	<ui5-shellbar