feat(ui5-shellbar-item): introduce count property (#1221)

Author: fifoosid

packages/fiori/src/ShellBar.hbs

@@ -47,6 +47,7 @@
 				{{#if this.icon}}
 					<ui5-icon
 						tabindex="{{this._tabIndex}}"
+						data-count="{{this.count}}"
 						data-ui5-notification-count="{{../notificationCount}}"
 						data-ui5-external-action-item-id="{{this.refItemid}}"
 						class="{{this.classes}}"

packages/fiori/src/ShellBar.js

@@ -759,6 +759,7 @@ class ShellBar extends UI5Element {
 				return {
 					icon: item.icon,
 					id: item._id,
+					count: item.count || undefined,
 					refItemid: item._id,
 					text: item.text,
 					classes: "ui5-shellbar-custom-item ui5-shellbar-button",

packages/fiori/src/ShellBarItem.js

@@ -22,12 +22,23 @@ const metadata = {
 		/**
 		 * Defines the item text.
 		 * @type {string}
-		 * @defaultvalue: ""
+		 * @defaulValue ""
 		 * @public
 		 */
 		text: {
 			type: String,
 		},
+
+		/**
+		 * Defines the count displayed in the top-right corner.
+		 * @type {string}
+		 * @defaultValue ""
+		 * @since 1.0.0-rc.6
+		 * @public
+		 */
+		count: {
+			type: String,
+		},
 	},
 
 	events: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {

packages/fiori/src/themes/ShellBar.css

@@ -303,8 +303,8 @@
 	position: relative;
 }
 
-:host([notification-count]) .ui5-shellbar-bell-button::before {
-	content: attr(data-ui5-notification-count);
+:host([notification-count]) .ui5-shellbar-bell-button::before,
+ui5-icon[data-count]::before {
 	position: absolute;
 	width: auto;
 	height: 1rem;
@@ -324,6 +324,14 @@
 	box-sizing: border-box;
 }
 
+:host([notification-count]) .ui5-shellbar-bell-button::before {
+	content: attr(data-ui5-notification-count);
+}
+
+ui5-icon[data-count]::before {
+	content: attr(data-count);
+}
+
 .ui5-shellbar-menu-button {
 	margin-left: 0.5rem;
 }

packages/fiori/test/pages/ShellBar.html

@@ -8,7 +8,7 @@
 
     <script data-ui5-config type="application/json">
         {
-            "rtl": false,
+            "rtl": false
         }
     </script>
 
@@ -63,11 +63,12 @@
         class="shellbar-example"
         primary-title="Custom Actions"
         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!"></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>

packages/fiori/test/samples/ShellBar.sample.html

@@ -28,7 +28,7 @@ <h3>ShellBar</h3>
 		<ui5-button icon="nav-back" slot="startButton"></ui5-button>
 
 		<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
-		<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
+		<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls" count="4"></ui5-shellbar-item>
 
 		<ui5-input slot="searchField"></ui5-input>
 
@@ -77,7 +77,7 @@ <h3>ShellBar</h3>
 	<ui5-button icon="nav-back" slot="startButton"></ui5-button>
 
 	<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
-	<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
+	<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls" count="4"></ui5-shellbar-item>
 
 	<ui5-input slot="searchField"></ui5-input>
 

packages/fiori/test/specs/ShellBar.spec.js

@@ -1,8 +1,18 @@
+
 const assert = require("chai").assert;
 
 describe("Component Behavior", () => {
 	browser.url("http://localhost:8081/test-resources/pages/ShellBar.html");
 
+	describe("ui5-shellbar-item", () => {
+		it("tests count property", () => {
+			const shellbar = browser.$("#shellbarwithitems");
+			const icon = shellbar.shadow$("ui5-icon[data-count]");
+
+			assert.strictEqual(icon.getAttribute("data-count"), '42', "Count property propagates to ui5-icon");
+		})
+	});
+
 	describe("Responsiveness", () => {
 
 		it("tests XXL Breakpoint 1920px", () => {