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.

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

Conversation

fifoosid
Copy link
Contributor

@fifoosid fifoosid commented Nov 13, 2019

Icons are no longer referenced by src, but rather just by name.

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).
Example:
<ui5-card avatar="sap-icon://add"></ui5-card>
becomes:
<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")

@@ -728,7 +728,7 @@ class ShellBar extends UI5Element {

const items = [
{
src: "sap-icon://search",
src: "search",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

src now means icon, otherwise very confusing

@@ -55,7 +55,7 @@
data-ui5-notification-count="{{../notificationCount}}"
data-ui5-external-action-item-id="{{this.refItemid}}"
class="{{this.classes}}"
src="{{this.src}}"
name="{{this.src}}"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as below, a better option is name="{{this.icon}}"

pskelin
pskelin previously approved these changes Nov 15, 2019
vladitasev
vladitasev previously approved these changes Nov 15, 2019
@fifoosid fifoosid merged commit 0489673 into master Nov 18, 2019
@fifoosid fifoosid deleted the icon-refactoring branch November 18, 2019 11:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants