feat(list): Updated two-line list to use typography baseline to match…

… spec. (#3085) BREAKING CHANGE The layout of two-line list items is changed to wrap primary text line in a separate block element.
material-components · Jul 25, 2018 · 4d11b37 · 4d11b37
1 parent dd3817a
commit 4d11b37
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 74 deletions.
diff --git a/demos/list.html b/demos/list.html
@@ -44,7 +44,7 @@
               <i class="material-icons" aria-hidden="true">folder</i>
             </span>
             <span class="mdc-list-item__text">
-              Photos
+              <span class="mdc-list-item__primary-text">Photos</span>
               <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
             </span>
             <a href="#" class="mdc-list-item__meta material-icons"
@@ -58,7 +58,7 @@
               <i class="material-icons" aria-hidden="true">folder</i>
             </span>
             <span class="mdc-list-item__text">
-              Recipes
+              <span class="mdc-list-item__primary-text">Recipes</span>
               <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
             </span>
             <a href="#" class="mdc-list-item__meta material-icons"
@@ -72,7 +72,7 @@
               <i class="material-icons" aria-hidden="true">folder</i>
             </span>
             <span class="mdc-list-item__text">
-              Work
+              <span class="mdc-list-item__primary-text">Work</span>
               <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
             </span>
             <a href="#" class="mdc-list-item__meta material-icons"
@@ -125,7 +125,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Photos
+                    <span class="mdc-list-item__primary-text">Photos</span>
                     <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -139,7 +139,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Recipes
+                    <span class="mdc-list-item__primary-text">Recipes</span>
                     <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -153,7 +153,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Work
+                    <span class="mdc-list-item__primary-text">Work</span>
                     <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -172,7 +172,7 @@ <h3 class="mdc-list-group__subheader">Files</h3>
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Vacation Itinerary
+                    <span class="mdc-list-item__primary-text">Vacation Itinerary</span>
                     <span class="mdc-list-item__secondary-text">Jan 10, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -186,7 +186,7 @@ <h3 class="mdc-list-group__subheader">Files</h3>
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Kitchen Remodel
+                    <span class="mdc-list-item__primary-text">Kitchen Remodel</span>
                     <span class="mdc-list-item__secondary-text">Jan 20, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -596,19 +596,19 @@ <h3>Text-Only</h3>
                 aria-orientation="vertical">
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -620,19 +620,19 @@ <h3>Text-Only (Dense)</h3>
                 aria-orientation="vertical">
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -645,21 +645,21 @@ <h3>Graphic</h3>
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -672,21 +672,21 @@ <h3>Graphic (Dense)</h3>
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -699,21 +699,21 @@ <h3>Avatar List</h3>
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -726,21 +726,21 @@ <h3>Avatar List (dense)</h3>
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__graphic"></span>
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
@@ -752,21 +752,21 @@ <h3>Metadata</h3>
                 aria-orientation="vertical">
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$10.00</span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$20.00</span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$30.00</span>
@@ -779,21 +779,21 @@ <h3>Metadata (Dense)</h3>
                 aria-orientation="vertical">
               <li class="mdc-list-item" tabindex="0">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$10.00</span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$20.00</span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
-                  Two-line item
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">$30.00</span>
@@ -809,7 +809,7 @@ <h3>Example - Two-line Avatar + Text + Icon</h3>
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Photos
+                  <span class="mdc-list-item__primary-text">Photos</span>
                   <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
                 </span>
                 <a href="#" class="mdc-list-item__meta material-icons"
@@ -823,7 +823,7 @@ <h3>Example - Two-line Avatar + Text + Icon</h3>
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Recipes
+                  <span class="mdc-list-item__primary-text">Recipes</span>
                   <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
                 </span>
                 <a href="#" class="mdc-list-item__meta material-icons"
@@ -837,7 +837,7 @@ <h3>Example - Two-line Avatar + Text + Icon</h3>
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Work
+                  <span class="mdc-list-item__primary-text">Work</span>
                   <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
                 </span>
                 <a href="#" class="mdc-list-item__meta material-icons"
@@ -859,10 +859,8 @@ <h3>Lists w/ Ellipsis</h3>
                   </i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Photos
-                  <span class="mdc-list-item__secondary-text">
-                    This is some secondary text
-                  </span>
+                  <span class="mdc-list-item__primary-text">Photos</span>
+                  <span class="mdc-list-item__secondary-text">This is some secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">
                   <i class="material-icons" aria-hidden="true">
@@ -877,10 +875,8 @@ <h3>Lists w/ Ellipsis</h3>
                   </i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Photos of my best photography using my finely tuned skills and eye
-                  <span class="mdc-list-item__secondary-text">
-                    This is some secondary text
-                  </span>
+                  <span class="mdc-list-item__primary-text">Photos of my best photography using my finely tuned skills and eye</span>
+                  <span class="mdc-list-item__secondary-text">This is some secondary text</span>
                 </span>
                 <span class="mdc-list-item__meta">
                   <i class="material-icons" aria-hidden="true">
@@ -895,10 +891,8 @@ <h3>Lists w/ Ellipsis</h3>
                   </i>
                 </span>
                 <span class="mdc-list-item__text">
-                  Work Photos
-                  <span class="mdc-list-item__secondary-text">
-                    This is a description of work photos from the years 2018 to present time while I was a barista
-                  </span>
+                  <span class="mdc-list-item__primary-text">Work Photos</span>
+                  <span class="mdc-list-item__secondary-text">This is a description of work photos from the years 2018 to present time while I was a barista</span>
                 </span>
                 <span class="mdc-list-item__meta">
                   <i class="material-icons" aria-hidden="true">
@@ -982,7 +976,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Photos
+                    <span class="mdc-list-item__primary-text">Photos</span>
                     <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -996,7 +990,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Recipes
+                    <span class="mdc-list-item__primary-text">Recipes</span>
                     <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -1010,7 +1004,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Work
+                    <span class="mdc-list-item__primary-text">Work</span>
                     <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -1029,7 +1023,7 @@ <h3 class="mdc-list-group__subheader">Files</h3>
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Vacation Itinerary
+                    <span class="mdc-list-item__primary-text">Vacation Itinerary</span>
                     <span class="mdc-list-item__secondary-text">Jan 10, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"
@@ -1043,7 +1037,7 @@ <h3 class="mdc-list-group__subheader">Files</h3>
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
-                    Kitchen Remodel
+                    <span class="mdc-list-item__primary-text">Kitchen Remodel</span>
                     <span class="mdc-list-item__secondary-text">Jan 20, 2014</span>
                   </span>
                   <a href="#" class="mdc-list-item__meta material-icons"

diff --git a/demos/list.scss b/demos/list.scss
@@ -20,6 +20,7 @@
 @import "../packages/mdc-form-field/mdc-form-field";
 @import "../packages/mdc-list/mdc-list";
 @import "../packages/mdc-ripple/mixins";
+@import "../packages/mdc-typography/mixins";
 
 a.material-icons {
   text-decoration: none;