feat(fab): Synchronise with mdc-web

BREAKING CHANGES: Introduced icon slot and replaced default slot for extended fab label.
matsp · Jul 9, 2018 · b2cad7f · b2cad7f
1 parent fdf4224
commit b2cad7f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 deletions.
diff --git a/components/fab/Fab.vue b/components/fab/Fab.vue
@@ -3,7 +3,12 @@
     :class="classes"
     class="mdc-fab"
     v-on="$listeners">
-    <slot />
+    <slot name="icon"/>
+    <div
+      v-if="extended"
+      class="mdc-fab__label">
+      <slot />
+    </div>
   </button>
 </template>
 
@@ -26,6 +31,10 @@ export default {
     exited: {
       type: Boolean,
       default: false
+    },
+    extended: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -39,7 +48,8 @@ export default {
       return {
         'mdc-fab--mini': this.mini,
         'mdc-fab--absolute-right': this.absoluteRight,
-        'mdc-fab--exited': this.exited
+        'mdc-fab--exited': this.exited,
+        'mdc-fab--extended': this.extended
       }
     }
   },
@@ -68,8 +78,8 @@ export default {
   },
   methods: {
     updateSlot () {
-      if (this.$slots.default) {
-        this.$slots.default.map(n => {
+      if (this.$slots.icon) {
+        this.$slots.icon.map(n => {
           if (n.elm.tagName.toUpperCase() !== 'SVG') {
             n.elm.classList.add('mdc-fab__icon')
           }

diff --git a/components/fab/README.md b/components/fab/README.md
@@ -3,11 +3,18 @@
 ### Markup
 
 ```html
-<m-fab mini absoluteRight>
-  <m-icon icon="favorite" @click="..."/>
+<m-fab
+  mini
+  absoluteRight>
+  <m-icon
+  slot="icon"
+  icon="favorite"
+  @click="..."/>
 </m-fab>
 <m-fab>
-  <svg @click="..."/>
+  <svg
+    slot="icon"
+    @click="..."/>
 </m-fab>
 ```
 ### Props
@@ -17,14 +24,16 @@
 | mini | Boolean | false | mini fab button |
 | absoluteRight | Boolean | false | whether the fab should be rendered on the bottom right |
 | exited | Boolean | false | animates the fab out of view |
+| extended | Boolean | false | extended fab with label |
 
 Events are mapped to the inner button element.
 
 ### Slots
 
 | Slot | Description |
 |------|-------------|
-| default | icon component |
+| default | extended fab label |
+| icon | icon component |
 
 ### Reference
 

diff --git a/docs/.vuepress/components/FabDemo.vue b/docs/.vuepress/components/FabDemo.vue
@@ -2,10 +2,14 @@
 <div>
   <ComponentSection>
     <m-fab
-      :mini="checkboxProps[0].value"
-      :absoluteRight="checkboxProps[1].value"
-      :exited="checkboxProps[2].value">
-      <m-icon icon="create"/>
+      :mini="radioProps[2].value"
+      :absoluteRight="checkboxProps[0].value"
+      :exited="checkboxProps[1].value"
+      :extended="radioProps[1].value">
+      <m-icon
+        slot="icon"
+        icon="create"/>
+      <span v-if="radioProps[1].value">Write something</span>
     </m-fab>
   </ComponentSection>
   <ComponentProps
@@ -19,10 +23,11 @@ export default {
   data () {
     return {
       radioProps: [
-        { prop: 'baseline', value: true}
+        { prop: 'baseline', value: true},
+        { prop: 'extended', value: false},
+        { prop: 'mini', value: false }
       ],
       checkboxProps: [
-        { prop: 'mini', value: false },
         { prop: 'absoluteRight', value: false },
         { prop: 'exited', value: false }
       ]