List docs clarification: does .mdl-list__item-secondary-content do anything?

[kengruven]

On this page: http://www.getmdl.io/components/#lists-section

it's not clear exactly what "secondary" classes are required, or what they do.

In the "Avatars and actions" example, one example has <span class="mdl-list__item-secondary-content"> around the secondary actions, and the other two have <a class="mdl-list__item-secondary-action" href="#"> directly under the <div class="mdl-list__item">.

The table of "Configuration Options" at the end isn't terribly helpful, either:

• ".mdl-list__item-secondary-content" -> "Defines the secondary content sub-division"
• ".mdl-list__item-secondary-info" -> "Defines the information sub-division"
• ".mdl-list__item-secondary-action" -> "Defines the Action sub-division"

Can I just use ...-secondary-info or ...-secondary-action on their own? Does ...-secondary-content do anything?

[tleunen]

The doc is incorrect. It says the secondary content/action requires 2 or 3 lines, but its not the case. About the missing secondary-content in one of the demos, I think it's an oversight (based on what I see in the css).

[tv42]

The examples are also not as helpful as they could be, because

• they only show single actions, which misses out the concept that secondary-action seems to be a container for all the secondary actions, not a single one
• they don't use actual buttons, making them have that bright coloring that isn't seen in many places that use secondary actions

Here's something I managed to put together, that looks a bit more like the gmails and inboxes and whatnot:

                        <div class="mdl-list__item">
                          <span class="mdl-list__item-primary-content">
                            <i class="material-icons mdl-list__item-avatar">person</i>
                            <span>John Doe</span>
                          </span>
                          <span class="mdl-list__item-secondary-action">
                            <button class="mdl-button mdl-button--icon mdl-js-button">
                              <i class="material-icons">done</i>
                            </button>
                            <button class="mdl-button mdl-button--icon mdl-js-button">
                              <i class="material-icons">delete</i>
                            </button>
                          </span>
                        </div>