fix(list): Update single line list to ellipsis (#3460)

material-components · Aug 29, 2018 · 60cf6c5 · 60cf6c5
1 parent f57c731
commit 60cf6c5
Show file tree

Hide file tree

Showing 16 changed files with 1,687 additions and 1,200 deletions.
diff --git a/demos/dialog.html b/demos/dialog.html
@@ -149,17 +149,61 @@ <h2 id="mdc-dialog-with-list-label" class="mdc-dialog__header__title">
             </header>
             <section id="mdc-dialog-with-list-description" class="mdc-dialog__body mdc-dialog__body--scrollable">
               <ul class="mdc-list">
-                <li class="mdc-list-item">None</li>
-                <li class="mdc-list-item">Callisto</li>
-                <li class="mdc-list-item">Ganymede</li>
-                <li class="mdc-list-item">Luna</li>
-                <li class="mdc-list-item">Marimba</li>
-                <li class="mdc-list-item">Schwifty</li>
-                <li class="mdc-list-item">Callisto</li>
-                <li class="mdc-list-item">Ganymede</li>
-                <li class="mdc-list-item">Luna</li>
-                <li class="mdc-list-item">Marimba</li>
-                <li class="mdc-list-item">Schwifty</li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__text">
+                    None
+                  </span>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__text">
+                    Callisto
+                  </span>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__text">
+                    Ganymede
+                  </span>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__text">
+                    Luna
+                  </span>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__text">
+                    Marimba
+                  </span>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__text">
+                    Schwifty
+                  </span>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__text">
+                    Callisto
+                  </span>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__text">
+                    Ganymede
+                  </span>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__text">
+                    Luna
+                  </span>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__text">
+                    Marimba
+                  </span>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__text">
+                    Schwifty
+                  </span>
+                </li>
               </ul>
             </section>
             <footer class="mdc-dialog__footer">

diff --git a/demos/drawer/dismissible-drawer.html b/demos/drawer/dismissible-drawer.html
@@ -43,44 +43,62 @@ <h6 class="mdc-drawer__subtitle">[email protected]</h6>
         <nav class="mdc-list">
           <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
-            Inbox
+            <span class="mdc-list-item__text">
+              Inbox
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
-            Star
+            <span class="mdc-list-item__text">
+              Star
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
-            Sent Mail
+            <span class="mdc-list-item__text">
+              Sent Mail
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
-            Drafts
+            <span class="mdc-list-item__text">
+              Drafts
+            </span>
           </a>
 
           <hr class="mdc-list-divider">
           <h6 class="mdc-list-group__subheader">Labels</h6>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Family
+            <span class="mdc-list-item__text">
+              Family
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Friends
+            <span class="mdc-list-item__text">
+              Friends
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Work
+            <span class="mdc-list-item__text">
+              Work
+            </span>
           </a>
 
           <hr class="mdc-list-divider">
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
-            Settings
+            <span class="mdc-list-item__text">
+              Settings
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
-            Help & feedback
+            <span class="mdc-list-item__text">
+              Help & feedback
+            </span>
           </a>
         </nav>
       </div>
@@ -195,7 +213,7 @@ <h1 class="mdc-typography--headline4">Dismissible Drawer</h1>
         var selectedDestinationEl = document.querySelector('.demo-selected-destination');
         var mainEl = document.querySelector('.demo-main');
         listEl.addEventListener('click', function(event) {
-          selectedDestinationEl.textContent = event.target.lastChild.textContent;
+          selectedDestinationEl.textContent = event.target.lastElementChild.textContent;
           mainEl.querySelector('input').focus();
         });
         document.body.addEventListener('MDCDrawer:closed', function() {

diff --git a/demos/drawer/modal-drawer.html b/demos/drawer/modal-drawer.html
@@ -43,44 +43,62 @@ <h6 class="mdc-drawer__subtitle">[email protected]</h6>
         <nav class="mdc-list">
           <a class="mdc-list-item mdc-list-item--activated" href="#" tabindex="0">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
-            Inbox
+            <span class="mdc-list-item__text">
+              Inbox
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
-            Star
+            <span class="mdc-list-item__text">
+              Star
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
-            Sent Mail
+            <span class="mdc-list-item__text">
+              Sent Mail
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
-            Drafts
+            <span class="mdc-list-item__text">
+              Drafts
+            </span>
           </a>
 
           <hr class="mdc-list-divider">
           <h6 class="mdc-list-group__subheader">Labels</h6>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Family
+            <span class="mdc-list-item__text">
+              Family
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Friends
+            <span class="mdc-list-item__text">
+             Friends
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
-            Work
+            <span class="mdc-list-item__text">
+             Work
+            </span>
           </a>
 
           <hr class="mdc-list-divider">
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
-            Settings
+            <span class="mdc-list-item__text">
+              Settings
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
-            Help & feedback
+            <span class="mdc-list-item__text">
+              Help & feedback
+            </span>
           </a>
         </nav>
       </div>
@@ -197,7 +215,7 @@ <h1 class="mdc-typography--headline4">Modal Drawer</h1>
         var mainEl = document.querySelector('.demo-main');
         listEl.addEventListener('click', function(event) {
           drawer.open = false;
-          selectedDestinationEl.textContent = event.target.lastChild.textContent;
+          selectedDestinationEl.textContent = event.target.lastElementChild.textContent;
         });
         document.body.addEventListener('MDCDrawer:closed', function() {
           mainEl.querySelector('input').focus();

diff --git a/demos/drawer/permanent-drawer.html b/demos/drawer/permanent-drawer.html
@@ -42,36 +42,63 @@ <h6 class="mdc-drawer__subtitle">[email protected]</h6>
       <div class="mdc-drawer__content">
         <nav class="mdc-list">
           <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true" tabindex="0">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
+            <span class="mdc-list-item__text">
+              Inbox
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
+            <span class="mdc-list-item__text">
+              Star
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>Sent Mail
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
+            <span class="mdc-list-item__text">
+              Sent Mail
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>Drafts
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
+            <span class="mdc-list-item__text">
+              Drafts
+            </span>
           </a>
 
           <hr class="mdc-list-divider">
           <h6 class="mdc-list-group__subheader">Labels</h6>
           <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>Family
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+            <span class="mdc-list-item__text">
+              Family
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>Friends
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+            <span class="mdc-list-item__text">
+              Friends
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>Work
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
+            <span class="mdc-list-item__text">
+              Work
+            </span>
           </a>
 
           <hr class="mdc-list-divider">
           <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>Settings
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
+            <span class="mdc-list-item__text">
+              Settings
+            </span>
           </a>
           <a class="mdc-list-item" href="#">
-            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>Help & feedback
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">announcement</i>
+            <span class="mdc-list-item__text">
+              Help & feedback
+            </span>
           </a>
         </nav>
       </div>
@@ -180,7 +207,7 @@ <h1 class="mdc-typography--headline4">Permanent Drawer</h1>
         var selectedDestinationEl = document.querySelector('.demo-selected-destination');
         var mainEl = document.querySelector('.demo-main');
         listEl.addEventListener('click', function(event) {
-          selectedDestinationEl.textContent = event.target.lastChild.textContent;
+          selectedDestinationEl.textContent = event.target.lastElementChild.textContent;
           mainEl.querySelector('input').focus();
         });
       });