Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
feat(list): Use states mixins; change padding behavior to support them (
Browse files Browse the repository at this point in the history 
#1737)

Also updates demo index page DOM and styles to accommodate new padding behavior and make entire rows clickable to match states' shade region.

BREAKING CHANGE: List padding is now per-item rather than across the entire list. Separators now span the entire list width by default, with the addition of a mdc-list-divider--padded modifier class to achieve the old default behavior.
  • Loading branch information
@kfranqueiro
kfranqueiro authored Dec 14, 2017
1 parent c50363d commit c8772ea
Show file tree
Hide file tree
Showing 6 changed files with 189 additions and 186 deletions.
275 changes: 137 additions & 138 deletions demos/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,216 +37,215 @@
</header>
<main>
<nav class="mdc-toolbar-fixed-adjust">
<ul class="catalog-list mdc-list mdc-list--two-line">
<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_button_24px.svg" /></span>
<a href="button.html" class="mdc-list-item__text">
<div role="list" class="demo-catalog-list mdc-list mdc-list--two-line">
<a href="button.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_button_24px.svg" /></span>
<span class="mdc-list-item__text">
Button
<span class="mdc-list-item__secondary-text">Raised and flat buttons</span>
</a>
</li>
<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_card_24px.svg" /></span>
<a href="card.html" class="mdc-list-item__text">
</span>
</a>
<a href="card.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_card_24px.svg" /></span>
<span class="mdc-list-item__text">
Card
<span class="mdc-list-item__secondary-text">Various card layout styles</span>
</a>
</li>
<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_selection_control_24px.svg" /></span>
<a href="checkbox.html" class="mdc-list-item__text">
</span>
</a>
<a href="checkbox.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_selection_control_24px.svg" /></span>
<span class="mdc-list-item__text">
Checkbox
<span class="mdc-list-item__secondary-text">Multi-selection controls</span>
</a>
</li>
<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_dialog_24px.svg" /></span>
<a href="dialog.html" class="mdc-list-item__text">
</span>
</a>
<a href="dialog.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_dialog_24px.svg" /></span>
<span class="mdc-list-item__text">
Dialog
<span class="mdc-list-item__secondary-text">Secondary text</span>
</a>
</li>
<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_side_navigation_24px.svg" /></span>
<a href="drawer/temporary-drawer.html" class="mdc-list-item__text">
</span>
</a>
<a href="drawer/temporary-drawer.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_side_navigation_24px.svg" /></span>
<span class="mdc-list-item__text">
Drawer
<span class="mdc-list-item__secondary-text">Temporary</span>
</a>
</li>
<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_side_navigation_24px.svg" /></span>
<a href="drawer/persistent-drawer.html" class="mdc-list-item__text">
</span>
</a>
<a href="drawer/persistent-drawer.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_side_navigation_24px.svg" /></span>
<span class="mdc-list-item__text">
Drawer
<span class="mdc-list-item__secondary-text">Persistent</span>
</a>
</li>
<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_side_navigation_24px.svg" /></span>
<a href="drawer/permanent-drawer-above-toolbar.html" class="mdc-list-item__text">
</span>
</a>
<a href="drawer/permanent-drawer-above-toolbar.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_side_navigation_24px.svg" /></span>
<span class="mdc-list-item__text">
Drawer
<span class="mdc-list-item__secondary-text">Permanent drawer above toolbar</span>
</a>
</li>
<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_side_navigation_24px.svg" /></span>
<a href="drawer/permanent-drawer-below-toolbar.html" class="mdc-list-item__text">
</span>
</a>
<a href="drawer/permanent-drawer-below-toolbar.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_side_navigation_24px.svg" /></span>
<span class="mdc-list-item__text">
Drawer
<span class="mdc-list-item__secondary-text">Permanent drawer below toolbar</span>
</a>
</li>
<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_shadow_24px.svg" /></span>
<a href="elevation.html" class="mdc-list-item__text">
</span>
</a>
<a href="elevation.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_shadow_24px.svg" /></span>
<span class="mdc-list-item__text">
Elevation
<span class="mdc-list-item__secondary-text">Shadow for different elevations</span>
</a>
</li>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_button_24px.svg" /></span>
<a href="fab.html" class="mdc-list-item__text">
</span>
</a>
<a href="fab.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_button_24px.svg" /></span>
<span class="mdc-list-item__text">
Floating action button
<span class="mdc-list-item__secondary-text">The primary action in an application</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_card_24px.svg" /></span>
<a href="grid-list.html" class="mdc-list-item__text">
<a href="grid-list.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_card_24px.svg" /></span>
<span class="mdc-list-item__text">
Grid list
<span class="mdc-list-item__secondary-text">2D grid layouts</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_component_24px.svg" /></span>
<a href="icon-toggle.html" class="mdc-list-item__text">
<a href="icon-toggle.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_component_24px.svg" /></span>
<span class="mdc-list-item__text">
Icon toggle
<span class="mdc-list-item__secondary-text">Toggling icon states</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_card_24px.svg" /></span>
<a href="layout-grid.html" class="mdc-list-item__text">
<a href="layout-grid.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_card_24px.svg" /></span>
<span class="mdc-list-item__text">
Layout grid
<span class="mdc-list-item__secondary-text">Grid and gutter support</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_progress_activity.svg" /></span>
<a href="linear-progress.html" class="mdc-list-item__text">
<a href="linear-progress.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_progress_activity.svg" /></span>
<span class="mdc-list-item__text">
Linear progress
<span class="mdc-list-item__secondary-text">Fills from 0% to 100%, represented by bars</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_list_24px.svg" /></span>
<a href="list.html" class="mdc-list-item__text">
<a href="list.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_list_24px.svg" /></span>
<span class="mdc-list-item__text">
List
<span class="mdc-list-item__secondary-text">Item layouts in lists</span>
</a>
</li>
</span>
</a>


<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_radio_button_24px.svg" /></span>
<a href="radio.html" class="mdc-list-item__text">
<a href="radio.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_radio_button_24px.svg" /></span>
<span class="mdc-list-item__text">
Radio buttons
<span class="mdc-list-item__secondary-text">Single selection controls</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_ripple_24px.svg" /></span>
<a href="ripple.html" class="mdc-list-item__text">
<a href="ripple.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_ripple_24px.svg" /></span>
<span class="mdc-list-item__text">
Ripple
<span class="mdc-list-item__secondary-text">Touch ripple</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_menu_24px.svg" /></span>
<a href="select.html" class="mdc-list-item__text">
<a href="select.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_menu_24px.svg" /></span>
<span class="mdc-list-item__text">
Select
<span class="mdc-list-item__secondary-text">Popover selection menus</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_menu_24px.svg" /></span>
<a href="simple-menu.html" class="mdc-list-item__text">
<a href="simple-menu.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_menu_24px.svg" /></span>
<span class="mdc-list-item__text">
Simple Menu
<span class="mdc-list-item__secondary-text">Pop over menus</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/slider.svg" /></span>
<a href="slider.html" class="mdc-list-item__text">
<a href="slider.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/slider.svg" /></span>
<span class="mdc-list-item__text">
Slider
<span class="mdc-list-item__secondary-text">Range Controls</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_toast_24px.svg" /></span>
<a href="snackbar.html" class="mdc-list-item__text">
<a href="snackbar.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_toast_24px.svg" /></span>
<span class="mdc-list-item__text">
Snackbar
<span class="mdc-list-item__secondary-text">Transient messages</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_switch_24px.svg" /></span>
<a href="switch.html" class="mdc-list-item__text">
<a href="switch.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_switch_24px.svg" /></span>
<span class="mdc-list-item__text">
Switch
<span class="mdc-list-item__secondary-text">On off switches</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_tabs_24px.svg" /></span>
<a href="tabs.html" class="mdc-list-item__text">
<a href="tabs.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_tabs_24px.svg" /></span>
<span class="mdc-list-item__text">
Tabs
<span class="mdc-list-item__secondary-text">Tabs with support for icon and text labels</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_text_field_24px.svg" /></span>
<a href="text-field.html" class="mdc-list-item__text">
<a href="text-field.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_text_field_24px.svg" /></span>
<span class="mdc-list-item__text">
Text field
<span class="mdc-list-item__secondary-text">Single and multiline text fields</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_theme_24px.svg" /></span>
<a href="theme.html" class="mdc-list-item__text">
<a href="theme.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_theme_24px.svg" /></span>
<span class="mdc-list-item__text">
Theme
<span class="mdc-list-item__secondary-text">Using primary and secondary colors</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_toolbar_24px.svg" /></span>
<a href="toolbar/index.html" class="mdc-list-item__text">
<a href="toolbar/index.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_toolbar_24px.svg" /></span>
<span class="mdc-list-item__text">
Toolbar
<span class="mdc-list-item__secondary-text">Header and footers</span>
</a>
</li>
</span>
</a>

<li class="mdc-list-item">
<span class="catalog-list-icon mdc-list-item__graphic"><img class="catalog-component-icon" src="/images/ic_typography_24px.svg" /></span>
<a href="typography.html" class="mdc-list-item__text">
<a href="typography.html" role="listitem" class="mdc-list-item">
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_typography_24px.svg" /></span>
<span class="mdc-list-item__text">
Typography
<span class="mdc-list-item__secondary-text">Type hierarchy</span>
</a>
</li>
</ul>
</span>
</a>
</div>
</nav>
</main>
<script src="/assets/material-components-web.js"></script>
Expand Down
14 changes: 4 additions & 10 deletions demos/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,10 @@
@import "./common";
@import "../packages/mdc-list/mdc-list";

.catalog-list {
padding-left: 28px;
}
.catalog-list-icon {
margin-right: 24px;
.demo-catalog-list a {
color: $material-color-grey-900;
}

ul.catalog-list {
a {
text-decoration: none;
color: #212121;
}
.demo-catalog-list-icon {
margin: 0 24px 0 12px;
}
Loading

0 comments on commit c8772ea

Please sign in to comment.