[MDCList] 11.0 Change

[DouglasRiddle]

Bug report

The layout of MDCList is messed up with 11.0. Are there undocumented changes to the expected structure of the MDCList element?

Steps to reproduce

Using the example code here I created two codepens to show the different behavior from 10 to 11. The only code difference is the source .css and .js

v10 CodePen

v11 CodePen

v12 CodePen

Actual behavior

See v11 and v12 above

Expected behavior

See v10 above

Your Environment:

Software	Version(s)
MDC Web	v11.0 & v12
Browser	Chromium 90.0
Operating System	Windows 10

[allan-chen]

Hey @brandondiamond, could you take a look? It seems like the mixins are using mdc-deprecated-list-* class names, but the README is not.

[brandondiamond]

Hi Douglas! You are absolutely correct -- the documentation is currently out of date with the latest version of list. I'm currently working on the updated docs for the new implementation (see #7013 for a link the draft).

The version of lists in the current README is now deprecated but still available in the Material library. All of the class names and mixins are prefixed with the word "deprecated" to distinguish the two versions; so, you can take what's documented in the README and drop in the deprecated prefix: 'mdc-list' becomes 'mdc-deprecated-list', for instance.

That said, your best bet for new projects is to migrate to the new implementation as noted in the PDF.

In any event, I'm very sorry for the churn and will be entirely focused on getting the README updated next week.

[DouglasRiddle]

@brandondiamond, thank you for the update. I'll keep an eye out for the updated readme for MDCList next week since the linked .pdf seems to target pre-11.0.

[DouglasRiddle]

On a related note, the readme may need to be updated for any other elements that use MDCList such as MDCSelect.

[brandondiamond]

Excellent point. I'll work on getting everything updated together.

[aeromac]

Hi, the version 11.0.0 styles seem to use '.mdc-deprecated-list-item' for mdc-drawer list item variatons (height, border radius etc). Is this correct? eg '.mdc-drawer .mdc-deprecated-list-item'

[brandondiamond]

Yes, this is correct. We’re currently working on updating our components to use the latest version of list. Until then, these will continue to use the deprecated version.

On Sat, Jun 19, 2021 at 11:03 PM aeromac @.***> wrote:

Hi, the version 11.0.0 styles seem to use '.mdc-deprecated-list-item' for mdc-drawer list item variatons (height, border radius etc). Is this correct? eg '.mdc-drawer .mdc-deprecated-list-item'

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/material-components/material-components-web/issues/7062#issuecomment-864492410, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAH5FMCEA2S7HFA7QR4HCJLTTVK6RANCNFSM432A257A .

[huangbolaw]

Hi - just my 2 cents here. I dug through the docs and css file and found that the following structure would work:

<ul class="mdc-list">
  <li class="mdc-list-item mdc-list-item--with-one-line mdc-list-item--with-leading-icon" role="menuitem" id="itemId">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__start">
      <i class="material-icons" aria-hidden="true">icon_name</i>
    </span>
    <span class="mdc-list-item__content nav-text">Item Name</span>
  </li>
</ul>

You can change one line to two lines.

<ul class="mdc-list">
  <li class="mdc-list-item mdc-list-item--with-two-lines mdc-list-item--with-leading-icon" role="menuitem" id="itemId">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__start">
      <i class="material-icons" aria-hidden="true">icon_name</i>
    </span>
    <span class="mdc-list-item__content">
          <span class="mdc-list-item__primary-text">Primary</span>
          <span class="mdc-list-item__secondary-text">Secondary</span>
    </span>
  </li>
</ul>

You can also change to trailing icons.

<ul class="mdc-list">
  <li class="mdc-list-item mdc-list-item--with-two-lines mdc-list-item--with-trailing-icon" role="menuitem" id="itemId">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__content">
          <span class="mdc-list-item__primary-text">Primary</span>
          <span class="mdc-list-item__secondary-text">Secondary</span>
    </span>
      <span class="mdc-list-item__end">
          <i class="material-icons" aria-hidden="true">icon_name</i>
      </span>
  </li>
</ul>

Hope this helps in the interim.

Thanks.

[caioaletrocadock]

Hi - just my 2 cents here. I dug through the docs and css file and found that the following structure would work:

<ul class="mdc-list">
  <li class="mdc-list-item mdc-list-item--with-one-line mdc-list-item--with-leading-icon" role="menuitem" id="itemId">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__start">
      <i class="material-icons" aria-hidden="true">icon_name</i>
    </span>
    <span class="mdc-list-item__content nav-text">Item Name</span>
  </li>
</ul>

You can change one line to two lines.

<ul class="mdc-list">
  <li class="mdc-list-item mdc-list-item--with-two-lines mdc-list-item--with-leading-icon" role="menuitem" id="itemId">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__start">
      <i class="material-icons" aria-hidden="true">icon_name</i>
    </span>
    <span class="mdc-list-item__content">
          <span class="mdc-list-item__primary-text">Primary</span>
          <span class="mdc-list-item__secondary-text">Secondary</span>
    </span>
  </li>
</ul>

You can also change to trailing icons.

<ul class="mdc-list">
  <li class="mdc-list-item mdc-list-item--with-two-lines mdc-list-item--with-trailing-icon" role="menuitem" id="itemId">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__content">
          <span class="mdc-list-item__primary-text">Primary</span>
          <span class="mdc-list-item__secondary-text">Secondary</span>
    </span>
      <span class="mdc-list-item__end">
          <i class="material-icons" aria-hidden="true">icon_name</i>
      </span>
  </li>
</ul>

Hope this helps in the interim.

Thanks.

My man, thanks for this, really!!!

[DouglasRiddle]

The README structure for mdc-list is still incorrect with v12 https://codepen.io/DouglasRiddle/pen/bGWLjJX

Any estimate on when this will be updated to show the new (non-deprecated) mdc-list structure?

[aeromac]

mdc web seems to be a bit of a mess in v11 & 12.. mdc-list does not seem to work as it used to (eg controls on list items are not clickable?), and because other controls such as drawers and menu rely on mdc-list, it leaves much of mdc-web as a whole in a bit of a mess. much of the documentation around mdc-list and any components that use mdc-list is from v10

[brandondiamond]

Hey Aeromac! You're spot on about the differences between 'mdc-list' and 'mdc-deprecated-list' causing confusion, particularly since list is used by so many other components. We recently rebuilt list from the ground up to deal with tech debt that had accumulated over the years. We're now actively migrating all components that are built using list to the new implementation; this is a major priority for me personally, so you can expect to see progress in the next few weeks.

You also make an excellent point about our menu, select, list, etc., documentation. I'm going to make sure that these are updated to reflect the need to use 'mdc-deprecated-list' for the time being and to include a note about the migration to new list.

The old implementation of list is still available using the 'mdc-deprecated-*' prefix; this will continue to work until every component has been updated. A global search and replace from "mdc-list" to "mdc-deprecated-list" should get everything working again.

In any case, thank you for taking the time to share your feedback -- I'll get the docs straightened out right away.

[brandondiamond]

Here is an updated version of the new list documentation. I'm working on adapting this to the official website.

[kmmbvnr]

Hey team, any progress on this?

All those massive deprecated statements along the docs, make me fill that whole library is deprecated

[ckuetbach]

Hello,

how can I add an checkbox into a "new" list? Thanks @caioaletrocadock for showing the new structure.

The described way seems not to work anymore, because checkboxes can't be checked anymore. https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/README.md

It looks like following CSS is added to the mdc-list-item__content:

.mdc-list-item__content {
    @include typography.overflow-ellipsis($query);
    @include feature-targeting.targets($feat-structure) {
      align-self: center;
      flex: 1;
      pointer-events: none;
    }
[...]

Or should I switch back to the deprecated version?

[ckuetbach]

@brandondiamond

Here is an updated version of the new list documentation. I'm working on adapting this to the official website.

I think there is an errror in that documentation. Look at documentation about "Item Element". I think the mandatory class "mdc-list" should read "mdc-list-item"

[brandondiamond]

Hi Mikhail — absolutely. We’re working on the Material3 support for List which will offer an enhanced API along with new styles and a number of other improvements. We’ll have updates on this very soon.

On Tue, Mar 22, 2022 at 9:27 AM Mikhail Podgurskiy @.***> wrote:

Hey team, any progress on this?

All those massive deprecated statements along the docs, make me fill that whole library is deprecated

— Reply to this email directly, view it on GitHub https://github.com/material-components/material-components-web/issues/7062#issuecomment-1074785362, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAH5FMB6K7S6C5TACKPAG53VBFR3JANCNFSM432A257A . You are receiving this because you were mentioned.Message ID: @.*** .com>