refactor(ui5-li): remove image property and rename imageContent slot
Removes the image property of the ui5-li and renames the imageContent slot is renamed to image
BREAKING CHANGE: The image property of the ui5-li is removed and the imageContent slot is renamed to image.
If you have previously used the image property:
<ui5-li image="./img/HT-1022.jpg">Standard List Item</ui5-li>
it will no longer work for the component.
If you have previously used the imageContent slot:
<ui5-li> Avatar inside imageContent slot
<ui5-avatar slot="imageContent" shape="Square" initials="ABC" color-scheme="Accent2"></ui5-avatar>
</ui5-li>
Now use image instead:
<ui5-li> Avatar inside image slot
<ui5-avatar slot="image" shape="Square" initials="ABC" color-scheme="Accent2"></ui5-avatar>
</ui5-li>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
Noticed that the suggestion item is composing the list item and it uses the image proeprty and it seems that until it's an abstract item, this change could not be directly consumed there.
Actually, the InputPopover.hbs renders ui5-li-suggestion-items from either an ui5-li's data or ui5-suggestion-item's data. I'm not sure the image slot can be transfered in such a way to the ui5-li-suggestion-item dom. I could be wrong thought.
We can add somehting like this to the InputPopover.hbs:
data-ui5-key="{{key}}"
>
{{#if this.image}}
<ui5-avatar shape="Square" slot="image">
<img src="{{this.image}}"/>
</ui5-avatar>
{{/if}}
{{{ this.text }}}
But this will only work for the ui5-suggestion-item as for the ui5-li this image property will be an array of the slotted nodes.