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: #1854
SAP · Jun 24, 2020 · 3aae538 · 3aae538
1 parent bd53f0b
commit 3aae538
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git 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
@@ -759,6 +759,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
@@ -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
@@ -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