Merge remote-tracking branch 'origin/master' into typography_text_bas…

…eline
material-components · Jul 25, 2018 · 2bcc4b8 · 2bcc4b8
2 parents 4930296 + 42c8729
commit 2bcc4b8
Show file tree

Hide file tree

Showing 179 changed files with 9,108 additions and 4,624 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,9 @@
 language: node_js
 branches:
+  # Only run Travis on:
+  #   A) Commits made directly to the `master` branch (i.e., merged PRs); and
+  #   B) PRs that will eventually be merged into `master`.
+  # This prevents excessive resource usage and CI slowness.
   only:
   - master
 matrix:
@@ -28,9 +32,14 @@ matrix:
   - node_js: 8
     env:
     - TEST_SUITE=screenshot
+    git:
+      depth: 200
     script: npm run screenshot:test -- --no-fetch
-before_install:
-  # Source the script to run it in the same shell process. This ensures that any environment variables set by the
-  # script are visible to subsequent Travis CLI commands.
-  # https://superuser.com/a/176788/62792
-  - source test/screenshot/commands/travis.sh
+    before_install:
+      # Source the script to run it in the same shell process. This ensures that any environment variables set by the
+      # script are visible to subsequent Travis CLI commands.
+      # https://superuser.com/a/176788/62792
+      - source test/screenshot/infra/commands/travis.sh
+    install:
+      - npm install
+      #- npm ls # Noisy output, but useful for debugging npm package dependency version issues
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+<a name="0.37.1"></a>
+## [0.37.1](https://github.com/material-components/material-components-web/compare/v0.37.0...v0.37.1) (2018-07-16)
+
+
+### Bug Fixes
+
+* hot-patching closure annotations. ([#3024](https://github.com/material-components/material-components-web/issues/3024)) ([d5b95ab](https://github.com/material-components/material-components-web/commit/d5b95ab))
+* **button:** Remove dense/stroked line-height tweaks to improve alignment ([#3028](https://github.com/material-components/material-components-web/issues/3028)) ([8b5f595](https://github.com/material-components/material-components-web/commit/8b5f595))
+* **notched-outline:** Remove unused dependency from scss ([#3044](https://github.com/material-components/material-components-web/issues/3044)) ([85ecf11](https://github.com/material-components/material-components-web/commit/85ecf11))
+* **typography:**  Update variable reference to work for newer versions of ruby-sass ([#3047](https://github.com/material-components/material-components-web/issues/3047)) ([0dfad9a](https://github.com/material-components/material-components-web/commit/0dfad9a))
+
+
+
 <a name="0.37.0"></a>
 # [0.37.0](https://github.com/material-components/material-components-web/compare/v0.36.0...v0.37.0) (2018-07-02)
 

diff --git a/README.md b/README.md
@@ -109,10 +109,8 @@ This will produce a Material Design ripple on the button!
 
 We officially support the last two versions of every major browser. Specifically, we test on the following browsers:
 
-- Chrome
-- Safari
-- Firefox
-- IE 11/Edge
-- Opera
-- Mobile Safari
-- Chrome on Android
+- **Chrome** on Android, Windows, macOS, and Linux
+- **Firefox** on Windows, macOS, and Linux
+- **Safari** on iOS and macOS
+- **Edge** on Windows
+- **IE 11** on Windows
diff --git a/demos/index.html b/demos/index.html
@@ -70,7 +70,7 @@
             <span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_dialog_24px.svg" /></span>
             <span class="mdc-list-item__text">
               Dialog
-              <span class="mdc-list-item__secondary-text">Secondary text</span>
+              <span class="mdc-list-item__secondary-text">Implements a modal dialog window</span>
             </span>
           </a>
           <a href="drawer/index.html" role="listitem" class="mdc-list-item">

diff --git a/demos/list.html b/demos/list.html
@@ -39,7 +39,7 @@
       <div class="mdc-toolbar-fixed-adjust"></div>
       <section class="hero">
         <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars" aria-orientation="vertical">
-          <li class="mdc-list-item" tabindex="0">
+          <li class="mdc-list-item" tabindex="-1">
             <span class="mdc-list-item__graphic" role="presentation">
               <i class="material-icons" aria-hidden="true">folder</i>
             </span>
@@ -101,7 +101,7 @@
                    aria-labelledby="toggle-rtl-label" />
             <div class="mdc-checkbox__background">
               <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                <path class="mdc-checkbox__checkmark-path" fill="none"
+                <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white"
                       d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
               </svg>
               <div class="mdc-checkbox__mixedmark"></div>
@@ -279,6 +279,72 @@ <h3>Graphic Example - Icon with Text</h3>
               </li>
             </ul>
           </section>
+          <section>
+            <h3>Leading Checkbox</h3>
+            <ul class="mdc-list demo-list" id="leading-checkbox-list"
+                aria-orientation="vertical">
+              <li class="mdc-list-item checkbox-list-ripple-surface" tabindex="0">
+                <span class="mdc-list-item__graphic">
+                  <div class="mdc-checkbox">
+                    <input type="checkbox"
+                           class="mdc-checkbox__native-control"
+                           id="leading-checkbox-blueberries"/>
+                    <div class="mdc-checkbox__background">
+                      <svg class="mdc-checkbox__checkmark"
+                           viewBox="0 0 24 24">
+                        <path class="mdc-checkbox__checkmark-path"
+                              fill="none"
+                              stroke="white"
+                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+                      </svg>
+                      <div class="mdc-checkbox__mixedmark"></div>
+                    </div>
+                  </div>
+                </span>
+                <label for="leading-checkbox-blueberries">Blueberries</label>
+              </li>
+              <li class="mdc-list-item checkbox-list-ripple-surface">
+                <span class="mdc-list-item__graphic">
+                  <div class="mdc-checkbox">
+                    <input type="checkbox"
+                           class="mdc-checkbox__native-control"
+                           id="leading-checkbox-boysenberries"/>
+                    <div class="mdc-checkbox__background">
+                      <svg class="mdc-checkbox__checkmark"
+                           viewBox="0 0 24 24">
+                        <path class="mdc-checkbox__checkmark-path"
+                              fill="none"
+                              stroke="white"
+                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+                      </svg>
+                      <div class="mdc-checkbox__mixedmark"></div>
+                    </div>
+                  </div>
+                </span>
+                <label for="leading-checkbox-boysenberries">Boysenberries</label>
+              </li>
+              <li class="mdc-list-item checkbox-list-ripple-surface">
+                <span class="mdc-list-item__graphic">
+                  <div class="mdc-checkbox">
+                    <input type="checkbox"
+                           class="mdc-checkbox__native-control"
+                           id="leading-checkbox-strawberries"/>
+                    <div class="mdc-checkbox__background">
+                      <svg class="mdc-checkbox__checkmark"
+                           viewBox="0 0 24 24">
+                        <path class="mdc-checkbox__checkmark-path"
+                              fill="none"
+                              stroke="white"
+                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+                      </svg>
+                      <div class="mdc-checkbox__mixedmark"></div>
+                    </div>
+                  </div>
+                </span>
+                <label for="leading-checkbox-strawberries">Strawberries</label>
+              </li>
+            </ul>
+          </section>
           <section>
             <h3>Avatar List</h3>
             <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
@@ -375,6 +441,71 @@ <h3>Metadata (Dense)</h3>
               </li>
             </ul>
           </section>
+          <section>
+            <h3>Trailing Checkbox</h3>
+            <ul class="mdc-list demo-list" id="trailing-checkbox-list"
+                aria-orientation="vertical">
+              <li class="mdc-list-item checkbox-list-ripple-surface" tabindex="0">
+                <label for="trailing-checkbox-blueberries">Blueberries</label>
+                <span class="mdc-list-item__meta">
+                  <div class="mdc-checkbox">
+                    <input type="checkbox"
+                           class="mdc-checkbox__native-control"
+                           id="trailing-checkbox-blueberries"/>
+                    <div class="mdc-checkbox__background">
+                      <svg class="mdc-checkbox__checkmark"
+                           viewBox="0 0 24 24">
+                        <path class="mdc-checkbox__checkmark-path"
+                              fill="none"
+                              stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+                      </svg>
+                      <div class="mdc-checkbox__mixedmark"></div>
+                    </div>
+                  </div>
+                </span>
+              </li>
+              <li class="mdc-list-item checkbox-list-ripple-surface">
+                <label for="trailing-checkbox-boysenberries">Boysenberries</label>
+                <span class="mdc-list-item__meta">
+                  <div class="mdc-checkbox">
+                    <input type="checkbox"
+                           class="mdc-checkbox__native-control"
+                           id="trailing-checkbox-boysenberries"/>
+                    <div class="mdc-checkbox__background">
+                      <svg class="mdc-checkbox__checkmark"
+                           viewBox="0 0 24 24">
+                        <path class="mdc-checkbox__checkmark-path"
+                              fill="none"
+                              stroke="white"
+                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+                      </svg>
+                      <div class="mdc-checkbox__mixedmark"></div>
+                    </div>
+                  </div>
+                </span>
+              </li>
+              <li class="mdc-list-item checkbox-list-ripple-surface">
+                <label for="trailing-checkbox-strawberries">Strawberries</label>
+                <span class="mdc-list-item__meta">
+                  <div class="mdc-checkbox">
+                    <input type="checkbox"
+                           class="mdc-checkbox__native-control"
+                           id="trailing-checkbox-strawberries"/>
+                    <div class="mdc-checkbox__background">
+                      <svg class="mdc-checkbox__checkmark"
+                           viewBox="0 0 24 24">
+                        <path class="mdc-checkbox__checkmark-path"
+                              fill="none"
+                              stroke="white"
+                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+                      </svg>
+                      <div class="mdc-checkbox__mixedmark"></div>
+                    </div>
+                  </div>
+                </span>
+              </li>
+            </ul>
+          </section>
           <section>
             <h3>Avatar + Metadata</h3>
             <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
@@ -957,6 +1088,15 @@ <h3>Example - Interactive List</h3>
     <script src="/assets/material-components-web.js" async></script>
     <script>
       demoReady(function() {
+        var checkboxes = document.querySelectorAll('.mdc-checkbox');
+        [].forEach.call(checkboxes, function(checkbox) {
+          var cbInstance = mdc.checkbox.MDCCheckbox.attachTo(checkbox);
+          if (checkbox.parentElement.classList.contains('mdc-form-field')) {
+            var ffInstance = mdc.formField.MDCFormField.attachTo(checkbox.parentElement);
+            ffInstance.input = cbInstance;
+          }
+        });
+
         var demoWrapper = document.getElementById('demo-wrapper');
         var hero = document.querySelector('.hero');
         document.getElementById('toggle-rtl').addEventListener('change', function() {
@@ -979,6 +1119,36 @@ <h3>Example - Interactive List</h3>
             evt.preventDefault();
           });
         }
+
+        function clickHandler(evt, li) {
+          if (evt.target === li) {
+            var checkbox = li.querySelector('.mdc-checkbox__native-control');
+            checkbox.checked = !checkbox.checked;
+          }
+        };
+
+        function addRippleToListItems(list) {
+          var listItems = list.querySelectorAll('.mdc-list-item');
+
+          [].forEach.call(listItems, function(li) {
+            mdc.ripple.MDCRipple.attachTo(li);
+            li.addEventListener('click', function(e) {
+              clickHandler(e, li);
+            });
+          });
+        };
+
+        [].slice.call(document.querySelectorAll('.mdc-list')).forEach(function(ele) {
+          var list = mdc.list.MDCList.attachTo(ele);
+          list.wrapFocus = true;
+
+          if (ele.parentElement.classList.contains('hero')) {
+            list.singleSelection = true;
+          }
+        });
+
+        addRippleToListItems(document.getElementById('leading-checkbox-list'));
+        addRippleToListItems(document.getElementById('trailing-checkbox-list'));
       });
     </script>
   </body>

diff --git a/demos/list.scss b/demos/list.scss
@@ -68,26 +68,26 @@ a.material-icons {
 }
 
 #demo-wrapper .mdc-list, #demo-wrapper .mdc-list-group {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, .1);
 }
 
 #demo-wrapper .mdc-list-group .mdc-list {
   border: none;
 }
 
 #demo-wrapper h2 {
-  font-size: 1.5em;
-  margin-bottom: 0.8em;
+  margin-bottom: .8em;
   margin-left: 24px;
+  font-size: 1.5em;
 }
 
 #demo-wrapper h3 {
-  margin-bottom: 0.8em;
+  margin-bottom: .8em;
 }
 
 .hero .mdc-list {
   @include mdc-elevation(4);
 
-  background-color: white;
   min-width: 320px;
+  background-color: white;
 }