Merge branch 'master' into feat/select-improvements

.github/ISSUE_TEMPLATE.md

@@ -15,7 +15,7 @@ feature requests.
 If you'd like to work on a component, please ensure that you *submit an Engineering Outline before
 submitting a pull request*. You can read more about this in our [contributing docs](https://github.com/material-components/material-components-web/blob/master/CONTRIBUTING.md#building-components).
 
-MDC-Web is still under active development. You can see our current progress on [master](https://github.com/material-components/material-components-web/tree/master) as well as an overview of the direction we're headed in our [developer guide](https://github.com/material-components/material-components-web/blob/master/docs/DEVELOPER.md).
+MDC-Web is still under active development. You can see our current progress on [master](https://github.com/material-components/material-components-web/tree/master) as well as an overview of our [architecture and practices](https://github.com/material-components/material-components-web/blob/master/docs/code).
 
 If you're interested in information for a specific component, check out our [component issues](https://github.com/material-components/material-components-web/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Av2-component) to see which milestone it's associated with and subscribe to updates to it. If an issue has the `in-tracker` label, you can also take a look at our [public Pivotal Tracker](https://www.pivotaltracker.com/n/projects/1664011) for a rough estimate of when we'll get to it.
 

CHANGELOG.md

@@ -1,3 +1,45 @@
+<a name="0.24.0"></a>
+# [0.24.0](https://github.com/material-components/material-components-web/compare/v0.23.0...v0.24.0) (2017-10-30)
+
+
+### Bug Fixes
+
+* **button:** Revise button minimum width ([#1487](https://github.com/material-components/material-components-web/issues/1487)) ([cb73283](https://github.com/material-components/material-components-web/commit/cb73283))
+* **layout-grid:** Import the variables in the mixin ([#1232](https://github.com/material-components/material-components-web/issues/1232)) ([924144b](https://github.com/material-components/material-components-web/commit/924144b))
+* **ripple:** Avoid duplicating common styles ([#1463](https://github.com/material-components/material-components-web/issues/1463)) ([756d8a6](https://github.com/material-components/material-components-web/commit/756d8a6))
+* **snackbar:** Explicitly use border-box ([#1453](https://github.com/material-components/material-components-web/issues/1453)) ([7455978](https://github.com/material-components/material-components-web/commit/7455978))
+
+
+### Features
+
+* **button:** Use new ripple mixins, and remove unnecessary mixin ([#1471](https://github.com/material-components/material-components-web/issues/1471)) ([510f356](https://github.com/material-components/material-components-web/commit/510f356))
+* **checkbox:** Use new ripple mixins, and remove unnecessary mixin ([#1472](https://github.com/material-components/material-components-web/issues/1472)) ([92b22eb](https://github.com/material-components/material-components-web/commit/92b22eb))
+* **fab:** Use new ripple mixins; remove unnecessary mixin/variable ([#1473](https://github.com/material-components/material-components-web/issues/1473)) ([fb798db](https://github.com/material-components/material-components-web/commit/fb798db))
+* **icon-toggle:** Add public API for MDCRipple in icon-toggle ([#1396](https://github.com/material-components/material-components-web/issues/1396)) ([f496581](https://github.com/material-components/material-components-web/commit/f496581))
+* **icon-toggle:** Use new ripple mixins ([#1474](https://github.com/material-components/material-components-web/issues/1474)) ([cbc3e1c](https://github.com/material-components/material-components-web/commit/cbc3e1c))
+* **list:** Use new ripple mixins ([#1475](https://github.com/material-components/material-components-web/issues/1475)) ([0647576](https://github.com/material-components/material-components-web/commit/0647576))
+* **radio:** Add theme color mixins and update default color to secondary ([#1410](https://github.com/material-components/material-components-web/issues/1410)) ([da9d48f](https://github.com/material-components/material-components-web/commit/da9d48f)), closes [#1149](https://github.com/material-components/material-components-web/issues/1149)
+* **radio:** Use new ripple mixins, and remove unnecessary mixin ([#1476](https://github.com/material-components/material-components-web/issues/1476)) ([94a826d](https://github.com/material-components/material-components-web/commit/94a826d))
+* **ripple:** Add new simpler mixins and remove unused CSS vars ([#1452](https://github.com/material-components/material-components-web/issues/1452)) ([a983c01](https://github.com/material-components/material-components-web/commit/a983c01))
+* **ripple:** Remove old complex mixins ([#1496](https://github.com/material-components/material-components-web/issues/1496)) ([47c6859](https://github.com/material-components/material-components-web/commit/47c6859))
+* **switch:** Add color theme mixins and update default color to secondary ([#1411](https://github.com/material-components/material-components-web/issues/1411)) ([e4b4fa7](https://github.com/material-components/material-components-web/commit/e4b4fa7)), closes [#1144](https://github.com/material-components/material-components-web/issues/1144)
+* **tabs:** Use new ripple mixins ([#1492](https://github.com/material-components/material-components-web/issues/1492)) ([253fba0](https://github.com/material-components/material-components-web/commit/253fba0))
+* **textfield:** Add mixin allowing customization of border radii ([#1446](https://github.com/material-components/material-components-web/issues/1446)) ([483e3d5](https://github.com/material-components/material-components-web/commit/483e3d5))
+* **textfield:** Use new ripple mixins and remove hover ripple styles ([#1477](https://github.com/material-components/material-components-web/issues/1477)) ([2a71ef7](https://github.com/material-components/material-components-web/commit/2a71ef7))
+* **theme:** rename all color_palette instances ([#1479](https://github.com/material-components/material-components-web/issues/1479)) ([375661d](https://github.com/material-components/material-components-web/commit/375661d))
+
+
+### BREAKING CHANGES
+
+* **ripple:** The existing MDC Ripple Sass mixins mdc-ripple-base, mdc-ripple-fg, and mdc-ripple-bg have been removed, replaced by the new easier-to-use mixins mdc-ripple-surface, mdc-ripple-color, and mdc-ripple-radius.
+* **radio:** The mdc-radio-ripple mixin has been removed; use mdc-ripple-color directly.
+* **fab:** The mdc-fab-ripple mixin and $mdc-fab-light-ripple-config variable have been removed; use MDC Ripple's mdc-ripple-color mixin and opacity variables directly.
+* **checkbox:** The mdc-checkbox-ripple mixin has been removed; use mdc-ripple-color directly.
+* **button:** The mdc-button-ripple mixin has been removed; use mdc-ripple-color directly.
+* **theme:** _color_palette.scss has been renamed to _color-palette.scss in mdc-theme
+
+
+
 <a name="0.23.0"></a>
 # [0.23.0](https://github.com/material-components/material-components-web/compare/v0.22.0...v0.23.0) (2017-10-16)
 

CONTRIBUTING.md

@@ -20,7 +20,7 @@ The Material Components contributing policies and procedures can be found in the
 
 ## Development Process
 
-We strive to make developing Material Components Web as frictionless as possible, both for ourselves and for our community. This section should get you up and running working on the MDC-Web codebase. Before beginning development, you may want to read through our brief [developer guide](./docs/developer.md) to get a better understanding of our overall architecture.
+We strive to make developing Material Components Web as frictionless as possible, both for ourselves and for our community. This section should get you up and running working on the MDC-Web codebase. Before beginning development, you may want to read through our overview on [architecture and best practices](./docs/code) to get a better understanding of our overall structure.
 
 ### Setting up your development environment
 

demos/button.scss

@@ -20,16 +20,16 @@
 @import "../packages/mdc-button/variables";
 @import "../packages/mdc-checkbox/mdc-checkbox";
 @import "../packages/mdc-form-field/mdc-form-field";
+@import "../packages/mdc-ripple/mixins";
 @import "../packages/mdc-typography/mdc-typography";
 
 .mdc-button.secondary-text-button {
   @include mdc-button-ink-color($mdc-theme-secondary);
-  @include mdc-button-ripple((theme-style: secondary, opacity: $mdc-unfilled-button-ripple-opacity));
+  @include mdc-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity);
 
   @include mdc-theme-dark(".mdc-button") {
-    // TODO(yiranm): Revisit ripple initialization after ripple refactoring
     @include mdc-button-ink-color($mdc-theme-secondary);
-    @include mdc-button-ripple((theme-style: secondary, opacity: $mdc-unfilled-button-ripple-opacity));
+    @include mdc-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity);
   }
 }
 
@@ -44,12 +44,12 @@
 .mdc-button.secondary-stroked-button {
   @include mdc-button-ink-color($mdc-theme-secondary);
   @include mdc-button-stroke-color($mdc-theme-secondary);
-  @include mdc-button-ripple((theme-style: secondary, opacity: $mdc-unfilled-button-ripple-opacity));
+  @include mdc-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity);
 
   @include mdc-theme-dark(".mdc-button") {
     @include mdc-button-ink-color($mdc-theme-secondary);
     @include mdc-button-stroke-color($mdc-theme-secondary);
-    @include mdc-button-ripple((theme-style: secondary, opacity: $mdc-unfilled-button-ripple-opacity));
+    @include mdc-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity);
   }
 }
 

demos/checkbox.scss

@@ -18,15 +18,16 @@
 @import "../packages/mdc-button/mdc-button";
 @import "../packages/mdc-checkbox/mdc-checkbox";
 @import "../packages/mdc-form-field/mdc-form-field";
-@import "../packages/mdc-theme/color_palette";
+@import "../packages/mdc-ripple/mixins";
+@import "../packages/mdc-theme/color-palette";
 @import "../packages/mdc-theme/mixins";
 @import "../packages/mdc-typography/mdc-typography";
 
 .mdc-checkbox.demo-checkbox--custom-all {
   $color: $material-color-red-500;
 
   @include mdc-checkbox-focus-indicator-color($color);
-  @include mdc-checkbox-ripple((base-color: $color, opacity: $mdc-checkbox-ripple-opacity));
+  @include mdc-ripple-color($color, $mdc-checkbox-ripple-opacity);
   @include mdc-checkbox-container-colors(
     $unmarked-stroke-color: $color,
     $unmarked-fill-color: rgba($color, .25),

demos/common.scss

@@ -18,15 +18,16 @@
 
 @import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
 
-@import "../packages/mdc-theme/color_palette";
+@import "../packages/mdc-theme/color-palette";
 
 // Base style
 $mdc-theme-primary: $material-color-grey-900 !default;
 $mdc-theme-secondary: $material-color-light-green-a700 !default;
 
-// Import button mixins to apply overrides for dark theme
+// Import button and ripple mixins to apply overrides for dark theme
 // TODO(kfranqueiro): Pending further design discussion around how to manage dark theme
 @import "../packages/mdc-button/mixins";
+@import "../packages/mdc-ripple/mixins";
 // All demo pages have a top toolbar, and most of them use theme variables.
 // Import these *after* setting theme colors to override defaults in mdc-theme.
 @import "../packages/mdc-theme/mdc-theme";
@@ -53,7 +54,7 @@ $dark-button-color: $material-color-light-green-a200;
 .mdc-button {
   @include mdc-theme-dark {
     @include mdc-button-ink-color($dark-button-color);
-    @include mdc-button-ripple((base-color: $dark-button-color, opacity: $mdc-unfilled-button-ripple-opacity));
+    @include mdc-ripple-color($dark-button-color, $mdc-unfilled-button-ripple-opacity);
   }
 }
 

demos/fab.scss

@@ -15,7 +15,7 @@
 //
 
 @import "./common";
-@import "../packages/mdc-theme/color_palette";
+@import "../packages/mdc-theme/color-palette";
 @import "../packages/mdc-fab/mdc-fab";
 @import "../packages/mdc-fab/mixins";
 

demos/radio.scss

@@ -17,7 +17,8 @@
 @import "./common";
 @import "../packages/mdc-form-field/mdc-form-field";
 @import "../packages/mdc-radio/mdc-radio";
-@import "../packages/mdc-theme/color_palette";
+@import "../packages/mdc-ripple/mixins";
+@import "../packages/mdc-theme/color-palette";
 @import "../packages/mdc-typography/mdc-typography";
 
 .mdc-radio.demo-radio--custom {
@@ -27,5 +28,5 @@
   @include mdc-radio-checked-stroke-color($color);
   @include mdc-radio-ink-color($material-color-orange-500);
   @include mdc-radio-focus-indicator-color($color);
-  @include mdc-radio-ripple((base-color: $color));
+  @include mdc-ripple-color($color, $mdc-radio-ripple-opacity);
 }

demos/snackbar.html

@@ -136,12 +136,14 @@ <h2 class="mdc-typography--title">Basic Example</h2>
         <div class="mdc-textfield">
           <input type="text" id="message" class="mdc-textfield__input" value="Message deleted">
           <label class="mdc-textfield__label" for="message">Message Text</label>
+          <div class="mdc-textfield__bottom-line"></div>
         </div>
         <br/>
 
         <div class="mdc-textfield">
           <input type="text" id="action" class="mdc-textfield__input" value="Undo">
           <label class="mdc-textfield__label" for="action">Action Text</label>
+          <div class="mdc-textfield__bottom-line"></div>
         </div>
         <br/>
 

demos/switch.scss

@@ -16,7 +16,7 @@
 
 @import "./common";
 @import "../packages/mdc-switch/mdc-switch";
-@import "../packages/mdc-theme/color_palette";
+@import "../packages/mdc-theme/color-palette";
 @import "../packages/mdc-typography/mdc-typography";
 
 .demo-switch-wrapper {

demos/textfield.html

@@ -74,8 +74,7 @@
       <div class="mdc-toolbar-fixed-adjust"></div>
       <section class="hero">
         <div class="mdc-textfield">
-          <input type="text" class="mdc-textfield__input" id="my-textfield"
-            aria-controls="my-textfield-helptext" data-demo-no-auto-js>
+          <input type="text" class="mdc-textfield__input" id="my-textfield" aria-controls="my-textfield-helptext">
           <label for="my-textfield" class="mdc-textfield__label">Text Field</label>
           <div class="mdc-textfield__bottom-line"></div>
         </div>
@@ -91,8 +90,7 @@
         <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
         <section id="demo-textfield-wrapper">
           <div class="mdc-textfield">
-            <input type="text" class="mdc-textfield__input" id="my-textfield"
-                  aria-controls="my-textfield-helptext" data-demo-no-auto-js>
+            <input type="text" class="mdc-textfield__input" id="my-textfield" aria-controls="my-textfield-helptext">
             <label for="my-textfield" class="mdc-textfield__label">Email Address</label>
             <div class="mdc-textfield__bottom-line"></div>
           </div>

demos/theme/index.scss

@@ -34,7 +34,7 @@
 @import "../../packages/mdc-switch/mdc-switch";
 @import "../../packages/mdc-tabs/mdc-tabs";
 @import "../../packages/mdc-textfield/mdc-textfield";
-@import "../../packages/mdc-theme/color_palette";
+@import "../../packages/mdc-theme/color-palette";
 @import "../../packages/mdc-theme/mixins";
 @import "../../packages/mdc-theme/variables";
 @import "../../packages/mdc-toolbar/variables";
@@ -136,11 +136,11 @@ figure {
 
 .mdc-button.secondary-text-button {
   @include mdc-button-ink-color($mdc-theme-secondary);
-  @include mdc-button-ripple((base-color: $mdc-theme-secondary, opacity: .16));
+  @include mdc-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity);
 
   @include mdc-theme-dark(".mdc-button") {
     @include mdc-button-ink-color($mdc-theme-secondary);
-    @include mdc-button-ripple((base-color: $mdc-theme-secondary, opacity: .16));
+    @include mdc-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity);
   }
 }
 
@@ -155,12 +155,12 @@ figure {
 .mdc-button.secondary-stroked-button {
   @include mdc-button-ink-color($mdc-theme-secondary);
   @include mdc-button-stroke-color($mdc-theme-secondary);
-  @include mdc-button-ripple((base-color: $mdc-theme-secondary, opacity: .16));
+  @include mdc-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity);
 
   @include mdc-theme-dark(".mdc-button") {
     @include mdc-button-ink-color($mdc-theme-secondary);
     @include mdc-button-stroke-color($mdc-theme-secondary);
-    @include mdc-button-ripple((base-color: $mdc-theme-secondary, opacity: .16));
+    @include mdc-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity);
   }
 }
 
@@ -401,33 +401,15 @@ figure {
 }
 
 .demo-ripple-surface--primary {
-  &::before,
-  &::after {
-    @include mdc-theme-prop(background-color, primary);
-  }
-
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .16));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .16));
+  @include mdc-ripple-color(primary, $mdc-ripple-pressed-dark-ink-opacity);
 }
 
 .demo-ripple-surface--secondary {
-  &::before,
-  &::after {
-    @include mdc-theme-prop(background-color, secondary);
-  }
-
-  @include mdc-ripple-bg((pseudo: "::before", theme-style: secondary, opacity: .16));
-  @include mdc-ripple-fg((pseudo: "::after", theme-style: secondary, opacity: .16));
+  @include mdc-ripple-color(secondary, $mdc-ripple-pressed-dark-ink-opacity);
 }
 
 .demo-ripple-surface--custom {
-  &::before,
-  &::after {
-    @include mdc-theme-prop(background-color, $demo-custom-color);
-  }
-
-  @include mdc-ripple-bg((pseudo: "::before", base-color: $demo-custom-color, opacity: .16));
-  @include mdc-ripple-fg((pseudo: "::after", base-color: $demo-custom-color, opacity: .16));
+  @include mdc-ripple-color($demo-custom-color, $mdc-ripple-pressed-dark-ink-opacity);
 }
 
 .mdc-ripple-surface[data-mdc-ripple-is-unbounded] {

docs/code/README.md

@@ -4,7 +4,7 @@
 
 MDC Web has split each dynamic component's JavaScript into two pieces:
 Foundation and Adapter. This lets us reuse Foundation code across multiple web
-platforms, e.g. Wiz and Angular, by re-implementing only the Adapter. For now
+platforms, e.g. React and Angular, by re-implementing only the Adapter. For now
 we've only implemented a vanilla JavaScript version of the Adapter
 
 ## Architecture

docs/code/architecture.md

@@ -26,7 +26,7 @@ with the required HTML structure.
 
 MDC Web has split each dynamic component's JavaScript into two pieces:
 Foundation and Adapter. This lets us reuse Foundation code across multiple web
-platforms, e.g. Wiz and Angular, by re-implementing only the Adapter. For now
+platforms, e.g. React and Angular, by re-implementing only the Adapter. For now
 we've only implemented a vanilla JavaScript version of the Adapter.
 
 ### Foundation

docs/getting-started.md

@@ -15,7 +15,7 @@ your framework that wraps MDC-Web, check out our [framework integration guide](.
 ## MDC-Web quick start: building a simple greeting app
 
 The best way to learn any new technology is to get your hands dirty and build something with it, so
-that is what we will do here!  You will be building a simple greeting page which lets you enter a name and greets you as such. Here is the [finished example](https://plnkr.co/edit/ahd84pIgOF7OTKgavvPP?p=preview).
+that is what we will do here!  You will be building a simple greeting page which lets you enter a name and greets you as such.
 
 As you go through this guide, we encourage you to code along with it. By the end, you will have
 learned the fundamentals incorporating MDC-Web into simple sites, as well as worked with some of the
@@ -115,6 +115,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
           <label for="firstname" class="mdc-textfield__label">
             First Name
           </label>
+          <div class="mdc-textfield__bottom-line"></div>
         </div>
       </div>
 
@@ -124,6 +125,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
           <label for="lastname" class="mdc-textfield__label">
             Last Name
           </label>
+          <div class="mdc-textfield__bottom-line"></div>
         </div>
       </div>
     </div>