Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 13 commits into from
Nov 18, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3ec9d8b
feat(ui5-icon): change src property to name
fifoosid Nov 13, 2019
c3adfce
fix eslint
fifoosid Nov 13, 2019
9b09af1
fix failing test
fifoosid Nov 14, 2019
9c52d34
Merge branch 'master' into icon-refactoring
vladitasev Nov 15, 2019
1245982
fix shellbar conflict problems
vladitasev Nov 15, 2019
6dce935
fix Icon.html
vladitasev Nov 15, 2019
13f6021
fix icon docs
vladitasev Nov 15, 2019
526f908
fix icon docs
vladitasev Nov 15, 2019
1ef4f94
fix shellbar
vladitasev Nov 15, 2019
49727d5
fix again
vladitasev Nov 15, 2019
bde90c4
fix cards in kitchen.html
vladitasev Nov 15, 2019
a9e0ad4
Merge remote-tracking branch 'origin/master' into icon-refactoring
vladitasev Nov 15, 2019
6bd33e6
fix shellbar tests
fifoosid Nov 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/How To Use.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
6 changes: 3 additions & 3 deletions packages/fiori/src/ShellBar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}>
Expand All @@ -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}}
Expand Down
10 changes: 5 additions & 5 deletions packages/fiori/src/ShellBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down
6 changes: 2 additions & 4 deletions packages/fiori/src/ShellBarItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},

Expand All @@ -28,8 +28,6 @@ const metadata = {
text: {
type: String,
},

_icon: { type: HTMLElement },
},

events: /** @lends sap.ui.webcomponents.main.ShellBarItem.prototype */ {
Expand Down
2 changes: 1 addition & 1 deletion packages/fiori/test/pages/Components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
42 changes: 21 additions & 21 deletions packages/fiori/test/pages/ShellBar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>
Expand Down
34 changes: 17 additions & 17 deletions packages/fiori/test/samples/ShellBar.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand All @@ -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>

Expand All @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/fiori/test/specs/ShellBar.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");

});

Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Button.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
{{#if icon}}
<ui5-icon
class="ui5-button-icon"
src="{{icon}}"
name="{{icon}}"
show-tooltip={{iconOnly}}
></ui5-icon>
{{/if}}
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>.
*
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/CalendarHeader.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
>
<ui5-icon
class="ui5-calheader-arrowicon"
src="{{_btnPrev.icon}}"
name="{{_btnPrev.icon}}"
>
</ui5-icon>
</div>
Expand Down Expand Up @@ -47,7 +47,7 @@
>
<ui5-icon
class="ui5-calheader-arrowicon"
src="{{_btnNext.icon}}"
name="{{_btnNext.icon}}"
>
</ui5-icon>

Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/CalendarHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 3 additions & 8 deletions packages/main/src/Card.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
31 changes: 17 additions & 14 deletions packages/main/src/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */ {

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Expand Down
Loading