feat(ui5-icon): change src property to name (#928)

BREAKING CHANGE: @ui5/webcomponents/dist/Icon.js The src property was renamed to name and accepts icon name (such as "add") instead of icon src (such as "sap-icon://add"). Note: the src property will continue to work until the next release due to the impact of the change, but will produce a warning in the console. @ui5/webcomponents/dist/Card.js The avatar property was removed. Use the avatar slot instead - pass an icon(<ui5-icon) or an image(<img). Before: <ui5-card avatar="sap-icon://add"></ui5-card> After: <ui5-card><ui5-icon name="add" slot="avatar"></ui5-icon></ui5-card> and respectively: <ui5-card avatar="http://url/to/my/image"></ui5-card> becomes: <ui5-card><img src="http://url/to/my/image" slot="avatar"/></ui5-card> @ui5/webcomponents-fiori/dist/ShellBarItem.js The src property was renamed to icon and accepts icon name (such as "add") instead of icon src (such as "sap-icon://add")
SAP · Nov 18, 2019 · 0489673 · 0489673
1 parent 0c995b6
commit 0489673
Show file tree

Hide file tree

Showing 63 changed files with 618 additions and 784 deletions.
diff --git a/docs/How To Use.md b/docs/How To Use.md
@@ -79,14 +79,14 @@ properties and attributes.
 An example of such web component is the `ui5-icon`:
 
 ```html
-<ui5-icon src="sap-icon://add"></ui5-icon>
+<ui5-icon name="add"></ui5-icon>
 ```
 
 The icon accepts no text or other HTML elements inside its opening and closing tags.
 Therefore, in the next example, the text inside the `<ui5-icon>` will be ignored.
 
 ```html
-<ui5-icon src="sap-icon://add">This is an icon</ui5-icon>
+<ui5-icon name="add">This is an icon</ui5-icon>
 ```
 
 Other UI5 Web Components, such as `<ui5-button>` accept text (and in addition HTML elements that make sense when writing text)

diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs
@@ -49,13 +49,13 @@
 
 		<div class="ui5-shellbar-overflow-container-right-child">
 			{{#each _itemsInfo}}
-				{{#if this.src}}
+				{{#if this.icon}}
 					<ui5-icon
 						tabindex="{{this._tabIndex}}"
 						data-ui5-notification-count="{{../notificationCount}}"
 						data-ui5-external-action-item-id="{{this.refItemid}}"
 						class="{{this.classes}}"
-						src="{{this.src}}"
+						name="{{this.icon}}"
 						id="{{this.id}}"
 						style="{{this.style}}"
 						@click={{this.press}}>
@@ -80,7 +80,7 @@
 			{{#each _hiddenIcons}}
 				<ui5-li
 					data-ui5-external-action-item-id="{{this.refItemid}}"
-					icon="{{this.src}}"
+					icon="{{this.icon}}"
 					type="Active"
 					@ui5-_press="{{this.press}}"
 				>{{this.text}}

diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js
@@ -728,7 +728,7 @@ class ShellBar extends UI5Element {
 
 		const items = [
 			{
-				src: "sap-icon://search",
+				icon: "search",
 				text: "Search",
 				classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
 				priority: 4,
@@ -740,7 +740,7 @@ class ShellBar extends UI5Element {
 			},
 			...this.items.map((item, index) => {
 				return {
-					src: item.src,
+					icon: item.icon,
 					id: item._id,
 					refItemid: item._id,
 					text: item.text,
@@ -754,7 +754,7 @@ class ShellBar extends UI5Element {
 				};
 			}),
 			{
-				src: "sap-icon://bell",
+				icon: "bell",
 				text: "Notifications",
 				classes: `${this.showNotifications ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-bell-button ui5-shellbar-button`,
 				priority: 3,
@@ -766,7 +766,7 @@ class ShellBar extends UI5Element {
 				_tabIndex: "-1",
 			},
 			{
-				src: "sap-icon://overflow",
+				icon: "overflow",
 				text: "Overflow",
 				classes: `${showOverflowButton ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button ui5-shellbar-button`,
 				priority: 5,
@@ -792,7 +792,7 @@ class ShellBar extends UI5Element {
 				_tabIndex: "-1",
 			},
 			{
-				src: "sap-icon://grid",
+				icon: "grid",
 				text: "Product Switch",
 				classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-button ui5-shellbar-button-product-switch`,
 				priority: 2,

diff --git a/packages/fiori/src/ShellBarItem.js b/packages/fiori/src/ShellBarItem.js
@@ -11,11 +11,11 @@ const metadata = {
 	tag: "ui5-shellbar-item",
 	properties: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {
 		/**
-		 * Defines the item source URI.
+		 * Defines the name of the item's icon.
 		 * @type {string}
 		 * @public
 		 */
-		src: {
+		icon: {
 			type: String,
 		},
 
@@ -28,8 +28,6 @@ const metadata = {
 		text: {
 			type: String,
 		},
-
-		_icon: { type: HTMLElement },
 	},
 
 	events: /** @lends sap.ui.webcomponents.main.ShellBarItem.prototype */ {

diff --git a/packages/fiori/test/pages/Components.html b/packages/fiori/test/pages/Components.html
@@ -22,7 +22,7 @@
 
 <body>
 
-    <ui5-shellbar id="shellbar2" hidden><ui5-icon src="sap-icon://nav-back" slot="icon"></ui5-icon></ui5-shellbar>
+    <ui5-shellbar id="shellbar2" hidden><ui5-icon name="nav-back" slot="icon"></ui5-icon></ui5-shellbar>
 
 </body>
 </html>
diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
@@ -71,15 +71,15 @@
         primary-title="Custom Actions"
         secondary-title="Second Title"
 >
-    <ui5-shellbar-item src="sap-icon://accelerated" text="Hello World!"></ui5-shellbar-item>
-    <ui5-shellbar-item src="sap-icon://accept" text="Hello World!"></ui5-shellbar-item>
-    <ui5-shellbar-item src="sap-icon://alert" text="Hello World!"></ui5-shellbar-item>
-    <ui5-shellbar-item src="sap-icon://discussion" text="Hello World!"></ui5-shellbar-item>
-    <ui5-shellbar-item src="sap-icon://error" text="Hello World!"></ui5-shellbar-item>
-    <ui5-shellbar-item src="sap-icon://hello-world" text="UI5 Webcomponents"></ui5-shellbar-item>
-    <ui5-shellbar-item src="sap-icon://laptop" text="UI5 Webcomponents"></ui5-shellbar-item>
-    <ui5-shellbar-item src="sap-icon://nutrition-activity" text="UI5 Webcomponents"></ui5-shellbar-item>
-    <ui5-shellbar-item src="sap-icon://sound-loud" text="UI5 Webcomponents"></ui5-shellbar-item>
+    <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="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>
 
 <ui5-shellbar
@@ -95,10 +95,10 @@
         show-notifications
         show-product-switch
 >
-    <ui5-shellbar-item src="sap-icon://activities" text="Tasks"></ui5-shellbar-item>
-    <ui5-shellbar-item src="sap-icon://thing-type" text="Messages"></ui5-shellbar-item>
-    <ui5-shellbar-item src="sap-icon://action-settings" text="Settings"></ui5-shellbar-item>
-    <ui5-shellbar-item src="sap-icon://sys-help" text="Help"></ui5-shellbar-item>
+    <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>
+    <ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
 
     <ui5-input slot="searchField"></ui5-input>
 
@@ -118,10 +118,10 @@
         show-co-pilot
 >
 
-    <ui5-button icon="sap-icon://nav-back" slot="startButton" id="start-button"></ui5-button>
+    <ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
 
-    <ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
-    <ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
+    <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-input slot="searchField"></ui5-input>
 
@@ -139,11 +139,11 @@
 
     <div class="popover-content">
         <ui5-list separators="None" >
-            <ui5-li icon="sap-icon://sys-find">App Finder</ui5-li>
-            <ui5-li icon="sap-icon://settings">Settings</ui5-li>
-            <ui5-li icon="sap-icon://edit">Edit Home Page</ui5-li>
-            <ui5-li icon="sap-icon://sys-help">Help</ui5-li>
-            <ui5-li icon="sap-icon://log">Sign out</ui5-li>
+            <ui5-li icon="sys-find">App Finder</ui5-li>
+            <ui5-li icon="settings">Settings</ui5-li>
+            <ui5-li icon="edit">Edit Home Page</ui5-li>
+            <ui5-li icon="sys-help">Help</ui5-li>
+            <ui5-li icon="log">Sign out</ui5-li>
         </ui5-list>
     </div>
 </ui5-popover>

diff --git a/packages/fiori/test/samples/ShellBar.sample.html b/packages/fiori/test/samples/ShellBar.sample.html
@@ -23,10 +23,10 @@ <h3>ShellBar</h3>
 		show-co-pilot
 	>
 
-		<ui5-button icon="sap-icon://nav-back" slot="startButton"></ui5-button>
+		<ui5-button icon="nav-back" slot="startButton"></ui5-button>
 
-		<ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
-		<ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
+		<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-input slot="searchField"></ui5-input>
 
@@ -44,11 +44,11 @@ <h3>ShellBar</h3>
 
 		<div class="action-popover-content" style="margin-top: 1rem;">
 			<ui5-list separators="None" >
-				<ui5-li icon="sap-icon://sys-find">App Finder</ui5-li>
-				<ui5-li icon="sap-icon://settings">Settings</ui5-li>
-				<ui5-li icon="sap-icon://edit">Edit Home Page</ui5-li>
-				<ui5-li icon="sap-icon://sys-help">Help</ui5-li>
-				<ui5-li icon="sap-icon://log">Sign out</ui5-li>
+				<ui5-li icon="sys-find">App Finder</ui5-li>
+				<ui5-li icon="settings">Settings</ui5-li>
+				<ui5-li icon="edit">Edit Home Page</ui5-li>
+				<ui5-li icon="sys-help">Help</ui5-li>
+				<ui5-li icon="log">Sign out</ui5-li>
 			</ui5-list>
 		</div>
 	</ui5-popover>
@@ -72,10 +72,10 @@ <h3>ShellBar</h3>
 	show-co-pilot
 >
 
-	<ui5-button icon="sap-icon://nav-back" slot="startButton"></ui5-button>
+	<ui5-button icon="nav-back" slot="startButton"></ui5-button>
 
-	<ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
-	<ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
+	<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-input slot="searchField"></ui5-input>
 
@@ -94,11 +94,11 @@ <h3>ShellBar</h3>
 
 	<div class="popover-content">
 		<ui5-list separators="None" >
-			<ui5-li icon="sap-icon://sys-find">App Finder</ui5-li>
-			<ui5-li icon="sap-icon://settings">Settings</ui5-li>
-			<ui5-li icon="sap-icon://edit">Edit Home Page</ui5-li>
-			<ui5-li icon="sap-icon://sys-help">Help</ui5-li>
-			<ui5-li icon="sap-icon://log">Sign out</ui5-li>
+			<ui5-li icon="sys-find">App Finder</ui5-li>
+			<ui5-li icon="settings">Settings</ui5-li>
+			<ui5-li icon="edit">Edit Home Page</ui5-li>
+			<ui5-li icon="sys-help">Help</ui5-li>
+			<ui5-li icon="log">Sign out</ui5-li>
 		</ui5-list>
 	</div>
 </ui5-popover>
@@ -122,7 +122,7 @@ <h3>Basic ShellBar</h3>
 			logo="../../assets/images/sap-logo-svg.svg"
 		>
 
-		<ui5-button icon="sap-icon://nav-back" slot="startButton"></ui5-button>
+		<ui5-button icon="nav-back" slot="startButton"></ui5-button>
 
 		</ui5-shellbar>
 	</div>

diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js
@@ -107,8 +107,8 @@ describe("Component Behaviour", () => {
 			assert.strictEqual(productSwitchIcon.isDisplayed(), true, "Product switch should be visible");
 			assert.strictEqual(overflowPopover.isDisplayedInViewport(), true, "Overflow popover should be visible");
 			assert.strictEqual(listItemsCount, 2, "2 actions should overflow");
-			assert.strictEqual(overflowPopoverItem1.getProperty("icon"), customActionIcon1.getProperty("src"), "Popover items have same sources as corresponding icons");
-			assert.strictEqual(overflowPopoverItem2.getProperty("icon"), customActionIcon2.getProperty("src"), "Popover items have same sources as corresponding icons");
+			assert.strictEqual(overflowPopoverItem1.getProperty("icon"), customActionIcon1.getProperty("name"), "Popover items have same sources as corresponding icons");
+			assert.strictEqual(overflowPopoverItem2.getProperty("icon"), customActionIcon2.getProperty("name"), "Popover items have same sources as corresponding icons");
 
 		});
 

diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
@@ -20,7 +20,7 @@
 		{{#if icon}}
 			<ui5-icon
 				class="ui5-button-icon"
-				src="{{icon}}"
+				name="{{icon}}"
 				show-tooltip={{iconOnly}}
 			></ui5-icon>
 		{{/if}}

diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -55,7 +55,7 @@ const metadata = {
 		 * <br><br>
 		 * Example:
 		 * <br>
-		 * <pre>ui5-button icon="sap-icon://palette"</pre>
+		 * <pre>ui5-button icon="palette"</pre>
 		 *
 		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *

diff --git a/packages/main/src/CalendarHeader.hbs b/packages/main/src/CalendarHeader.hbs
@@ -10,7 +10,7 @@
 	>
 		<ui5-icon
 			class="ui5-calheader-arrowicon"
-			src="{{_btnPrev.icon}}"
+			name="{{_btnPrev.icon}}"
 		>
 		</ui5-icon>
 	</div>
@@ -47,7 +47,7 @@
 	>
 		<ui5-icon
 			class="ui5-calheader-arrowicon"
-			src="{{_btnNext.icon}}"
+			name="{{_btnNext.icon}}"
 		>
 		</ui5-icon>
 

diff --git a/packages/main/src/CalendarHeader.js b/packages/main/src/CalendarHeader.js
@@ -65,10 +65,10 @@ class CalendarHeader extends UI5Element {
 	constructor() {
 		super();
 		this._btnPrev = {};
-		this._btnPrev.icon = "sap-icon://slim-arrow-left";
+		this._btnPrev.icon = "slim-arrow-left";
 
 		this._btnNext = {};
-		this._btnNext.icon = "sap-icon://slim-arrow-right";
+		this._btnNext.icon = "slim-arrow-right";
 
 		this._btn1 = {};
 		this._btn1.type = ButtonDesign.Transparent;

diff --git a/packages/main/src/Card.hbs b/packages/main/src/Card.hbs
@@ -13,15 +13,10 @@
 			tabindex="{{tabindex}}"
 			role="group"
 			aria-labelledby="{{_id}}-heading {{_id}}-subtitle">
-			{{#if image}}
-				<img src="{{avatar}}" aria-label="Avatar" class="ui5-card-avatar ui5-card-header-img">
-			{{/if}}
 
-			{{#if icon}}
-				<span role="img" aria-label="{{ariaCardAvatarLabel}}" class="ui5-card-avatar">
-					<ui5-icon class="ui5-card-header-icon" src="{{avatar}}"></ui5-icon>
-				</span>
-			{{/if}}
+			<div class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
+				<slot name="avatar"></slot>
+			</div>
 
 			<div class="ui5-card-header-text">
 				{{#if heading}}

diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js
@@ -28,6 +28,20 @@ const metadata = {
 			propertyName: "content",
 			type: HTMLElement,
 		},
+
+		/**
+		 * Defines the visual representation in the header of the card.
+		 * Supports images and icons.
+		 * <b>Note:</b>
+		 * SAP-icons font provides numerous options. To find all the available icons, see the
+		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		avatar: {
+			type: HTMLElement,
+		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
@@ -72,19 +86,6 @@ const metadata = {
 			type: Boolean,
 		},
 
-		/**
-		 * Defines image source URI or built-in icon font URI.
-		 * <br><br>
-		 * <b>Note:</b>
-		 * SAP-icons font provides numerous options. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
-		 * @type {string}
-		 * @public
-		 */
-		avatar: {
-			type: String,
-		},
-
 		_headerActive: {
 			type: Boolean,
 			noAttribute: true,
@@ -113,7 +114,9 @@ const metadata = {
  * tile with separate header and content areas.
  * The content area of a <code>ui5-card</code> can be arbitrary HTML content.
  * The header can be used through several properties, such as:
- * <code>heading</code>, <code>subtitle</code>, <code>status</code> and <code>avatar</code>.
+ * <code>heading</code>, <code>subtitle</code>, <code>status</code>
+ * and a slot:
+ * <code>avatar</code>.
  *
  * <h3>Keyboard handling</h3>
  * In case you enable <code>headerInteractive</code> property, you can press the <code>ui5-card</code> header by Space and Enter keys.