Skip to content

ListItem: visual deviations from Fiori 3 - Part 2 #2297

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

Jump to bottom
Closed
7 tasks done
ilhan007 opened this issue Oct 4, 2020 · 0 comments · Fixed by #2314
Closed
7 tasks done

ListItem: visual deviations from Fiori 3 - Part 2 #2297

ilhan007 opened this issue Oct 4, 2020 · 0 comments · Fixed by #2314
Assignees
@nnaydenow
Labels
Medium Prio TOPIC P
Milestone
1.0.0-rc.9

Comments

@ilhan007
Copy link
Member

ilhan007 commented Oct 4, 2020 •
edited by nnaydenow
Loading

Is your feature request related to a problem? Please describe.
By the FIori 3 VD Wiki all list items should have the same height if one of them has an img or description set. Currently one item might have title and description, other - just a title. As a result some items would be 5 rem in height, while others - about 3 rem.

Describe the solution you'd like
If one of the list items has either description, or an image, all items should have the same height

Screenshot 2020-10-04 at 8 50 52 AM

Item infoText:

  • with description - bottom aligned
  • withоut description - centrally aligned

Item title text

  • with description - top aligned
  • withоut description - centrally aligned

Image and Icon

  • always vertically centred

StandardListItem height

  • with description or image - 5 rem
  • without description and image - 2.75 rem

**Note1: Although the rendering happens within the item, the List would know whether any of its childs has a description or image and force the required visual alignment **

Note2: don't forget to test all kinds of list items to avoid degradations

Additional context
ui5-list, ui5-li
@ilhan007 ilhan007 added this to the 1.0.0-rc.10 milestone Oct 4, 2020
@ilhan007 ilhan007 changed the title List: ensure all items have the same height List/StandardListItem: ensure all items have the same height Oct 6, 2020
@nnaydenow nnaydenow mentioned this issue Oct 6, 2020
Closed
@ilhan007 ilhan007 changed the title List/StandardListItem: ensure all items have the same height StandardListItem: position title, desc, image, infoText and icon by the spec Oct 6, 2020
@ilhan007 ilhan007 changed the title StandardListItem: position title, desc, image, infoText and icon by the spec ListItem: visual deviations from Fiori 3 - Part 2 Oct 6, 2020
@nnaydenow nnaydenow mentioned this issue Oct 7, 2020
Merged
@ilhan007 ilhan007 modified the milestones: 1.0.0-rc.10, 1.0.0-rc.9 Oct 7, 2020
ilhan007 pushed a commit that referenced this issue Oct 7, 2020
@nnaydenow
fix(ui5-li): fix visual deviations from Fiori 3 (#2314)
d430632 
Changes:
- info text is align centrally and it is align bottom if description attribute exists
- title text is align centrally and it is align top if description attribute exists
- item's height is changed to 5rem if description / image attribute exist
- checkbox / radio button is positioned correctly

Fixes #2297
Fixes #2218
ilhan007 pushed a commit that referenced this issue Oct 17, 2020
@nnaydenow @ilhan007
fix(ui5-li): fix visual deviations from Fiori 3 (#2314)
ff155d1 
Changes:
- info text is align centrally and it is align bottom if description attribute exists
- title text is align centrally and it is align top if description attribute exists
- item's height is changed to 5rem if description / image attribute exist
- checkbox / radio button is positioned correctly

Fixes #2297
Fixes #2218
ilhan007 pushed a commit that referenced this issue Nov 11, 2020
@nnaydenow @ilhan007
fix(ui5-li): fix visual deviations from Fiori 3 (#2314)
6f325c5 
Changes:
- info text is align centrally and it is align bottom if description attribute exists
- title text is align centrally and it is align top if description attribute exists
- item's height is changed to 5rem if description / image attribute exist
- checkbox / radio button is positioned correctly

Fixes #2297
Fixes #2218
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nnaydenow nnaydenow

Labels
Medium Prio TOPIC P
Projects
None yet
Milestone
1.0.0-rc.9
Development

Successfully merging a pull request may close this issue.

fix(ui5-li): visual alignment
fix(ui5-li): visual alignment
2 participants
@ilhan007 @nnaydenow