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-li): Add "image" slot #2052

Closed
wants to merge 1 commit into from
Closed

feat(ui5-li): Add "image" slot #2052

wants to merge 1 commit into from

Conversation

ilhan007
Copy link
Member

@ilhan007 ilhan007 commented Jul 31, 2020

Add new slot to enable users control the display of the image, to stretch or scale. We always render the image as square and portrait oriented images do not look ok. Now, the user can use the ui5-avatar and make use of the property "image-fit-type"=Cover or Contain and the shape="Square|Circle", or use own img tag.

FIXES: #2045

BREAKING CHANGE: The "image" property is removed, use the "image" slot instead

<ui5-li icon="navigation-right-arrow" icon-end>
   Jennifer
   <ui5-avatar image-fit-type="Contain" image="../../../assets/images/avatars/woman_avatar_3.png" slot="image"></ui5-avatar>
</ui5-li>

Screenshot 2020-07-31 at 4 07 05 PM

Add new slot to enable users control the display of the image, to stretch or scale.

FIXES: #2045

BREAKING CHANGE: The "image" property is removed, use the "image" slot instead
@fifoosid
Copy link
Contributor

How about just adding object-fit to the current image tag?

@ilhan007
Copy link
Member Author

ilhan007 commented Jul 31, 2020

object-fit

Should we support IE? It seems that it is not supported, otherwise it is fine.

vladitasev
vladitasev previously approved these changes Aug 3, 2020
@ilhan007 ilhan007 dismissed vladitasev’s stale review August 3, 2020 08:39

Not resolving completely the use case

@ilhan007
Copy link
Member Author

ilhan007 commented Aug 3, 2020

Not completely resolves the issue. Although it is good for the StandardListItem itself, the use case is for the suggestion items, where the users set externally the "ui5-suggestion-item" and we render internally "ui5-li-suggestion-item" (that would inherit the slot).

@ilhan007
Copy link
Member Author

ilhan007 commented Aug 3, 2020

Closing in favour of #2059

@ilhan007 ilhan007 closed this Aug 3, 2020
@ilhan007 ilhan007 deleted the feat-li-image-slot branch August 17, 2020 13:00
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.

<ui5-li> Portait aspect ratio photos are stretched in the search results
3 participants