Material-components-web: Investigate adding Three-Line List support to List Component

[traviskaufman]

Specs: https://material.google.com/components/lists.html#lists-specs

Copied from https://github.com/google/material-design-lite/issues/4487

[rohanthacker]

Is this open for anyone to implement?

[traviskaufman]

@rohanthacker definitely!

The three-line list will most likely by SCSS additions, but either way it may be useful to show us a prototype via Codepen of what you're thinking so that way we can smooth any rough edges over before you go about implementing the feature. You can use this template to prototype if you want.

Let us know if you want to tackle it and we'll assign you. If you're looking for more info on how we build components, check out our our Authoring Components guide. And thanks for your interest 😄

[rohanthacker]

Hey @traviskaufman Yes I would like to Implement this for MCD. I helped put together, the MDL version of Material Lists.

I'll post back on this thread with a demo of 3 Line version when, I have something ready for you to see.

I was also wondering, about collapsable lists as I wasnt able to submit this to MDL, but I'd be happy to do so for MDC.
Happy to Help! 👍

[traviskaufman]

Awesome! Looking forward to seeing your work 😄

Re collapsible lists, it's not on our radar right now, and probably involves implementing #46 first. Once that's done though, it's something we may consider, and even if not, you could definitely build it into your UI by adding custom styles to our lists.

[marcusasplund]

Any news about support for three-line lists?

[mmicheux]

Hi! Any update about the support for three-line lists?

[artburkart]

I was able to get a three-line list component:

  @import "@material/list/mdc-list";
  @import "@material/feature-targeting/functions";
  @import "@material/feature-targeting/mixins";

  $query: mdc-feature-all();
  $feat-structure: mdc-feature-create-target($query, structure);

  .mdc-list--three-line .mdc-list-item__text {
    @include mdc-feature-targets($feat-structure) {
      align-self: flex-start;
    }
  }

  .mdc-list--three-line .mdc-list-item {
    @include mdc-feature-targets($feat-structure) {
      height: 92px;
    }
  }

  .mdc-list--three-line.mdc-list--dense .mdc-list-item,
  .mdc-list--avatar-list.mdc-list--dense .mdc-list-item {
    @include mdc-feature-targets($feat-structure) {
      height: 80px;
    }
  }

<ul class="mdc-list demo-list mdc-list--three-line mdc-list--avatar-list">  
  <li class="mdc-list-item" tabindex="0">
    <span class="mdc-list-item__graphic" style="size:2em;">W</span>
    <span class="mdc-list-item__text">
      <span class="mdc-list-item__primary-text">List item title</span>
      <span class="mdc-list-item__secondary-text">Secondary text</span>
      <span class="mdc-list-item__secondary-text">Secondary text</span>
    </span>
    <span class="mdc-list-item__meta">info</span>
  </li>
</ul>

DISCLAIMER: This is the first thing I did that achieved the desired effect. I didn't dig any further, read the material.io tome, or teach myself a new style sheet language. Since, I don't know Sass or SCSS, this is likely not an ideal implementation. :sweat_smile:

[MintyMods]

Is there any update on getting this three line support added? I have a requirement within my project to use three line lists and the @SMUI components I am using depend on your components. While a workaround can be added directly to @SMUI it would be cleaner if @material shipped the required styles (shown above).

The previous suggested fix looks straight forward enough although I do think it contains a bug with the .mdc-list-item height:-

  .mdc-list--three-line .mdc-list-item {
    @include mdc-feature-targets($feat-structure) {
      height: 92px;
    }
  }

From reading the List Component Spec :-

I think the height should be specified as 88px not 92px correct me if I am wrong? @artburkart

Any update on this issue is appreciated. Thanks