Open nename0 opened 6 years ago
Those are valid points. I want to mention, that #9500 didn't aim to specifically rework the list completely to properly align with the specs. There are way more things that would need to be updated to exactly match the specs
Right now the icon usually just has a width of 40px
and will be styled with a padding
of 16px
on the end side (which does not result in the 72px from the specs)
72px + 16px | 16px |
---|---|
As we can see in the screenshots above, there can be also two different behaviors for subheaders.
cc. @crisbeto @jelbourn
@DevVersion I have to correct you a bit.
matListAvatar
s (the specs seem to make a clear distinction between icons and avatars) currently have a width of 40px
. Theres nothing wrong with that. Its just like in the specs (16px padding + 40px width + 16px padding = 72px).
The problem comes with mat-list-icon
. They have a width of 24px
as per spec, but neither the 16px
nor the 72px
padding is correct with them.
True, I thought accidentially that the 72px line does not include the 16px initial horizontal padding. Still, we would need to have a way to support the different subheader shiftings.
I came here to report this but found the issue already open, which is good. I just want to make sure you don't forget about dense lists: StackBlitz
Note that in the linked example, the keylines are drawn at 16px and 72px. On the dense list, the text content is further to the left than the non-dense list, and in the spec they're both supposed to stick to the 72px keyline.
Bug:
A list with icons, like here (https://material.angular.io/components/list/examples), has invalid padding as per spec (https://material.io/guidelines/components/lists.html#lists-specs).
What is the expected behavior?
The "Left icon padding" should be
16px
and the "Text padding, left"72px
.What is the current behavior?
Left icon padding:
mat-list-item-content
padding-left16px
+mat-list-icon
padding-left4px
=mat-list-icon
is20px
from sideText padding left:
mat-list-item-content
padding-left16px
+mat-list-icon
padding-left4px
+mat-list-icon
width24px
+mat-list-icon
padding-right4px
+mat-list-text
padding-left16px
= content ofmat-list-text
is64px
from sideNote: #9500 does not seem to change this
What are the steps to reproduce?
Forked from examples: 5.1.0: https://stackblitz.com/edit/angular-tfndqa-gwcrab?file=index.html latest build 5.1.0-3352201: https://stackblitz.com/edit/angular-tfndqa-xpmt2u?file=index.html
The avatars line up with the subheaders with a padding of
16px
. However the icons don't line up with the subheaders. Also the text right to the icons is not72px
padded and therefore does not line up with the text of the avatars.Which versions of Angular, Material, OS, TypeScript, browsers are affected?
"@angular/material": "^5.1.0" and "@angular/material": "angular/material2-builds#5.1.0-3352201"