Merge branch 'master' into fix/select/add-adapter

material-components · Jul 30, 2018 · 3200c8e · 3200c8e
2 parents 1776e5c + 804f4a5
commit 3200c8e
Show file tree

Hide file tree

Showing 133 changed files with 8,548 additions and 447 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -24,7 +24,7 @@ We strive to make developing Material Components Web as frictionless as possible
 
 ### Setting up your development environment
 
-You'll need a recent version of [nodejs](https://nodejs.org/en/) to work on MDC Web. We [test our builds](https://travis-ci.org/material-components/material-components-web) using both the latest and LTS node versions, so use of one of those is recommended. You can use [nvm](https://github.com/creationix/nvm) to easily install and manage different versions of node on your system.
+You'll need a recent version of [nodejs](https://nodejs.org/en/) to work on MDC Web. We [test our builds](https://travis-ci.com/material-components/material-components-web) using both the latest and LTS node versions, so use of one of those is recommended. You can use [nvm](https://github.com/creationix/nvm) to easily install and manage different versions of node on your system.
 
 > **NOTE**: If you expect to commit updated or new dependencies, please ensure you are using npm 5, which will
 > also update `package-lock.json` correctly when you install or upgrade packages.
@@ -106,7 +106,7 @@ npm run test:closure # Runs closure build tests against all closurized files
 
 #### Running Tests across browsers
 
-If you're making big changes or developing new components, we encourage you to be a good citizen and test your changes across browsers! A super simple way to do this is to use [sauce labs](https://saucelabs.com/), which is how we tests our collaborator PRs on TravisCI:
+If you're making big changes or developing new components, we encourage you to be a good citizen and test your changes across browsers! A super simple way to do this is to use [sauce labs](https://saucelabs.com/), which is how we test our collaborator PRs on TravisCI:
 
 1. [Sign up](https://saucelabs.com/beta/signup) for a sauce labs account (choose "Open Sauce" as your selected plan; [it's free](https://saucelabs.com/opensauce/)!)
 2. [Download sauce connect](https://wiki.saucelabs.com/display/DOCS/Sauce+Connect+Proxy) for your OS and make sure that the `bin` folder in the downloaded zip is somewhere on your `$PATH`.

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-[![Build Status](https://img.shields.io/travis/material-components/material-components-web/master.svg)](https://travis-ci.org/material-components/material-components-web/)
+[![Build Status](https://travis-ci.com/material-components/material-components-web.svg?branch=master)](https://travis-ci.com/material-components/material-components-web/)
 [![codecov](https://codecov.io/gh/material-components/material-components-web/branch/master/graph/badge.svg)](https://codecov.io/gh/material-components/material-components-web)
 [![Chat](https://img.shields.io/discord/259087343246508035.svg)](https://discord.gg/material-components)
 

diff --git a/demos/switch.html b/demos/switch.html
@@ -18,6 +18,7 @@
   <head>
     <meta charset="utf-8">
     <title>Switch - Material Components Catalog</title>
+    <script src="/ready.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
     <link rel="stylesheet" href="/assets/switch.css">
@@ -63,9 +64,11 @@
       <div class="demo-wrapper">
         <section class="hero">
           <div class="mdc-switch">
-            <input type="checkbox" class="mdc-switch__native-control" role="switch">
-            <div class="mdc-switch__background">
-              <div class="mdc-switch__knob"></div>
+            <div class="mdc-switch__track"></div>
+            <div class="mdc-switch__thumb-underlay">
+              <div class="mdc-switch__thumb">
+                <input type="checkbox" class="mdc-switch__native-control" role="switch">
+              </div>
             </div>
           </div>
         </section>
@@ -74,21 +77,25 @@
           <h2>Enabled</h2>
           <div class="demo-switch-wrapper">
             <div class="mdc-switch">
-              <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
-              <div class="mdc-switch__background">
-                <div class="mdc-switch__knob"></div>
+              <div class="mdc-switch__track"></div>
+              <div class="mdc-switch__thumb-underlay">
+                <div class="mdc-switch__thumb">
+                  <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
+                </div>
               </div>
             </div>
             <label for="basic-switch" class="mdc-switch-label">off/on</label>
           </div>
           <div class="demo-switch-wrapper">
-            <div class="mdc-switch demo-switch--custom">
-              <input type="checkbox"
-                    id="basic-switch-custom"
-                    class="mdc-switch__native-control"
-                    role="switch" checked>
-              <div class="mdc-switch__background">
-                <div class="mdc-switch__knob"></div>
+            <div class="mdc-switch demo-switch--custom mdc-switch--checked">
+              <div class="mdc-switch__track"></div>
+              <div class="mdc-switch__thumb-underlay">
+                <div class="mdc-switch__thumb">
+                  <input type="checkbox"
+                  id="basic-switch-custom"
+                  class="mdc-switch__native-control"
+                  role="switch" checked>
+                </div>
               </div>
             </div>
             <label for="basic-switch-custom" class="mdc-switch-label">custom color</label>
@@ -97,14 +104,16 @@ <h2>Enabled</h2>
         <section class="example">
           <h2>Disabled</h2>
           <div class="demo-switch-wrapper">
-            <div class="mdc-switch">
-              <input type="checkbox"
-                    id="basic-switch--disabled"
-                    class="mdc-switch__native-control"
-                    role="switch"
-                    disabled>
-              <div class="mdc-switch__background">
-                <div class="mdc-switch__knob"></div>
+            <div class="mdc-switch mdc-switch--disabled">
+              <div class="mdc-switch__track"></div>
+              <div class="mdc-switch__thumb-underlay">
+                <div class="mdc-switch__thumb">
+                  <input type="checkbox"
+                  id="basic-switch--disabled"
+                  class="mdc-switch__native-control"
+                  role="switch"
+                  disabled>
+                </div>
               </div>
             </div>
             <label for="basic-switch--disabled" class="mdc-switch-label">off/on</label>
@@ -134,10 +143,16 @@ <h2>Disabled</h2>
 
     <script src="/assets/material-components-web.js" async></script>
     <script>
-      const demoWrapper = document.querySelector('.demo-wrapper');
+      var demoWrapper = document.querySelector('.demo-wrapper');
       document.getElementById('toggle-rtl').addEventListener('change', function() {
         this.checked ? demoWrapper.setAttribute('dir', 'rtl') : demoWrapper.removeAttribute('dir');
       });
+      demoReady(function() {
+        var switches = document.querySelectorAll('.mdc-switch');
+        for (var i = 0, switchEl; switchEl = switches[i]; i++) {
+          var switchInstance = new mdc.switchControl.MDCSwitch(switchEl);
+        }
+      });
     </script>
   </body>
 </html>
diff --git a/demos/switch.scss b/demos/switch.scss
@@ -28,9 +28,7 @@
 .demo-switch--custom {
   $color: $material-color-red-500;
 
-  @include mdc-switch-track-color($color);
-  @include mdc-switch-knob-color($color);
-  @include mdc-switch-focus-indicator-color($color);
+  @include mdc-switch-toggled-on-color($color);
 }
 
 .rtl-toggle {