docs(material/list): switch examples and demo to MDC

[crisbeto]

Switches the list live examples and demo to use MDC. Also updates the docs to reflect the latest API.

[devversion]

LGTM for the sources

[devversion]

LGTM if you want to proceed with this for now.

[crisbeto]

@devversion @mmalerba I've addressed the feedback. I also removed the section about dense lists since we don't have an equivalent attribute now and I'm guessing that it'll be handled using the density Sass API.

[devversion]

Do we want to add some examples for this? There is one clarification needed I think:

1. Unscoped content (stuff not wrapped by e.g. matListItemTitle/Line) will take up the remaining line space.
2. Text inside matListItemTitle or matListItemLine never can wrap/never takes up the remaining line space.
3. If lines is not set, the lines are automatically inferred based on how many lines, and an extra line if there is unscoped content.

All of this can be a follow-up. I'm happy to work on this too — but I think we should explain this more.

[crisbeto]

I'm confused about the whole scoped/unscoped lines and text wrapping. I'm trying the following:

<mat-list>
  <mat-list-item *ngFor="let message of messages; last as last">
    <img matListItemAvatar [src]="message.image">
    <div matListItemTitle>{{message.from}}</div>
    <div>
      <span>{{message.subject}} -- </span>
      <span>{{message.message}}</span>
    </div>
    <mat-divider inset *ngIf="!last"></mat-divider>
  </mat-list-item>
</mat-list>

Which produces the following with broken spacing:

It looks better if I remove the div around the two span elements, but the lines still don't wrap, even if I add a lines="2" to the list item.

[devversion]

Unscoped content: Text content outside of any explicit matListItemTitle or matListItemLine. Open for better names here— this is the term I used in the design document.

Yeah, the use of div for the title, or for the second line is unexpected as it introduces additional spacing. If you switch all divs to span, then it works as expected.

If you do not specify any lines, then there is a title + line (the content outside of any explicit line is picked up automatically as a line). If you would set lines=3, then the unscoped content would actually be acquire the remaining space. The content of the second line can then wrap and take up the remaining space. Without lines—it would just be a single line + title and neither would wrap (and just show an ellipsis). There quite a few examples in the dev-app mdc-list demo.

e.g.

<mat-list-item>
  <h3 matListItemTitle>Title</h3>
  Unscoped content — Will take up the remaining space— since there is no explicit 
  `line` count. It will just be treated as an additional line— like with `span matListItemLine`
</mat-list-item>

<mat-list-item lines="3">
  <h3 matListItemTitle>Title</h3>
  Unscoped content — Will take up the remaining space  — in this case the list has explicit 3 lines, so
  without the title, the unscoped content will span over two lines (and wrap).
</mat-list-item>

Note: Even if the content in the lines=3 case is too short, the list item acquires the space of three lines. Consumers need to chose beforehand if they want to reserve the space for three lines or not. This came from MDC. A list never automatically grows if the content would exceed.

[devversion]

Let me know if that helps, or if we should go through some examples over VC/chat. Happy to help

[crisbeto]

As discussed over DM, I'll merge the changes as they are now so the migration isn't blocked. The docs content can be iterated over afterwards.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}