Skip to content

Commit 0489673

Browse files
fifoosidfifoosid
authored
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")
1 parent 0c995b6 commit 0489673

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+618
-784
lines changed

‎docs/How To Use.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,14 @@ properties and attributes.
7979
An example of such web component is the `ui5-icon`:
8080

8181
```html
82-
<ui5-icon src="sap-icon://add"></ui5-icon>
82+
<ui5-icon name="add"></ui5-icon>
8383
```
8484

8585
The icon accepts no text or other HTML elements inside its opening and closing tags.
8686
Therefore, in the next example, the text inside the `<ui5-icon>` will be ignored.
8787

8888
```html
89-
<ui5-icon src="sap-icon://add">This is an icon</ui5-icon>
89+
<ui5-icon name="add">This is an icon</ui5-icon>
9090
```
9191

9292
Other UI5 Web Components, such as `<ui5-button>` accept text (and in addition HTML elements that make sense when writing text)

‎packages/fiori/src/ShellBar.hbs

+3-3
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,13 @@
4949

5050
<div class="ui5-shellbar-overflow-container-right-child">
5151
{{#each _itemsInfo}}
52-
{{#if this.src}}
52+
{{#if this.icon}}
5353
<ui5-icon
5454
tabindex="{{this._tabIndex}}"
5555
data-ui5-notification-count="{{../notificationCount}}"
5656
data-ui5-external-action-item-id="{{this.refItemid}}"
5757
class="{{this.classes}}"
58-
src="{{this.src}}"
58+
name="{{this.icon}}"
5959
id="{{this.id}}"
6060
style="{{this.style}}"
6161
@click={{this.press}}>
@@ -80,7 +80,7 @@
8080
{{#each _hiddenIcons}}
8181
<ui5-li
8282
data-ui5-external-action-item-id="{{this.refItemid}}"
83-
icon="{{this.src}}"
83+
icon="{{this.icon}}"
8484
type="Active"
8585
@ui5-_press="{{this.press}}"
8686
>{{this.text}}

‎packages/fiori/src/ShellBar.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -728,7 +728,7 @@ class ShellBar extends UI5Element {
728728

729729
const items = [
730730
{
731-
src: "sap-icon://search",
731+
icon: "search",
732732
text: "Search",
733733
classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
734734
priority: 4,
@@ -740,7 +740,7 @@ class ShellBar extends UI5Element {
740740
},
741741
...this.items.map((item, index) => {
742742
return {
743-
src: item.src,
743+
icon: item.icon,
744744
id: item._id,
745745
refItemid: item._id,
746746
text: item.text,
@@ -754,7 +754,7 @@ class ShellBar extends UI5Element {
754754
};
755755
}),
756756
{
757-
src: "sap-icon://bell",
757+
icon: "bell",
758758
text: "Notifications",
759759
classes: `${this.showNotifications ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-bell-button ui5-shellbar-button`,
760760
priority: 3,
@@ -766,7 +766,7 @@ class ShellBar extends UI5Element {
766766
_tabIndex: "-1",
767767
},
768768
{
769-
src: "sap-icon://overflow",
769+
icon: "overflow",
770770
text: "Overflow",
771771
classes: `${showOverflowButton ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button ui5-shellbar-button`,
772772
priority: 5,
@@ -792,7 +792,7 @@ class ShellBar extends UI5Element {
792792
_tabIndex: "-1",
793793
},
794794
{
795-
src: "sap-icon://grid",
795+
icon: "grid",
796796
text: "Product Switch",
797797
classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-button ui5-shellbar-button-product-switch`,
798798
priority: 2,

‎packages/fiori/src/ShellBarItem.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ const metadata = {
1111
tag: "ui5-shellbar-item",
1212
properties: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {
1313
/**
14-
* Defines the item source URI.
14+
* Defines the name of the item's icon.
1515
* @type {string}
1616
* @public
1717
*/
18-
src: {
18+
icon: {
1919
type: String,
2020
},
2121

@@ -28,8 +28,6 @@ const metadata = {
2828
text: {
2929
type: String,
3030
},
31-
32-
_icon: { type: HTMLElement },
3331
},
3432

3533
events: /** @lends sap.ui.webcomponents.main.ShellBarItem.prototype */ {

‎packages/fiori/test/pages/Components.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
<body>
2424

25-
<ui5-shellbar id="shellbar2" hidden><ui5-icon src="sap-icon://nav-back" slot="icon"></ui5-icon></ui5-shellbar>
25+
<ui5-shellbar id="shellbar2" hidden><ui5-icon name="nav-back" slot="icon"></ui5-icon></ui5-shellbar>
2626

2727
</body>
2828
</html>

‎packages/fiori/test/pages/ShellBar.html

+21-21
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,15 @@
7171
primary-title="Custom Actions"
7272
secondary-title="Second Title"
7373
>
74-
<ui5-shellbar-item src="sap-icon://accelerated" text="Hello World!"></ui5-shellbar-item>
75-
<ui5-shellbar-item src="sap-icon://accept" text="Hello World!"></ui5-shellbar-item>
76-
<ui5-shellbar-item src="sap-icon://alert" text="Hello World!"></ui5-shellbar-item>
77-
<ui5-shellbar-item src="sap-icon://discussion" text="Hello World!"></ui5-shellbar-item>
78-
<ui5-shellbar-item src="sap-icon://error" text="Hello World!"></ui5-shellbar-item>
79-
<ui5-shellbar-item src="sap-icon://hello-world" text="UI5 Webcomponents"></ui5-shellbar-item>
80-
<ui5-shellbar-item src="sap-icon://laptop" text="UI5 Webcomponents"></ui5-shellbar-item>
81-
<ui5-shellbar-item src="sap-icon://nutrition-activity" text="UI5 Webcomponents"></ui5-shellbar-item>
82-
<ui5-shellbar-item src="sap-icon://sound-loud" text="UI5 Webcomponents"></ui5-shellbar-item>
74+
<ui5-shellbar-item icon="accelerated" text="Hello World!"></ui5-shellbar-item>
75+
<ui5-shellbar-item icon="accept" text="Hello World!"></ui5-shellbar-item>
76+
<ui5-shellbar-item icon="alert" text="Hello World!"></ui5-shellbar-item>
77+
<ui5-shellbar-item icon="discussion" text="Hello World!"></ui5-shellbar-item>
78+
<ui5-shellbar-item icon="error" text="Hello World!"></ui5-shellbar-item>
79+
<ui5-shellbar-item icon="hello-world" text="UI5 Webcomponents"></ui5-shellbar-item>
80+
<ui5-shellbar-item icon="laptop" text="UI5 Webcomponents"></ui5-shellbar-item>
81+
<ui5-shellbar-item icon="nutrition-activity" text="UI5 Webcomponents"></ui5-shellbar-item>
82+
<ui5-shellbar-item icon="sound-loud" text="UI5 Webcomponents"></ui5-shellbar-item>
8383
</ui5-shellbar>
8484

8585
<ui5-shellbar
@@ -95,10 +95,10 @@
9595
show-notifications
9696
show-product-switch
9797
>
98-
<ui5-shellbar-item src="sap-icon://activities" text="Tasks"></ui5-shellbar-item>
99-
<ui5-shellbar-item src="sap-icon://thing-type" text="Messages"></ui5-shellbar-item>
100-
<ui5-shellbar-item src="sap-icon://action-settings" text="Settings"></ui5-shellbar-item>
101-
<ui5-shellbar-item src="sap-icon://sys-help" text="Help"></ui5-shellbar-item>
98+
<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
99+
<ui5-shellbar-item icon="thing-type" text="Messages"></ui5-shellbar-item>
100+
<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
101+
<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
102102

103103
<ui5-input slot="searchField"></ui5-input>
104104

@@ -118,10 +118,10 @@
118118
show-co-pilot
119119
>
120120

121-
<ui5-button icon="sap-icon://nav-back" slot="startButton" id="start-button"></ui5-button>
121+
<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
122122

123-
<ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
124-
<ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
123+
<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
124+
<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
125125

126126
<ui5-input slot="searchField"></ui5-input>
127127

@@ -139,11 +139,11 @@
139139

140140
<div class="popover-content">
141141
<ui5-list separators="None" >
142-
<ui5-li icon="sap-icon://sys-find">App Finder</ui5-li>
143-
<ui5-li icon="sap-icon://settings">Settings</ui5-li>
144-
<ui5-li icon="sap-icon://edit">Edit Home Page</ui5-li>
145-
<ui5-li icon="sap-icon://sys-help">Help</ui5-li>
146-
<ui5-li icon="sap-icon://log">Sign out</ui5-li>
142+
<ui5-li icon="sys-find">App Finder</ui5-li>
143+
<ui5-li icon="settings">Settings</ui5-li>
144+
<ui5-li icon="edit">Edit Home Page</ui5-li>
145+
<ui5-li icon="sys-help">Help</ui5-li>
146+
<ui5-li icon="log">Sign out</ui5-li>
147147
</ui5-list>
148148
</div>
149149
</ui5-popover>

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

+17-17
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ <h3>ShellBar</h3>
2323
show-co-pilot
2424
>
2525

26-
<ui5-button icon="sap-icon://nav-back" slot="startButton"></ui5-button>
26+
<ui5-button icon="nav-back" slot="startButton"></ui5-button>
2727

28-
<ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
29-
<ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
28+
<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
29+
<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
3030

3131
<ui5-input slot="searchField"></ui5-input>
3232

@@ -44,11 +44,11 @@ <h3>ShellBar</h3>
4444

4545
<div class="action-popover-content" style="margin-top: 1rem;">
4646
<ui5-list separators="None" >
47-
<ui5-li icon="sap-icon://sys-find">App Finder</ui5-li>
48-
<ui5-li icon="sap-icon://settings">Settings</ui5-li>
49-
<ui5-li icon="sap-icon://edit">Edit Home Page</ui5-li>
50-
<ui5-li icon="sap-icon://sys-help">Help</ui5-li>
51-
<ui5-li icon="sap-icon://log">Sign out</ui5-li>
47+
<ui5-li icon="sys-find">App Finder</ui5-li>
48+
<ui5-li icon="settings">Settings</ui5-li>
49+
<ui5-li icon="edit">Edit Home Page</ui5-li>
50+
<ui5-li icon="sys-help">Help</ui5-li>
51+
<ui5-li icon="log">Sign out</ui5-li>
5252
</ui5-list>
5353
</div>
5454
</ui5-popover>
@@ -72,10 +72,10 @@ <h3>ShellBar</h3>
7272
show-co-pilot
7373
>
7474

75-
<ui5-button icon="sap-icon://nav-back" slot="startButton"></ui5-button>
75+
<ui5-button icon="nav-back" slot="startButton"></ui5-button>
7676

77-
<ui5-shellbar-item id="disc" src="sap-icon://disconnected" text="Disconnect"></ui5-shellbar-item>
78-
<ui5-shellbar-item id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
77+
<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
78+
<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
7979

8080
<ui5-input slot="searchField"></ui5-input>
8181

@@ -94,11 +94,11 @@ <h3>ShellBar</h3>
9494

9595
<div class="popover-content">
9696
<ui5-list separators="None" >
97-
<ui5-li icon="sap-icon://sys-find">App Finder</ui5-li>
98-
<ui5-li icon="sap-icon://settings">Settings</ui5-li>
99-
<ui5-li icon="sap-icon://edit">Edit Home Page</ui5-li>
100-
<ui5-li icon="sap-icon://sys-help">Help</ui5-li>
101-
<ui5-li icon="sap-icon://log">Sign out</ui5-li>
97+
<ui5-li icon="sys-find">App Finder</ui5-li>
98+
<ui5-li icon="settings">Settings</ui5-li>
99+
<ui5-li icon="edit">Edit Home Page</ui5-li>
100+
<ui5-li icon="sys-help">Help</ui5-li>
101+
<ui5-li icon="log">Sign out</ui5-li>
102102
</ui5-list>
103103
</div>
104104
</ui5-popover>
@@ -122,7 +122,7 @@ <h3>Basic ShellBar</h3>
122122
logo="../../assets/images/sap-logo-svg.svg"
123123
>
124124

125-
<ui5-button icon="sap-icon://nav-back" slot="startButton"></ui5-button>
125+
<ui5-button icon="nav-back" slot="startButton"></ui5-button>
126126

127127
</ui5-shellbar>
128128
</div>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,8 @@ describe("Component Behaviour", () => {
107107
assert.strictEqual(productSwitchIcon.isDisplayed(), true, "Product switch should be visible");
108108
assert.strictEqual(overflowPopover.isDisplayedInViewport(), true, "Overflow popover should be visible");
109109
assert.strictEqual(listItemsCount, 2, "2 actions should overflow");
110-
assert.strictEqual(overflowPopoverItem1.getProperty("icon"), customActionIcon1.getProperty("src"), "Popover items have same sources as corresponding icons");
111-
assert.strictEqual(overflowPopoverItem2.getProperty("icon"), customActionIcon2.getProperty("src"), "Popover items have same sources as corresponding icons");
110+
assert.strictEqual(overflowPopoverItem1.getProperty("icon"), customActionIcon1.getProperty("name"), "Popover items have same sources as corresponding icons");
111+
assert.strictEqual(overflowPopoverItem2.getProperty("icon"), customActionIcon2.getProperty("name"), "Popover items have same sources as corresponding icons");
112112

113113
});
114114

‎packages/main/src/Button.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
{{#if icon}}
2121
<ui5-icon
2222
class="ui5-button-icon"
23-
src="{{icon}}"
23+
name="{{icon}}"
2424
show-tooltip={{iconOnly}}
2525
></ui5-icon>
2626
{{/if}}

‎packages/main/src/Button.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const metadata = {
5555
* <br><br>
5656
* Example:
5757
* <br>
58-
* <pre>ui5-button icon="sap-icon://palette"</pre>
58+
* <pre>ui5-button icon="palette"</pre>
5959
*
6060
* 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>.
6161
*

‎packages/main/src/CalendarHeader.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
>
1111
<ui5-icon
1212
class="ui5-calheader-arrowicon"
13-
src="{{_btnPrev.icon}}"
13+
name="{{_btnPrev.icon}}"
1414
>
1515
</ui5-icon>
1616
</div>
@@ -47,7 +47,7 @@
4747
>
4848
<ui5-icon
4949
class="ui5-calheader-arrowicon"
50-
src="{{_btnNext.icon}}"
50+
name="{{_btnNext.icon}}"
5151
>
5252
</ui5-icon>
5353

‎packages/main/src/CalendarHeader.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,10 @@ class CalendarHeader extends UI5Element {
6565
constructor() {
6666
super();
6767
this._btnPrev = {};
68-
this._btnPrev.icon = "sap-icon://slim-arrow-left";
68+
this._btnPrev.icon = "slim-arrow-left";
6969

7070
this._btnNext = {};
71-
this._btnNext.icon = "sap-icon://slim-arrow-right";
71+
this._btnNext.icon = "slim-arrow-right";
7272

7373
this._btn1 = {};
7474
this._btn1.type = ButtonDesign.Transparent;

‎packages/main/src/Card.hbs

+3-8
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,10 @@
1313
tabindex="{{tabindex}}"
1414
role="group"
1515
aria-labelledby="{{_id}}-heading {{_id}}-subtitle">
16-
{{#if image}}
17-
<img src="{{avatar}}" aria-label="Avatar" class="ui5-card-avatar ui5-card-header-img">
18-
{{/if}}
1916

20-
{{#if icon}}
21-
<span role="img" aria-label="{{ariaCardAvatarLabel}}" class="ui5-card-avatar">
22-
<ui5-icon class="ui5-card-header-icon" src="{{avatar}}"></ui5-icon>
23-
</span>
24-
{{/if}}
17+
<div class="ui5-card-avatar" aria-label="{{ariaCardAvatarLabel}}">
18+
<slot name="avatar"></slot>
19+
</div>
2520

2621
<div class="ui5-card-header-text">
2722
{{#if heading}}

‎packages/main/src/Card.js

+17-14
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,20 @@ const metadata = {
2828
propertyName: "content",
2929
type: HTMLElement,
3030
},
31+
32+
/**
33+
* Defines the visual representation in the header of the card.
34+
* Supports images and icons.
35+
* <b>Note:</b>
36+
* SAP-icons font provides numerous options. To find all the available icons, see the
37+
* <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>.
38+
* @type {HTMLElement[]}
39+
* @slot
40+
* @public
41+
*/
42+
avatar: {
43+
type: HTMLElement,
44+
},
3145
},
3246
properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
3347

@@ -72,19 +86,6 @@ const metadata = {
7286
type: Boolean,
7387
},
7488

75-
/**
76-
* Defines image source URI or built-in icon font URI.
77-
* <br><br>
78-
* <b>Note:</b>
79-
* SAP-icons font provides numerous options. To find all the available icons, see the
80-
* <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>.
81-
* @type {string}
82-
* @public
83-
*/
84-
avatar: {
85-
type: String,
86-
},
87-
8889
_headerActive: {
8990
type: Boolean,
9091
noAttribute: true,
@@ -113,7 +114,9 @@ const metadata = {
113114
* tile with separate header and content areas.
114115
* The content area of a <code>ui5-card</code> can be arbitrary HTML content.
115116
* The header can be used through several properties, such as:
116-
* <code>heading</code>, <code>subtitle</code>, <code>status</code> and <code>avatar</code>.
117+
* <code>heading</code>, <code>subtitle</code>, <code>status</code>
118+
* and a slot:
119+
* <code>avatar</code>.
117120
*
118121
* <h3>Keyboard handling</h3>
119122
* In case you enable <code>headerInteractive</code> property, you can press the <code>ui5-card</code> header by Space and Enter keys.

0 commit comments

Comments
 (0)