feat(ripple): Implement improved graceful degradation

Resolves #189
material-components · Feb 22, 2017 · bfac404 · bfac404
1 parent 69389b8
commit bfac404
Show file tree

Hide file tree

Showing 15 changed files with 362 additions and 269 deletions.
diff --git a/demos/button.html b/demos/button.html
@@ -74,6 +74,42 @@ <h1>MDC WEB BUTTON</h1>
             Div
           </div>
         </fieldset>
+        <fieldset>
+          <legend>Buttons - CSS Only</legend>
+          <button class="mdc-button" data-demo-no-js>
+            Default
+          </button>
+          <button class="mdc-button mdc-button--raised" data-demo-no-js>
+            Raised
+          </button>
+          <button class="mdc-button mdc-button--dense" data-demo-no-js>
+            Dense Default
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
+            Dense Raised
+          </button>
+          <button class="mdc-button mdc-button--compact" data-demo-no-js>
+            Compact
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
+            Compact Raised
+          </button>
+          <button class="mdc-button mdc-button--primary" data-demo-no-js>
+            Default with Primary
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--primary" data-demo-no-js>
+            Raised with Primary
+          </button>
+          <button class="mdc-button mdc-button--accent" data-demo-no-js>
+            Default with Accent
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
+            Raised with Accent
+          </button>
+          <div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
+            Div
+          </div>
+        </fieldset>
         <fieldset>
           <legend>Links with Button Style</legend>
           <a href="/button.html" class="mdc-button">
@@ -183,6 +219,42 @@ <h2>Dark theme</h2>
             Div
           </div>
         </fieldset>
+        <fieldset>
+          <legend>Buttons - CSS Only</legend>
+          <button class="mdc-button" data-demo-no-js>
+            Default
+          </button>
+          <button class="mdc-button mdc-button--raised" data-demo-no-js>
+            Raised
+          </button>
+          <button class="mdc-button mdc-button--dense" data-demo-no-js>
+            Dense Default
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
+            Dense Raised
+          </button>
+          <button class="mdc-button mdc-button--compact" data-demo-no-js>
+            Compact
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
+            Compact Raised
+          </button>
+          <button class="mdc-button mdc-button--primary" data-demo-no-js>
+            Default with Primary
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--primary" data-demo-no-js>
+            Raised with Primary
+          </button>
+          <button class="mdc-button mdc-button--accent" data-demo-no-js>
+            Default with Accent
+          </button>
+          <button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
+            Raised with Accent
+          </button>
+          <div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
+            Div
+          </div>
+        </fieldset>
         <fieldset disabled>
           <legend>Disabled Buttons</legend>
           <button class="mdc-button">
@@ -236,7 +308,7 @@ <h2>Dark theme</h2>
           }
         }, 250);
         function init() {
-          var btns = document.querySelectorAll('.mdc-button');
+          var btns = document.querySelectorAll('.mdc-button:not([data-demo-no-js]');
           for (var i = 0, btn; btn = btns[i]; i++) {
             mdc.ripple.MDCRipple.attachTo(btn);
           }

diff --git a/demos/checkbox.html b/demos/checkbox.html
@@ -57,7 +57,7 @@
     <main>
       <h1>MDC Checkbox</h1>
       <section>
-        <h2>Basic Example, no Javascript</h2>
+        <h2>CSS Only</h2>
         <div class="mdc-form-field">
           <div class="mdc-checkbox">
             <input type="checkbox"

diff --git a/demos/fab.html b/demos/fab.html
@@ -78,6 +78,29 @@ <h1>MDC FAB</h1>
             </span>
           </button>
         </fieldset>
+        <fieldset>
+          <legend>CSS Only FABs</legend>
+          <button class="mdc-fab material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+          <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+          <button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+          <button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
+          </button>
+        </fieldset>
         <fieldset disabled>
           <legend>Disabled FABs</legend>
           <button class="mdc-fab material-icons" aria-label="Favorite">
@@ -118,7 +141,7 @@ <h1>MDC FAB</h1>
           }
         }, 250);
         function init() {
-          var fabs = document.querySelectorAll('.mdc-fab');
+          var fabs = document.querySelectorAll('.mdc-fab:not([data-demo-no-js])');
           for (var i = 0, fab; fab = fabs[i]; i++) {
             mdc.ripple.MDCRipple.attachTo(fab);
           }

diff --git a/demos/radio.html b/demos/radio.html
@@ -46,8 +46,7 @@
     <main>
       <h1>MDC Radio</h1>
       <section>
-        <h2>Basic Example, No Javascript</h2>
-
+        <h2>CSS Only</h2>
         <div class="mdc-form-field">
           <div class="mdc-radio" data-demo-no-js>
             <input class="mdc-radio__native-control" type="radio" id="ex1-radio1" checked name="ex1">

diff --git a/demos/ripple.html b/demos/ripple.html
@@ -47,6 +47,14 @@
         border-radius: 50%;
       }
 
+      .mdc-ripple-surface[data-mdc-ripple-is-unbounded][data-demo-no-js]::before,
+      .mdc-ripple-surface[data-mdc-ripple-is-unbounded][data-demo-no-js]::after {
+        height: 100%;
+        left: 0;
+        top: 0;
+        width: 100%;
+      }
+
       button.demo-surface {
         display: inline-block; /* Safari does not center button text otherwise :( */
         background: none;
@@ -57,7 +65,14 @@
       }
 
       section {
-        margin: 48px;
+        align-items: center;
+        display: flex;
+        margin-left: 10px;
+      }
+
+      section > div {
+        margin: 48px 0;
+        width: 400px;
       }
 
       body {
@@ -82,6 +97,13 @@
         user-select: none;
         -webkit-user-select: none;
       }
+
+      @media (max-width: 565px) {
+        section {
+          flex-direction: column;
+          width: 100%;
+        }
+      }
     </style>
   </head>
   <body>
@@ -92,40 +114,80 @@
     <main>
       <h1>MDC Ripple</h1>
       <section>
-        <h2>Bounded</h2>
-        <div class="mdc-ripple-surface demo-surface mdc-elevation--z2" tabindex="0">
-          Interact with me!
+        <div>
+          <h2>Bounded</h2>
+          <div class="mdc-ripple-surface demo-surface mdc-elevation--z2" tabindex="0">
+            Interact with me!
+          </div>
+        </div>
+        <div>
+          <h2>Bounded - CSS Only</h2>
+          <div class="mdc-ripple-surface demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
+            Interact with me!
+          </div>
         </div>
       </section>
       <section>
-        <h2>Unbounded</h2>
-        <div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
-             aria-label="Favorite" tabindex="0">
-          favorite
+        <div>
+          <h2>Unbounded</h2>
+          <div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
+               aria-label="Favorite" tabindex="0">
+            favorite
+          </div>
+        </div>
+        <div>
+          <h2>Unbounded - CSS Only</h2>
+          <div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
+               aria-label="Favorite" data-demo-no-js tabindex="0">
+            favorite
+          </div>
         </div>
       </section>
       <section>
-        <h2>Theme Styles</h2>
-        <div
-          class="mdc-ripple-surface mdc-ripple-surface--primary
-                 mdc-theme--primary demo-surface mdc-elevation--z2" tabindex="0">
-          Primary
+        <div>
+          <h2>Theme Styles</h2>
+          <div
+            class="mdc-ripple-surface mdc-ripple-surface--primary
+                   mdc-theme--primary demo-surface mdc-elevation--z2" tabindex="0">
+            Primary
+          </div>
+          <div
+            class="mdc-ripple-surface mdc-ripple-surface--accent
+                   mdc-theme--accent demo-surface mdc-elevation--z2" tabindex="0">
+            Accent
+          </div>
         </div>
-        <div
-          class="mdc-ripple-surface mdc-ripple-surface--accent
-                 mdc-theme--accent demo-surface mdc-elevation--z2" tabindex="0">
-          Accent
+        <div>
+          <h2>Theme Styles - CSS Only</h2>
+          <div
+            class="mdc-ripple-surface mdc-ripple-surface--primary
+                   mdc-theme--primary demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
+            Primary
+          </div>
+          <div
+            class="mdc-ripple-surface mdc-ripple-surface--accent
+                   mdc-theme--accent demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
+            Accent
+          </div>
         </div>
+
       </section>
       <section>
-        <h2>Applied to <code>&lt;button&gt; element</h2>
+        <div>
+          <h2>Applied to <code>&lt;button&gt; element</h2>
           <button type="button" class="mdc-ripple-surface mdc-elevation--z2 demo-surface">button</button>
+        </div>
+        <div>
+          <h2>Applied to <code>&lt;button&gt; element - CSS Only</h2>
+          <button type="button" class="mdc-ripple-surface mdc-elevation--z2 demo-surface" data-demo-no-js>button</button>
+        </div>
+
       </section>
     </main>
     <script src="assets/material-components-web.js" charset="utf-8"></script>
     <script>
       (function(global) {
-        [].forEach.call(document.querySelectorAll('.mdc-ripple-surface'), function(surface) {
+        [].forEach.call(document.querySelectorAll('.mdc-ripple-surface:not([data-demo-no-js]'), function(surface) {
           mdc.ripple.MDCRipple.attachTo(surface);
         });
       })(this);