fix(fab): allow reactive switching between basic and extended style (#533)

* fix(fab): update README.md

* fix(fab): make it possible to switching between extended and basic fab reactive

possible defect: using style `display: none` for label in basic fab

* test(fab): update snapshots

Author: tychenjiajun

components/fab/Fab.vue

@@ -7,12 +7,12 @@
     v-on="$listeners"
   >
     <slot name="icon" />
-    <div
-      v-if="extended"
+    <span
+      v-show="extended"
       class="mdc-fab__label"
     >
       <slot />
-    </div>
+    </span>
     <slot name="trailingIcon" />
   </button>
   <a
@@ -24,12 +24,12 @@
     v-on="$listeners"
   >
     <slot name="icon" />
-    <div
-      v-if="extended"
+    <span
+      v-show="extended"
       class="mdc-fab__label"
     >
       <slot />
-    </div>
+    </span>
     <slot name="trailingIcon" />
   </a>
 </template>
@@ -93,7 +93,8 @@ export default {
     this.slotObserver = new MutationObserver(() => this.updateSlot())
     this.slotObserver.observe(this.$el, {
       childList: true,
-      subtree: true
+      subtree: true,
+      characterData: true
     })
     if (this.ripple) this.mdcRipple = MDCRipple.attachTo(this.$el)
   },
@@ -123,15 +124,12 @@ export default {
       }
     },
     reInstantiateRipple () {
+      if (this.mdcRipple instanceof MDCRipple) {
+        this.mdcRipple.destroy()
+      }
       if (this.ripple) {
-        if (this.mdcRipple) {
-          this.mdcRipple.destroy()
-        }
         MDCRipple.attachTo(this.$el)
       } else {
-        if (this.mdcRipple) {
-          this.mdcRipple.destroy()
-        }
         this.mdcRipple = undefined
       }
     }

components/fab/README.md

@@ -2,18 +2,28 @@
 
 ### Markup
 
+#### Basic Usage
+
+```html
+<m-fab aria-label="Add">
+    <m-icon icon="add" slot="icon"></m-icon>
+</m-fab>
+```
+
+#### Extended FAB
+
 ```html
-<m-fab aria-label="Favorite">
-    <m-fab-icon class="material-icons">favorite</m-fab-icon>
+<m-fab aria-label="Create">
+    <m-icon icon="add" slot="icon"></m-icon>
+    Create
 </m-fab>
 ```
 
-### Extended FAB
+#### Using Font Awesome
 
 ```html
-<m-fab>
-    <m-fab-icon class="material-icons">add</m-fab-icon>
-    <m-fab-label>Create</m-fab-label>
+<m-fab aria-label="Take photo">
+    <i class="fas fa-camera" slot="icon"></i>
 </m-fab>
 ```
 
@@ -34,6 +44,8 @@ Events and attributes are mapped to the inner button element.
 | Slot | Description |
 |------|-------------|
 | default | fab content |
+| icon | leading icon in extended fab |
+| trailingIcon | trailing icon in extended fab |
 
 ### Additional Information
 
@@ -57,16 +69,10 @@ Developers must position `<m-fab>` as needed within their application’s design
 }
 </style>
 <m-fab class="app-fab--absolute" aria-label="Favorite">
-  <m-fab-icon class="material-icons">favorite</m-fab-icon>
+  <m-icon icon="favorite" slot="icon"></m-icon>
 </m-fab>
 ```
 
-### Slots
-
-| Slot | Description |
-|------|-------------|
-| default | label content |
-
 ## Reference
 
 - https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab

components/fab/__test__/__snapshots__/Fab.spec.js.snap

@@ -1,32 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Fab should render as absolute right 1`] = `
-<button class="mdc-fab mdc-fab--absolute-right">
-  <!----> </button>
-`;
+exports[`Fab should render as absolute right 1`] = `<button class="mdc-fab mdc-fab--absolute-right"> <span class="mdc-fab__label" style="display: none;"></span> </button>`;
 
-exports[`Fab should render as exited 1`] = `
-<button class="mdc-fab mdc-fab--exited">
-  <!----> </button>
-`;
+exports[`Fab should render as exited 1`] = `<button class="mdc-fab mdc-fab--exited"> <span class="mdc-fab__label" style="display: none;"></span> </button>`;
 
-exports[`Fab should render as extended 1`] = `
-<button class="mdc-fab mdc-fab--extended">
-  <div class="mdc-fab__label">create</div>
-</button>
-`;
+exports[`Fab should render as extended 1`] = `<button class="mdc-fab mdc-fab--extended"> <span class="mdc-fab__label" style="">create</span> </button>`;
 
-exports[`Fab should render as mini 1`] = `
-<button class="mdc-fab mdc-fab--mini">
-  <!----> </button>
-`;
+exports[`Fab should render as mini 1`] = `<button class="mdc-fab mdc-fab--mini"> <span class="mdc-fab__label" style="display: none;"></span> </button>`;
 
-exports[`Fab should render with no prop 1`] = `
-<button class="mdc-fab">
-  <!----> </button>
-`;
+exports[`Fab should render with no prop 1`] = `<button class="mdc-fab"> <span class="mdc-fab__label" style="display: none;"></span> </button>`;
 
-exports[`Fab should render without ripple 1`] = `
-<button class="mdc-fab">
-  <!----> </button>
-`;
+exports[`Fab should render without ripple 1`] = `<button class="mdc-fab"> <span class="mdc-fab__label" style="display: none;"></span> </button>`;