Merge pull request #4069 from google/fix-list

Improves the list to bring it closer to spec. Fixes #4056.
google · Feb 3, 2016 · 2f58068 · 2f58068
2 parents d5401ff + 74ccf16
commit 2f58068
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 78 deletions.
diff --git a/docs/_pages/components.md b/docs/_pages/components.md
@@ -193,17 +193,17 @@ categories:
         class: mdl-list
         snippets:
           - snippet_group:
-            - caption: Action
-              file: action.html
+            - caption: Simple list
+              file: list-item.html
           - snippet_group:
-            - caption: Icon
+            - caption: Icons
               file: icon.html
           - snippet_group:
-            - caption: List control
-              file: list-control.html
+            - caption: Avatars and actions
+              file: action.html
           - snippet_group:
-            - caption: List item
-              file: list-item.html
+            - caption: Avatars and controls
+              file: list-control.html
           - snippet_group:
             - caption: Two line
               file: two-line.html

diff --git a/src/_variables.scss b/src/_variables.scss
@@ -271,9 +271,10 @@ $progress-image-path: $image_path;
 
 /* ==========  List ========== */
 
-$list-container-item-border-color: unquote("rgb(#{$palette-grey-300})") !default;
-$list-container-view-background: unquote("rgb(#{$color-white})") !default;
+$list-main-text-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
 $list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
+$list-icon-color: unquote("rgb(#{$palette-grey-600})") !default;
+$list-avatar-color: white !default;
 
 /* ==========  Item ========== */
 
@@ -364,10 +365,18 @@ $menu-fade-duration: 0.2s !default;
 
 /* LIST */
 
-$list-container-height: 500px !default;
-$list-container-width: 400px !default;
-$list-container-item-height: 70px !default;
-// $list__item-hover-color: unquote("rgb(#{$palette-grey-300})") !default;
+$list-border: 8px !default;
+$list-min-height: 48px !default;
+$list-min-padding: 16px !default;
+$list-bottom-padding: 20px !default;
+$list-avatar-text-left-distance: 72px !default;
+$list-icon-text-left-distance: 72px !default;
+
+$list-avatar-size: 40px !default;
+$list-icon-size: 24px !default;
+
+$list-two-line-height: 72px !default;
+$list-three-line-height: 88px !default;
 
 /* LAYOUT */
 

diff --git a/src/list/README.md b/src/list/README.md
@@ -47,6 +47,7 @@ The MDL CSS classes apply various predefined visual enhancements to the list. Th
 | .mdl-list__item-three-line | Defines the List's Items  as a Three Line | Optional Three Line List Variant |
 | .mdl-list__item-primary-content | Defines the primary content sub-division |-|
 | .mdl-list__item-avatar | Defines the avatar sub-division |-|
+| .mdl-list__item-icon | Defines the icon sub-division |-|
 | .mdl-list__item-secondary-content | Defines the secondary content sub-division | requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` |
 | .mdl-list__item-secondary-info | Defines the information sub-division |requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` |
 | .mdl-list__item-secondary-action | Defines the Action sub-division | requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` |

diff --git a/src/list/_list.scss b/src/list/_list.scss
@@ -20,85 +20,138 @@
 
 .mdl-list {
   display: block;
-  padding: 8px 0 ;
+  padding: $list-border 0;
   list-style: none;
 }
 
 .mdl-list__item {
-  @include typo-body-1();
+  @include typo-subhead();
+  line-height: 1;
   display: flex;
+  min-height: $list-min-height;
   box-sizing: border-box;
-  height: 48px;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  padding : 16px 16px 20px 16px;
+  padding: $list-min-padding;
   cursor: default;
+  color: $list-main-text-text-color;
+  overflow: hidden;
+
   & .mdl-list__item-primary-content {
-    order:0;
+    order: 0;
     flex-grow: 2;
     text-decoration: none;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    & .mdl-list__item-icon {
+      margin-right: $list-icon-text-left-distance - $list-icon-size - $list-min-padding;
+    }
 
-    & .material-icons {
-      font-size: 40px;
-      line-height: 0;
-      vertical-align: middle;
-      padding: 0 12px 0 0;
-      display: inline;
+    & .mdl-list__item-avatar {
+      margin-right: $list-avatar-text-left-distance - $list-avatar-size - $list-min-padding;
     }
   }
 
   & .mdl-list__item-secondary-content {
     display: flex;
     flex-flow: column;
     align-items: flex-end;
+    margin-left: $list-min-padding;
+
     & .mdl-list__item-secondary-action label { display: inline; }
     & .mdl-list__item-secondary-info {
       @include typo-caption();
-      margin-bottom: 10px;
       color: $list-supporting-text-text-color;
     }
     & .mdl-list__item-sub-header {
-      padding: 0 0 0 16px;
+      padding: 0 0 0 $list-min-padding;
     }
   }
 }
 
-.mdl-list__item-avatar {
-  height: 56px;
+.mdl-list__item-icon,
+.mdl-list__item-icon.material-icons {
+  height: $list-icon-size;
+  width: $list-icon-size;
+  font-size: $list-icon-size;
+  box-sizing: border-box;
+  color: $list-icon-color;
+}
+
+.mdl-list__item-avatar,
+.mdl-list__item-avatar.material-icons {
+  height: $list-avatar-size;
+  width: $list-avatar-size;
+  box-sizing: border-box;
+  border-radius: 50%;
+  // Set a background colour in case the user doesn't provide an image.
+  background-color: $list-icon-color;
+  // Set a font size and color in case the user provides a Material Icon.
+  font-size: $list-avatar-size;
+  color: $list-avatar-color;
 }
 
 .mdl-list__item--two-line {
-  height: 72px;
+  height: $list-two-line-height;
 
   & .mdl-list__item-primary-content {
-    & .material-icons {
-      vertical-align: text-bottom;
+    height: $list-two-line-height - $list-min-padding - $list-bottom-padding;
+    line-height: 20px;
+    display: block;
+
+    & .mdl-list__item-avatar{
+      float: left;
+    }
+
+    & .mdl-list__item-icon {
+      float: left;
+      // Icons are aligned to center of text in a two line list.
+      margin-top:
+        ($list-two-line-height - $list-min-padding - $list-bottom-padding -
+         $list-icon-size) / 2;
+    }
+
+    & .mdl-list__item-secondary-content {
+      height: $list-two-line-height - $list-min-padding - $list-bottom-padding;
     }
 
     & .mdl-list__item-sub-title {
-      @include typo-caption();
+      @include typo-body-1();
+      line-height: 18px;
+      color: $list-supporting-text-text-color;
       display: block;
-      padding : 0 0 0 56px;
+      padding: 0;
     }
   }
 }
 
 .mdl-list__item--three-line {
-  height: 88px;
+  height: $list-three-line-height;
 
   & .mdl-list__item-primary-content {
-    & .material-icons {
-      vertical-align: text-bottom;
+    height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
+    line-height: 20px;
+    display: block;
+
+    & .mdl-list__item-avatar,
+    & .mdl-list__item-icon {
+      float: left;
     }
   }
 
+  & .mdl-list__item-secondary-content {
+    height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
+  }
+
   & .mdl-list__item-text-body {
-    @include typo-caption();
+    @include typo-body-1();
+    line-height: 18px;
+    height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
     color: $list-supporting-text-text-color;
     display: block;
-    height: 24px;
-    padding: 0 0 0 56px;
-    overflow: hidden;
+    padding: 0;
   }
 }
diff --git a/src/list/snippets/action.html b/src/list/snippets/action.html
@@ -1,35 +1,32 @@
-<!-- List Items with action -->
+<!-- List items with avatar and action -->
 <style>
 .demo-list-action {
   width: 300px;
 }
 </style>
 
 <div class="demo-list-action mdl-list">
-  <div class="mdl-list__item mdl-list__item-two-line ">
+  <div class="mdl-list__item">
     <span class="mdl-list__item-primary-content">
-      <i class="material-icons ">person</i>
+      <i class="material-icons mdl-list__item-avatar">person</i>
       <span>Bryan Cranston</span>
-      <span class="mdl-list__item-sub-title">62 Episodes</span>
     </span>
-    <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
+    <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
   </div>
-  <div class="mdl-list__item mdl-list__item-two-line ">
+  <div class="mdl-list__item">
     <span class="mdl-list__item-primary-content">
-      <i class="material-icons  mdl-list__item-avatar">person</i>
+      <i class="material-icons mdl-list__item-avatar">person</i>
       <span>Aaron Paul</span>
-      <span class="mdl-list__item-sub-title">62 Episodes</span>
     </span>
-    <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
+    <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
   </div>
-  <div class="mdl-list__item mdl-list__item-two-line ">
+  <div class="mdl-list__item">
     <span class="mdl-list__item-primary-content">
-      <i class="material-icons  mdl-list__item-avatar">person</i>
+      <i class="material-icons mdl-list__item-avatar">person</i>
       <span>Bob Odenkirk</span>
-      <span class="mdl-list__item-sub-title">43 Episodes</span>
     </span>
     <span class="mdl-list__item-secondary-content">
-      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
+      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
   </span>
   </div>
 </div>
diff --git a/src/list/snippets/icon.html b/src/list/snippets/icon.html
@@ -8,19 +8,19 @@
 <ul class="demo-list-icon mdl-list">
   <li class="mdl-list__item">
     <span class="mdl-list__item-primary-content">
-    <i class="material-icons">person</i>
+    <i class="material-icons mdl-list__item-icon">person</i>
     Bryan Cranston
 </span>
   </li>
   <li class="mdl-list__item">
     <span class="mdl-list__item-primary-content">
-    <i class="material-icons">person</i>
+    <i class="material-icons mdl-list__item-icon">person</i>
     Aaron Paul
   </span>
   </li>
   <li class="mdl-list__item">
     <span class="mdl-list__item-primary-content">
-    <i class="material-icons">person</i>
+    <i class="material-icons mdl-list__item-icon">person</i>
     Bob Odenkirk
   </span>
   </li>

diff --git a/src/list/snippets/list-control.html b/src/list/snippets/list-control.html
@@ -1,4 +1,4 @@
-<!-- List with action -->
+<!-- List with avatar and controls -->
 <style>
 .demo-list-control {
   width: 300px;

diff --git a/src/list/snippets/list-item.html b/src/list/snippets/list-item.html
@@ -1,4 +1,4 @@
-<!-- List with action -->
+<!-- Simple list -->
 <style>
 .demo-list-item {
   width: 300px;

diff --git a/src/list/snippets/three-line.html b/src/list/snippets/three-line.html
@@ -1,7 +1,7 @@
 <!-- Three Line List with secondary info and action -->
 <style>
 .demo-list-three {
-  width: 600px;
+  width: 650px;
 }
 </style>
 
@@ -11,41 +11,38 @@
       <i class="material-icons mdl-list__item-avatar">person</i>
       <span>Bryan Cranston</span>
       <span class="mdl-list__item-text-body">
-        Bryan Cranston played the role of Bryan Cranston in Breaking Bad, he is also know
+        Bryan Cranston played the role of Walter in Breaking Bad. He is also known
         for playing Hal in Malcom in the Middle.
       </span>
     </span>
     <span class="mdl-list__item-secondary-content">
-      <span class="mdl-list__item-secondary-info">Actor</span>
-      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
+      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
     </span>
   </li>
   <li class="mdl-list__item mdl-list__item--three-line">
     <span class="mdl-list__item-primary-content">
       <i class="material-icons  mdl-list__item-avatar">person</i>
       <span>Aaron Paul</span>
       <span class="mdl-list__item-text-body">
-        Aaron Paul played the role of Aaron Paul in Breaking Bad. He also featured in
+        Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
         the "Need For Speed" Movie.
       </span>
     </span>
     <span class="mdl-list__item-secondary-content">
-      <span class="mdl-list__item-secondary-info">Actor</span>
-      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
+      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
     </span>
   </li>
   <li class="mdl-list__item mdl-list__item--three-line">
     <span class="mdl-list__item-primary-content">
       <i class="material-icons  mdl-list__item-avatar">person</i>
       <span>Bob Odenkirk</span>
       <span class="mdl-list__item-text-body">
-        Bob Odinkrik played the role of Bob Odenkirk in Breaking Bad. Due to public fondness for the
+        Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the
         character, Bob stars in his own show now, called "Better Call Saul".
       </span>
     </span>
     <span class="mdl-list__item-secondary-content">
-      <span class="mdl-list__item-secondary-info">Actor</span>
-      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
+      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
     </span>
   </li>
 </ul>