feat(drawer): Remove obsolete pre-states styles; update demo pages (#1738)

BREAKING CHANGE: the "mdc-...-drawer--selected" classes are replaced by "mdc-list-item--activated", as it pertains to a specific list item and not the entire drawer.

Author: kfranqueiro

demos/drawer/permanent-drawer-above-toolbar.html

@@ -77,7 +77,7 @@
       <div class="mdc-permanent-drawer__toolbar-spacer"></div>
       <div class="mdc-list-group">
         <nav class="mdc-list">
-          <a class="mdc-list-item mdc-permanent-drawer--selected" href="#">
+          <a class="mdc-list-item mdc-list-item--activated" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
           </a>
           <a class="mdc-list-item" href="#">
@@ -144,6 +144,22 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
       document.querySelector('#toggle-tall').addEventListener('click', function() {
         extraTall.style.display = extraTall.style.display ? '' : 'none';
       });
+
+      // Demonstrate application of --activated modifier to drawer menu items
+      var activatedClass = 'mdc-list-item--activated';
+      document.querySelector('.mdc-permanent-drawer').addEventListener('click', function(event) {
+        var el = event.target;
+        while (!el.classList.contains('mdc-list-item') && el) {
+          el = el.parentNode;
+        }
+        if (el) {
+          var activatedItem = document.querySelector('.' + activatedClass);
+          if (activatedItem) {
+            activatedItem.classList.remove(activatedClass);
+          }
+          event.target.classList.add(activatedClass);
+        }
+      });
     </script>
   </body>
 </html>

demos/drawer/permanent-drawer-below-toolbar.html

@@ -81,7 +81,7 @@
       <nav class="mdc-permanent-drawer">
         <div class="mdc-list-group">
           <nav class="mdc-list">
-            <a class="mdc-list-item mdc-permanent-drawer--selected" href="#">
+            <a class="mdc-list-item mdc-list-item--activated" href="#">
               <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
             </a>
             <a class="mdc-list-item" href="#">
@@ -135,6 +135,22 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
       document.querySelector('#toggle-tall').addEventListener('click', function() {
         extraTall.style.display = extraTall.style.display ? '' : 'none';
       });
+
+      // Demonstrate application of --activated modifier to drawer menu items
+      var activatedClass = 'mdc-list-item--activated';
+      document.querySelector('.mdc-permanent-drawer').addEventListener('click', function(event) {
+        var el = event.target;
+        while (!el.classList.contains('mdc-list-item') && el) {
+          el = el.parentNode;
+        }
+        if (el) {
+          var activatedItem = document.querySelector('.' + activatedClass);
+          if (activatedItem) {
+            activatedItem.classList.remove(activatedClass);
+          }
+          event.target.classList.add(activatedClass);
+        }
+      });
     </script>
   </body>
 </html>

demos/drawer/persistent-drawer.html

@@ -61,7 +61,7 @@
         <div class="mdc-persistent-drawer__toolbar-spacer"></div>
         <div class="mdc-list-group">
           <nav class="mdc-list">
-            <a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
+            <a class="mdc-list-item mdc-list-item--activated" href="#">
               <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
             </a>
             <a class="mdc-list-item" href="#">
@@ -123,6 +123,22 @@ <h1 class="mdc-typography--display1">Persistent Drawer</h1>
         drawerEl.addEventListener('MDCPersistentDrawer:close', function() {
           console.log('Received MDCPersistentDrawer:close');
         });
+
+      // Demonstrate application of --activated modifier to drawer menu items
+      var activatedClass = 'mdc-list-item--activated';
+      document.querySelector('.mdc-persistent-drawer__drawer').addEventListener('click', function(event) {
+        var el = event.target;
+        while (!el.classList.contains('mdc-list-item') && el) {
+          el = el.parentNode;
+        }
+        if (el) {
+          var activatedItem = document.querySelector('.' + activatedClass);
+          if (activatedItem) {
+            activatedItem.classList.remove(activatedClass);
+          }
+          event.target.classList.add(activatedClass);
+        }
+      });
       </script>
     </div>
   </body>

demos/drawer/temporary-drawer.html

@@ -59,7 +59,7 @@
         </header>
         <nav class="mdc-temporary-drawer__content mdc-list-group">
           <div id="icon-with-text-demo" class="mdc-list">
-            <a class="mdc-list-item mdc-temporary-drawer--selected" href="#">
+            <a class="mdc-list-item mdc-list-item--activated" href="#">
               <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
             </a>
             <a class="mdc-list-item" href="#">
@@ -108,6 +108,22 @@ <h1 class="mdc-typography--display1">Temporary Drawer</h1>
       drawerEl.addEventListener('MDCTemporaryDrawer:close', function() {
         console.log('Received MDCTemporaryDrawer:close');
       });
+
+      // Demonstrate application of --activated modifier to drawer menu items
+      var activatedClass = 'mdc-list-item--activated';
+      document.querySelector('.mdc-temporary-drawer__drawer').addEventListener('click', function(event) {
+        var el = event.target;
+        while (!el.classList.contains('mdc-list-item') && el) {
+          el = el.parentNode;
+        }
+        if (el) {
+          var activatedItem = document.querySelector('.' + activatedClass);
+          if (activatedItem) {
+            activatedItem.classList.remove(activatedClass);
+          }
+          event.target.classList.add(activatedClass);
+        }
+      });
     </script>
   </body>
 </html>

demos/theme/index.html

@@ -44,7 +44,7 @@
         </header>
         <nav class="mdc-temporary-drawer__content mdc-list-group">
           <div class="mdc-list">
-            <a class="mdc-list-item mdc-temporary-drawer--selected" href="#">
+            <a class="mdc-list-item mdc-list-item--activated" href="#">
               <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
             </a>
             <a class="mdc-list-item" href="#">

packages/mdc-drawer/README.md

@@ -49,7 +49,7 @@ than mobile.
   <div class="mdc-permanent-drawer__toolbar-spacer"></div>
   <div class="mdc-permanent-drawer__content">
     <nav id="icon-with-text-demo" class="mdc-list">
-      <a class="mdc-list-item mdc-permanent-drawer--selected" href="#">
+      <a class="mdc-list-item mdc-list-item--activated" href="#">
         <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
       </a>
       <a class="mdc-list-item" href="#">
@@ -75,7 +75,7 @@ Permanent drawers can also be set below the toolbar:
 <div class="content">
   <nav class="mdc-permanent-drawer mdc-typography">
     <nav id="icon-with-text-demo" class="mdc-list">
-      <a class="mdc-list-item mdc-permanent-drawer--selected" href="#">
+      <a class="mdc-list-item mdc-list-item--activated" href="#">
         <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
       </a>
       <a class="mdc-list-item" href="#">
@@ -112,7 +112,7 @@ Persistent drawers are acceptable for all sizes larger than mobile.
       </div>
     </header>
     <nav id="icon-with-text-demo" class="mdc-persistent-drawer__content mdc-list">
-      <a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
+      <a class="mdc-list-item mdc-list-item--activated" href="#">
         <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
       </a>
       <a class="mdc-list-item" href="#">
@@ -246,7 +246,7 @@ for any display size.
       </div>
     </header>
     <nav id="icon-with-text-demo" class="mdc-temporary-drawer__content mdc-list">
-      <a class="mdc-list-item mdc-temporary-drawer--selected" href="#">
+      <a class="mdc-list-item mdc-list-item--activated" href="#">
         <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
       </a>
       <a class="mdc-list-item" href="#">
@@ -276,7 +276,7 @@ very useful for visual alignment and consistency. Note that you can place conten
     <div class="mdc-temporary-drawer__toolbar-spacer"></div>
 
     <nav id="icon-with-text-demo" class="mdc-temporary-drawer__content mdc-list">
-      <a class="mdc-list-item mdc-temporary-drawer--selected" href="#">
+      <a class="mdc-list-item mdc-list-item--activated" href="#">
         <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
       </a>
       <a class="mdc-list-item" href="#">
@@ -303,7 +303,7 @@ for placing the actual content, which will be bottom-aligned.
     </header>
 
     <nav id="icon-with-text-demo" class="mdc-temporary-drawer__content mdc-list">
-      <a class="mdc-list-item mdc-temporary-drawer--selected" href="#">
+      <a class="mdc-list-item mdc-list-item--activated" href="#">
         <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
       </a>
       <a class="mdc-list-item" href="#">

packages/mdc-drawer/_mixins.scss

@@ -71,26 +71,13 @@
 }
 
 @mixin mdc-drawer-list_() {
-  .mdc-list-group,
-  .mdc-list {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
   .mdc-list-item {
     @include mdc-typography(body2);
 
     position: relative;
-    padding: 0 16px;
     outline: none;
     color: inherit;
     text-decoration: none;
-
-    // Remove the 16px left offset since we already expand the padding of the list item to take up
-    // the width of the drawer.
-    &.mdc-ripple-upgraded {
-      left: 0;
-    }
   }
 
   .mdc-list-item__graphic {
@@ -100,46 +87,6 @@
       color: rgba(255, 255, 255, .54);
     }
   }
-
-  // stylelint-disable selector-no-qualifying-type
-  &--selected.mdc-list-item,
-  &--selected.mdc-list-item .mdc-list-item__graphic {
-    @include mdc-theme-prop(color, primary);
-  }
-  // stylelint-enable selector-no-qualifying-type
-
-  /* TODO(sgomes): Revisit when we have interactive lists. */
-  .mdc-list-item::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transition: mdc-animation-exit-temporary(opacity, 120ms);
-    border-radius: inherit;
-    background: currentColor;
-    opacity: 0;
-    content: "";
-  }
-
-  .mdc-list-item:focus::before {
-    transition: mdc-animation-enter(opacity, 180ms);
-    opacity: .12;
-  }
-
-  .mdc-list-item:active::before {
-    /*
-      Slightly darker value for visual distinction.
-      This allows a full base that has distinct modes.
-      Progressive enhancement with ripples will provide complete button spec alignment.
-    */
-    transition: mdc-animation-enter(opacity, 180ms);
-    opacity: .18;
-  }
-
-  .mdc-list-item:active:focus::before {
-    transition-timing-function: $mdc-animation-standard-curve-timing-function;
-  }
 }
 
 @mixin mdc-drawer-base_() {