WIP Squashed commit of the following:

commit f17e0d3 Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Thu Mar 8 13:20:48 2018 -0500 fix(text-field): Clicking label should focus textfield (#2353) commit 77b15f4 Author: Bonnie Zhou <bzbee003@gmail.com> Date: Wed Mar 7 16:29:57 2018 -0800 refactor(button): Remove compact variant (#2361) BREAKING CHANGE: The compact variant of MDC Button is removed. commit 35a5cfc Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Tue Mar 6 19:54:23 2018 -0500 fix(toolbar): Fix colors for svg icons. Update custom-toolbar demo (#2331) SVG icons in the toolbar will now use the same color as the font icons. commit dc52201 Author: Andrew C. Dvorak <acdvorak@gmail.com> Date: Tue Mar 6 16:00:12 2018 -0800 fix(theme): Move @alternate annotations for Closure Stylesheets (#2355) `@alternate` annotations need to come before the _second_ property. Otherwise, Closure Compiler strips the first property (it does not output it at all). commit 3c04419 Author: aprigogin <17075403+aprigogin@users.noreply.github.com> Date: Tue Mar 6 14:29:12 2018 -0800 fix(button): icon in rtl should have margin right flipped. (#2346) commit b9000a4 Author: Cory Reed <swashcap@gmail.com> Date: Tue Mar 6 07:37:40 2018 -0800 fix(demos): Correct RTL/LTR toggling in demos in Safari (#2348) commit ab85736 Author: Andrew C. Dvorak <acdvorak@gmail.com> Date: Mon Mar 5 19:00:11 2018 -0500 fix: Use `var` instead of `const` in menu demo (#2345) Safari 9.x and IE 10 do not support `const` commit dc3d69f Author: aprigogin <17075403+aprigogin@users.noreply.github.com> Date: Mon Mar 5 15:22:31 2018 -0800 fix(rtl): Adding noflip annotations to fix downstream rtl issues (#2344) * fix(rtl): Adding noflip annotations to fix downstream rtl issues * fix(rtl): remove changes to button, will be in separate PR * fix(rtl): remove changes to button, will be in separate PR - second attempt. * fix(rtl): removed extra whitespace commit eb4138e Author: Patrick RoDee <prodee@google.com> Date: Mon Mar 5 14:10:46 2018 -0800 docs: Update CHANGELOG.md commit f478610 Author: Patrick RoDee <prodee@google.com> Date: Mon Mar 5 14:10:30 2018 -0800 chore: Publish commit 78408bb Author: Andrew C. Dvorak <acdvorak@gmail.com> Date: Mon Mar 5 16:13:02 2018 -0500 fix: Use `var` instead of `const` in demos/ready.js (#2343) Safari 9.x and IE 10 do not support `const`, and `ready.js` is not transpiled to ES5. commit 49a9449 Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Mon Mar 5 12:21:54 2018 -0500 chore(select): Fix JS example in Readme (#2332) commit bc17291 Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Fri Mar 2 13:21:07 2018 -0500 feat(top app bar): Add short top app bar always collapsed feature (#2327) commit 0ba7d10 Author: Matty Goo <mattgoo@google.com> Date: Fri Mar 2 11:33:19 2018 -0500 fix(text-field): disable validation check in setRequired (#2201) BREAKING CHANGE: removed setRequired and isRequired from foundation. commit c14d244 Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Fri Mar 2 10:37:18 2018 -0500 chore(select): Fix ID values in demo (#2330) Remove unused ID and changed duplicated ID values. Also fixed the parentheses in RTL. commit ecf4060 Author: Bonnie Zhou <bzbee003@gmail.com> Date: Thu Mar 1 16:38:41 2018 -0500 feat(chips): Change chip color when selected (#2329) BREAKING CHANGE: The `mdc-chip--activated` class, `mdc-chip-activated-ink-color` Sass mixin, and the `toggleActive` methods on `MDCChip`/`MDCChipSet` have been renamed to `mdc-chip--selected`, `mdc-chip-selected-ink-color`, and `toggleSelected`, respectively. commit 4b24b51 Author: Matty Goo <mattgoo@google.com> Date: Wed Feb 28 15:20:19 2018 -0500 chore(floating-label): separate label module from text-field (#2237) BREAKING CHANGE: must use `.mdc-floating-label` selector instead of `.mdc-text-field__label` commit fd8d8d9 Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Wed Feb 28 14:21:55 2018 -0500 feat(top-app-bar): Implement short top app bar (#2290) Adds the short top app bar variant to the top app bar. commit a9f9bf2 Author: Kenneth G. Franqueiro <kfranqueiro@users.noreply.github.com> Date: Wed Feb 28 13:06:41 2018 -0500 docs(select): Fix front matter for label sub-component (#2323)
material-components · Mar 8, 2018 · 5ccfdc1 · 5ccfdc1
1 parent c15ce56
commit 5ccfdc1
Show file tree

Hide file tree

Showing 113 changed files with 2,101 additions and 980 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,44 @@
+<a name="0.32.0"></a>
+# [0.32.0](https://github.com/material-components/material-components-web/compare/v0.31.0...v0.32.0) (2018-03-05)
+
+
+### Bug Fixes
+
+* **chips:** Emit custom event from trailing icon ([#2286](https://github.com/material-components/material-components-web/issues/2286)) ([e849937](https://github.com/material-components/material-components-web/commit/e849937))
+* **ripple:** Fix selected opacity levels ([#2294](https://github.com/material-components/material-components-web/issues/2294)) ([06e39b1](https://github.com/material-components/material-components-web/commit/06e39b1))
+* **select:** add tests for select label package ([#2289](https://github.com/material-components/material-components-web/issues/2289)) ([b8ae66c](https://github.com/material-components/material-components-web/commit/b8ae66c))
+* **select:** Fix floating label for pre-selected option ([#2306](https://github.com/material-components/material-components-web/issues/2306)) ([d8dae34](https://github.com/material-components/material-components-web/commit/d8dae34))
+* **text-field:** disable validation check in setRequired ([#2201](https://github.com/material-components/material-components-web/issues/2201)) ([0ba7d10](https://github.com/material-components/material-components-web/commit/0ba7d10))
+* **toolbar:** Fix icon padding for ripples, and vertical alignment in FF/IE/Edge ([#2138](https://github.com/material-components/material-components-web/issues/2138)) ([d2c9726](https://github.com/material-components/material-components-web/commit/d2c9726))
+* Use `var` instead of `const` in demos/ready.js ([#2343](https://github.com/material-components/material-components-web/issues/2343)) ([78408bb](https://github.com/material-components/material-components-web/commit/78408bb))
+
+
+### Chores
+
+* **floating-label:** separate label module from text-field ([#2237](https://github.com/material-components/material-components-web/issues/2237)) ([4b24b51](https://github.com/material-components/material-components-web/commit/4b24b51))
+
+
+### Features
+
+* **chips:** Add `mdc-chip-set--choice` variant ([#2215](https://github.com/material-components/material-components-web/issues/2215)) ([f89cd10](https://github.com/material-components/material-components-web/commit/f89cd10))
+* **chips:** Change chip color when selected ([#2329](https://github.com/material-components/material-components-web/issues/2329)) ([ecf4060](https://github.com/material-components/material-components-web/commit/ecf4060))
+* **chips:** Create mixin to customize chip margins ([#2277](https://github.com/material-components/material-components-web/issues/2277)) ([b996b7f](https://github.com/material-components/material-components-web/commit/b996b7f))
+* **chips:** Handle multi-select for filter chips ([#2297](https://github.com/material-components/material-components-web/issues/2297)) ([807b6ce](https://github.com/material-components/material-components-web/commit/807b6ce))
+* **top app bar:** Add short top app bar always collapsed feature ([#2327](https://github.com/material-components/material-components-web/issues/2327)) ([bc17291](https://github.com/material-components/material-components-web/commit/bc17291))
+* **top-app-bar:** Baseline top app bar component ([#2225](https://github.com/material-components/material-components-web/issues/2225)) ([0ad69c4](https://github.com/material-components/material-components-web/commit/0ad69c4))
+* **top-app-bar:** Implement short top app bar ([#2290](https://github.com/material-components/material-components-web/issues/2290)) ([fd8d8d9](https://github.com/material-components/material-components-web/commit/fd8d8d9))
+
+
+### BREAKING CHANGES
+
+* **text-field:** removed setRequired and isRequired from foundation.
+* **chips:** The `mdc-chip--activated` class, `mdc-chip-activated-ink-color` Sass mixin, and the `toggleActive` methods on `MDCChip`/`MDCChipSet` have been renamed to `mdc-chip--selected`, `mdc-chip-selected-ink-color`, and `toggleSelected`, respectively.
+* **floating-label:** must use `.mdc-floating-label` selector instead of `.mdc-text-field__label`
+* **chips:** Added `mdc-chip-set--filter` as a variant to be set in the HTML.
+* **chips:** New MDCChipAdapter methods for handling trailing icons must be implemented.
+
+
+
 <a name="0.31.0"></a>
 # [0.31.0](https://github.com/material-components/material-components-web/compare/v0.30.0...v0.31.0) (2018-02-20)
 

diff --git a/demos/button.html b/demos/button.html
@@ -112,9 +112,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--dense">
               Dense
             </button>
@@ -137,9 +134,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--raised">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--raised mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--raised mdc-button--dense">
               Dense
             </button>
@@ -162,9 +156,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--unelevated">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--unelevated mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--unelevated mdc-button--dense">
               Dense
             </button>
@@ -187,9 +178,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--stroked">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--stroked mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--stroked mdc-button--dense">
               Dense
             </button>
@@ -225,9 +213,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--dense" data-demo-no-js>
               Dense
             </button>
@@ -250,9 +235,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--raised" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
               Dense
             </button>
@@ -275,9 +257,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--unelevated" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--unelevated mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--unelevated mdc-button--dense" data-demo-no-js>
               Dense
             </button>
@@ -300,9 +279,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--stroked" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--stroked mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--stroked mdc-button--dense" data-demo-no-js>
               Dense
             </button>

diff --git a/demos/card.html b/demos/card.html
@@ -238,11 +238,7 @@ <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energ
         var rtlToggle = document.getElementById('toggle-rtl');
         rtlToggle.addEventListener('change', function() {
           var docEl = document.documentElement;
-          if (rtlToggle.checked) {
-            docEl.setAttribute('dir', 'rtl');
-          } else {
-            docEl.removeAttribute('dir');
-          }
+          docEl.setAttribute('dir', rtlToggle.checked ? 'rtl' : 'ltr');
         });
 
         [].forEach.call(document.querySelectorAll('.mdc-button'), function(surface) {

diff --git a/demos/checkbox.html b/demos/checkbox.html
@@ -98,8 +98,8 @@ <h2>CSS Only</h2>
             <label for="basic-checkbox">Default checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact" onclick="this.parentElement.parentElement.hasAttribute('dir') ? this.parentElement.parentElement.removeAttribute('dir') : this.parentElement.parentElement.setAttribute('dir', 'rtl');">Toggle RTL</button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact" onclick="document.querySelector('.mdc-form-field').classList.toggle('mdc-form-field--align-end');">Toggle <code>--align-end</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked" onclick="this.parentElement.parentElement.hasAttribute('dir') ? this.parentElement.parentElement.removeAttribute('dir') : this.parentElement.parentElement.setAttribute('dir', 'rtl');">Toggle RTL</button>
+            <button type="button" class="mdc-button mdc-button--stroked" onclick="document.querySelector('.mdc-form-field').classList.toggle('mdc-form-field--align-end');">Toggle <code>--align-end</code></button>
           </div>
         </div>
         <div>
@@ -210,8 +210,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox">Default checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
         </div>
         <div>
@@ -235,8 +235,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-indeterminate">Indeterminate checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
           <script>
             document.getElementById('native-js-checkbox-indeterminate').indeterminate = true;
@@ -262,8 +262,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-custom-all">Custom colored checkbox (stroke, fill, ripple, and focus)</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
         </div>
         <div>
@@ -286,8 +286,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-custom-stroke-and-fill">Custom colored checkbox (stroke and fill only)</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
         </div>
       </section>

diff --git a/demos/chips.scss b/demos/chips.scss
@@ -24,5 +24,6 @@
 .custom-chip-secondary {
   @include mdc-chip-fill-color(white);
   @include mdc-chip-ink-color($mdc-theme-secondary);
+  @include mdc-chip-selected-ink-color($mdc-theme-secondary);
   @include mdc-chip-stroke(2px, solid, $mdc-theme-secondary);
 }
diff --git a/demos/menu.html b/demos/menu.html
@@ -320,25 +320,25 @@
           });
         }
 
-        const marginInputsEl = document.querySelector('#margin-inputs');
+        var marginInputsEl = document.querySelector('#margin-inputs');
         var inputs = marginInputsEl.querySelectorAll('input[type="text"]');
         for (var i = 0; i < inputs.length; i++) {
           inputs[i].addEventListener('change', function(evt) {
-            const topMarginInput = document.getElementById('top-margin');
-            const bottomMarginInput = document.getElementById('bottom-margin');
-            const rightMarginInput = document.getElementById('right-margin');
-            const leftMarginInput = document.getElementById('left-margin');
-            const margin = {top: parseInt(topMarginInput.value, 10),
-                            right: parseInt(rightMarginInput.value, 10),
-                            bottom: parseInt(bottomMarginInput.value, 10),
-                            left: parseInt(leftMarginInput.value, 10)};
+            var topMarginInput = document.getElementById('top-margin');
+            var bottomMarginInput = document.getElementById('bottom-margin');
+            var rightMarginInput = document.getElementById('right-margin');
+            var leftMarginInput = document.getElementById('left-margin');
+            var margin = {top: parseInt(topMarginInput.value, 10),
+                          right: parseInt(rightMarginInput.value, 10),
+                          bottom: parseInt(bottomMarginInput.value, 10),
+                          left: parseInt(leftMarginInput.value, 10)};
             menu.setAnchorMargin(margin);
           });
         }
 
-        const rtl = document.querySelector('input[name="is-rtl"]');
+        var rtl = document.querySelector('input[name="is-rtl"]');
         rtl.addEventListener('change', function() {
-          const demoWrapper = document.getElementById('demo-wrapper');
+          var demoWrapper = document.getElementById('demo-wrapper');
           if (rtl.checked) {
             demoWrapper.setAttribute('dir', 'rtl');
           } else {

diff --git a/demos/ready.js b/demos/ready.js
@@ -79,7 +79,7 @@ window.demoReady = (function(root) {
       return;
     }
 
-    const elapsedTimeMs = Date.now() - startTimeMs;
+    var elapsedTimeMs = Date.now() - startTimeMs;
     if (elapsedTimeMs > POLL_MAX_WAIT_MS) {
       clearInterval(pollTimer);
       removeDetectionDom();

diff --git a/demos/select.html b/demos/select.html
@@ -106,7 +106,7 @@ <h2 class="mdc-typography--title">Fully-Featured JS Component</h2>
                   Fruit Roll Ups
                 </li>
                 <li class="mdc-list-item" role="option" id="cotton-candy" tabindex="0">
-                  Candy (cotton)
+                  Candy (cotton)&#x200E;
                 </li>
                 <li class="mdc-list-item" role="option" id="vegetables" aria-disabled="true" tabindex="0">
                   Vegetables
@@ -152,7 +152,7 @@ <h2 class="mdc-typography--title">Select box</h2>
                   Fruit Roll Ups
                 </li>
                 <li class="mdc-list-item" role="option" id="cotton-candy2" tabindex="0">
-                  Candy (cotton)
+                  Candy (cotton)&#x200E;
                 </li>
                 <li class="mdc-list-item" role="option" id="vegetables2" aria-disabled="true" tabindex="0">
                   Vegetables
@@ -185,7 +185,7 @@ <h2 class="mdc-typography--title">Select box</h2>
 
       <section class="example">
         <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
-        <section id="demo-wrapper">
+        <section>
           <div id="js-pre-selected" class="mdc-select" role="listbox">
             <div class="mdc-select__surface" tabindex="0">
               <div class="mdc-select__label">Food Group</div>
@@ -194,16 +194,16 @@ <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
             </div>
             <div class="mdc-menu mdc-select__menu">
               <ul class="mdc-list mdc-menu__items">
-                <li class="mdc-list-item" role="option" id="fruit-roll-ups" tabindex="0" aria-selected="true">
+                <li class="mdc-list-item" role="option" id="fruit-roll-ups3" tabindex="0" aria-selected="true">
                   Fruit Roll Ups
                 </li>
-                <li class="mdc-list-item" role="option" id="cotton-candy" tabindex="0">
+                <li class="mdc-list-item" role="option" id="cotton-candy3" tabindex="0">
                   Candy (cotton)
                 </li>
-                <li class="mdc-list-item" role="option" id="vegetables" aria-disabled="true" tabindex="0">
+                <li class="mdc-list-item" role="option" id="vegetables3" aria-disabled="true" tabindex="0">
                   Vegetables
                 </li>
-                <li class="mdc-list-item" role="option" id="noodles" tabindex="0">
+                <li class="mdc-list-item" role="option" id="noodles3" tabindex="0">
                   Noodles
                 </li>
               </ul>

diff --git a/demos/snackbar.html b/demos/snackbar.html
@@ -124,14 +124,14 @@ <h2 class="mdc-typography--title">Basic Example</h2>
 
         <div class="mdc-text-field">
           <input type="text" id="message" class="mdc-text-field__input" value="Message deleted">
-          <label class="mdc-text-field__label" for="message">Message Text</label>
+          <label class="mdc-floating-label" for="message">Message Text</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <br/>
 
         <div class="mdc-text-field">
           <input type="text" id="action" class="mdc-text-field__input" value="Undo">
-          <label class="mdc-text-field__label" for="action">Action Text</label>
+          <label class="mdc-floating-label" for="action">Action Text</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <br/>