bug(matLine): Using matLine within MatListItem squishes buttons

[wakonp]

Reproduction

Use StackBlitz to reproduce my issue: https://components-issue-raav17.stackblitz.io

Steps to reproduce:

1. Generate Angular Project
2. Install newest Version of Material ( "@angular/material": "^10.0.0",)
3. Create a MatList with MatListItems
4. Use the matLine Component (Directive) within a span and add a button too
5. Create a new MatListItem without the matLine Directive and a
   between the span and the button

Expected Behavior

In the StackBlitz Example the Button of the second MatListItem should get displayed as the first one.

Actual Behavior

In the StackBlitz Example the Button of the second MatListItem gets squished.

Environment

• Angular: "@angular/core": "~10.0.0", "@angular/cli": "~10.0.0",...
• CDK/Material: "@angular/material": "^10.0.0", "@angular/cdk": "^10.0.0",
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows
  
  

[swseverance]

Hi @wakonp I don't believe this is actually a bug. The matLine directive is used for lists that require multiple lines be displayed per item, and the directive should be added to each line. See documentation. If you want all of the list item content to be displayed on one line you should probably avoid using the matLine directive. If you want each element on a separate line you can try:

  <mat-list-item>
    <span matLine>Do Something else</span>
    <button matLine mat-raised-button color="accent">Foo is cool</button>
  </mat-list-item>

If you are satisfied can you please close the issue? Thanks!

[wakonp]

The matLine directive is used for lists that require multiple lines be displayed per item, and the directive should be added to each line

I am sorry but I think if that is correct, your documentation is wrong or there should be two types of matLine Directive. As you can see in your MatNavList, which is basically a MatList (correct me if am wrong with this statement), the matLine within an a Element is used to display the mat-icon-button at the end of the same line.

I think the matLine directive has multiple purposes, which i also displayed here https://components-issue-4qxcyg.stackblitz.io:

1. Ellipsis Effect - if the text-content of the element gets too large (if you open the stackblitz - pls resize your browser)
2. For displaying multiple lines (as you replied before) + adding the ellipsis Effect
3. For displaying "complex" structure

I know how I can get arround the problem and I know it isn't really a bug, but I think it is inconsistend.