feat(fab): Add ink ripple support

Part of #20

demos/fab.html

@@ -104,5 +104,26 @@ <h1>MDC FAB</h1>
       </section>
     </main>
     <script src="assets/material-components-web.js" charset="utf-8"></script>
+    <script>
+      // Because we load our CSS via webpack, we need to ensure that all of the correct styles
+      // are applied before ripples are attached. Otherwise, ripples may use the computed styles of
+      // elements before our CSS is applied, leading to improper UX.
+      (function() {
+        var pollId = 0;
+        pollId = setInterval(function() {
+          var pos = getComputedStyle(document.querySelector('.mdc-fab.material-icons')).position;
+          if (pos === 'relative') {
+            init();
+            clearInterval(pollId);
+          }
+        }, 250);
+        function init() {
+          var fabs = document.querySelectorAll('.mdc-fab');
+          for (var i = 0, fab; fab = fabs[i]; i++) {
+            mdc.ripple.MDCRipple.attachTo(fab);
+          }
+        }
+      })();
+    </script>
   </body>
 </html>

packages/mdc-fab/README.md

@@ -14,7 +14,7 @@ npm install --save @material/fab
 ## Usage
 
 The demonstrations use the [Material Design Icon Font](https://design.google.com/icons/).
-You may include this to use them as shown or use any other icon method you wish. 
+You may include this to use them as shown or use any other icon method you wish.
 
 ### Default
 
@@ -81,14 +81,35 @@ Developers must position it as-needed within their applications designs.
 
 > **Note** In this example we are using an SVG icon. When you are using SVG icons do _not_ specifiy the `fill` attribute. Fill is set by the components where SVGs may be used.
 
+### Adding ripples to FABs
+
+To add the ink ripple effect to a FAB, attach a [ripple](../packages/mdc-ripple) instance to the
+FAB element.
+
+```js
+mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-fab'));
+```
+
+You can also do this declaratively when using the [material-components-web](../packages/material-components-web) package.
+
+```html
+<button class="mdc-fab material-icons" aria-label="Favorite" data-mdc-auto-init="MDCRipple">
+  <span class="mdc-fab__icon">
+    favorite
+  </span>
+</button>
+```
+
+FABs are fully aware of ripple styles, so no DOM or CSS changes are required to use them.
+
 ## Classes
 
 ### Block
 
 The block class is `mdc-fab`. This defines the top-level button element.
 
 ### Element
-The button component has a single `span` element added as a child of the button due to buttons not adhering to flexbox rules 
+The button component has a single `span` element added as a child of the button due to buttons not adhering to flexbox rules
 in all browsers. See [this Stackoverflow post](http://stackoverflow.com/posts/35466231/revisions) for details.
 
 ### Modifier

packages/mdc-fab/mdc-fab.scss

@@ -1,25 +1,24 @@
-/**
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+// Copyright 2016 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 
 @import "@material/animation/functions";
 @import "@material/animation/variables";
 @import "@material/elevation/mixins";
+@import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 
-/* postcss-bem-linter: define fab */
+// postcss-bem-linter: define fab
 .mdc-fab {
   display: inline-flex;
   position: relative;
@@ -98,17 +97,15 @@
     border: 0;
   }
 
-  /*
-    This allows for using SVGs within them to align properly in all browsers.
-    Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.
-  */
+  // This allows for using SVGs within them to align properly in all browsers.
+  // Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.
 
-  /* stylelint-disable selector-no-type */
-
-  /* postcss-bem-linter: ignore */
+  // stylelint-disable selector-no-type
+  // postcss-bem-linter: ignore
   > svg {
     width: 100%;
   }
+  // stylelint-enable selector-no-type
 
   fieldset:disabled &,
   &:disabled {
@@ -126,4 +123,17 @@
   width: 100%;
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end
+
+.mdc-fab.mdc-ripple-upgraded {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
+  @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
+
+  overflow: hidden;
+}
+
+.mdc-fab--plain.mdc-ripple-upgraded {
+  @include mdc-ripple-bg((pseudo: "::before"));
+  @include mdc-ripple-fg((pseudo: "::after"));
+}

packages/mdc-fab/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@material/animation": "^0.1.1",
     "@material/elevation": "^0.1.1",
+    "@material/ripple": "^0.1.1",
     "@material/theme": "^0.1.0"
   }
 }