feat(fab): Remove disabled styles (#1198)

BREAKING CHANGE: Removes styles for disabled FABs, as FABs were not designed to be disabled.

Author: kfranqueiro

demos/fab.html

@@ -139,29 +139,6 @@
             </span>
           </button>
         </fieldset>
-        <fieldset disabled>
-          <legend>Disabled FABs</legend>
-          <button class="mdc-fab material-icons" aria-label="Favorite">
-            <span class="mdc-fab__icon">
-              favorite_border
-            </span>
-          </button>
-          <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
-            <span class="mdc-fab__icon">
-              favorite_border
-            </span>
-          </button>
-          <button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite">
-            <span class="mdc-fab__icon">
-              favorite_border
-            </span>
-          </button>
-          <button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite">
-            <span class="mdc-fab__icon">
-              favorite_border
-            </span>
-          </button>
-        </fieldset>
       </section>
     </main>
     <script src="/assets/material-components-web.js"></script>

packages/mdc-fab/README.md

@@ -75,12 +75,12 @@ You may include this to use them as shown or use any other icon method you wish.
 ### Absolutely positioned
 
 By default the FAB rests in the page where it sits in the content flow.
-Developers must position it as-needed within their applications designs.
+Developers must position it as needed within their application's design.
 
 ```html
 <!--
   This will position the FAB in the bottom-right corner.
-  Modify to fit your designs requirements.
+  Modify to fit your design's requirements.
 -->
 <style>
 .app-fab--absolute.app-fab--absolute {
@@ -144,6 +144,10 @@ CSS Class | Description
 `mdc-fab--mini` | Makes the fab smaller (40 x 40 pixels)
 `mdc-fab--plain` | Makes the FAB have a white background
 
+> **NOTE**: No disabled styles are defined for FABs, as they are intended to denote a promoted action, and should not be
+> displayed in a disabled state. If there is ever a situation where a FAB should *not* perform an action,
+> an explanation should be presented to the user.
+
 ### Sass Mixins
 
 #### `mdc-fab-theme($config)`

packages/mdc-fab/_mixins.scss

@@ -78,11 +78,6 @@
   height: 40px;
 }
 
-@mixin mdc-fab--disabled_ {
-  cursor: default;
-  pointer-events: none;
-}
-
 @mixin mdc-fab-theme($config) {
   $bg-color: map-get($config, bg-color);
   $fg-color: map-get($config, fg-color);

packages/mdc-fab/mdc-fab.scss

@@ -25,15 +25,6 @@
     ripple-config: (base-color: white, opacity: .16),
     tap-highlight-color: rgba(0, 0, 0, .18)
   ));
-
-  :disabled &,
-  &:disabled {
-    @include mdc-fab-theme((
-      bg-color: rgba(0, 0, 0, .12),
-      fg-color: rgba(0, 0, 0, .26)
-    ));
-    @include mdc-fab--disabled_;
-  }
 }
 
 .mdc-fab--plain {