Form controls in lists have ripple clipped

[thw0rted]

Bug, feature request, or proposal:

Bug (I think?)

What is the expected behavior?

I should be able to place a radio button, checkbox, or slide toggle (any control with a ripple, really) in a list without altering its behavior.

What is the current behavior?

The ripple for the control is clipped by the bounds of the line container

What are the steps to reproduce?

See this plunker. Click the controls and observe the shape of the ripple produced.

What is the use-case or motivation for changing an existing behavior?

The ripple behavior is obviously buggy in this case. Either fix the ripple style given the markup in the sample plunker, or provide an example in the docs of the correct markup to use to achieve the desired effect.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I forked the plunker from the current doc example for Lists, whatever that's using.

Is there anything else we should know?

It's entirely possible I'm using the markup wrong -- the List docs are a little light on examples, especially when embedding other Material components, adding buttons, etc.

[thw0rted]

FWIW the very short-term workaround I have for this is to put this in my top level CSS

.mat-list-item .mat-list-text { overflow: visible !important; }

but of course this means that I can't have long text in the radio button without breaking list layout; it's a bad long-term fix.

[jelbourn]

We generally expect that checkboxes / radios in a list would be using mat-selection-list which handles this correctly. @DevVersion for thoughts on how we could make this better, though

[thw0rted]

The selection list docs say

The options within a selection-list should not contain further interactive controls, such as buttons and anchors.

which rules it out for my use case -- I need to let users select one of a number of options, each of which can be configured using a menu.

(As an aside, I haven't been able to find my specific use case in the Lists spec but I did find an example where checkboxes are shown on the left side.)

[devversion]

The ripple overflow is hidden because the <mat-radio-button> (for example) has the matLine attribute set. It's by intention that every line has overflow: hidden for the proper text-overflow ellipsis.

If you want the checkbox there, you should just remove the matLine, and the ripples work fine. But I can see the problem that the radio button will be at the end of the list-item in that case.

I think for such things we need a better API that allows specifying elements out of matLine that can be either at start of the item, or at the end.

e.g.

<mat-list-item>
  <mat-radio-button matListStart>
  <p matLine>My Text</p>
  <button mat-button matListEnd>Test</button>
</mat-list-item>

The same could also work with align="end" or align="start". Problematic would be in that case a dynamic [align] binding.

[thw0rted]

We sort of already have the directives you're proposing in the API, though I doubt they were intended to work like that. I just opened the demo Plunk from the original post and used this instead:

<mat-list-item *ngFor="let folder of folders">
  <mat-radio-button matListIcon></mat-radio-button>
  <p matLine>{{folder.name}}</p>
  <button mat-icon-button><mat-icon>more_vert</mat-icon></button>
</mat-list-item>

The vertical alignment seems a little out of whack -- the matListIcon directive makes the radio button itself render too low for some reason -- but it does keep with the idea of separate markup for "the thing that goes in the primary icon spot". This actually hews closer to the spec than the original example (with the primary action text inside the radio button component) because it keeps the proper separation between the icon/avatar on the left side and the primary text in the middle, 72dp from the left of the list, which is not true when using <mat-radio-button matLine>.

So, bottom line, I guess don't use form controls that contain their own labels, like radio buttons or checkboxes, as a matLine, but rather as a standalone matListIcon (or use them without a label as the last child of the list item, as a secondary action, or use them in a mat-selection-list). It might be nice to have a second directive (or an alias for matListIcon) to apply specifically to interactive controls. Also, if anybody can figure out why a text-less mat-radio-button with matListIcon applied renders slightly below the midline, that would be great. It would be especially helpful to document an example of a list with control somewhere in the List docs.