feat(fab): add trailingIcon slot (#411)

* feat(fab): add trailingIcon slot

* docs(fab): update demo

components/fab/Fab.vue

@@ -6,7 +6,14 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <slot />
+    <slot name="icon" />
+    <div
+      v-if="extended"
+      class="mdc-fab__label"
+    >
+      <slot />
+    </div>
+    <slot name="trailingIcon" />
   </button>
   <a
     v-else
@@ -16,7 +23,14 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <slot />
+    <slot name="icon" />
+    <div
+      v-if="extended"
+      class="mdc-fab__label"
+    >
+      <slot />
+    </div>
+    <slot name="trailingIcon" />
   </a>
 </template>
 
@@ -52,8 +66,8 @@ export default {
   data () {
     return {
       mdcRipple: undefined,
-      extended: false,
-      slotObserver: undefined
+      slotObserver: undefined,
+      extended: false
     }
   },
   computed: {
@@ -91,16 +105,21 @@ export default {
   },
   methods: {
     updateSlot () {
+      if (this.$slots.icon) {
+        this.$slots.icon.map(n => {
+          if (n.elm instanceof Element) n.elm.classList.add('mdc-fab__icon')
+        })
+      }
+      if (this.$slots.trailingIcon) {
+        this.$slots.trailingIcon.map(n => {
+          if (n.elm instanceof Element) n.elm.classList.add('mdc-fab__icon')
+        })
+      }
+      this.extended = false
       if (this.$slots.default) {
-        const defaults = this.$slots.default
-        let i = 0
-        for (; i < defaults.length; i++) {
-          if (defaults[i].elm instanceof Element && defaults[i].elm.classList.contains('mdc-fab__label')) {
-            this.extended = true
-            break
-          }
-        }
-        if (i === defaults.length) this.extended = false // no label found
+        this.$slots.default.map(n => {
+          if (n.elm instanceof Element || n.text.trim().length > 0) this.extended = true
+        })
       }
     },
     reInstantiateRipple () {

components/fab/README.md

@@ -61,45 +61,6 @@ Developers must position `<m-fab>` as needed within their application’s design
 </m-fab>
 ```
 
-## Fab Icon
-
-```html
-<m-fab-icon class="material-icons">favorite</m-fab-icon>
-```
-
-or use SVG, Font Awesome or any other icon library you wish.
-
-```html
-<m-fab-icon tag="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="none" d="M0 0h24v24H0z"/>
-    <!-- other path -->
-</m-fab-icon>
-```
-
-```html
-<m-fab-icon tag="i" class="far fa-heart"></m-fab-icon>
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| tag | String | 'span' | specify which tag to render to, can be `span`, `i`, `img`, or `svg` |
-
-### Slots 
-
-| Slot | Description |
-|------|-------------|
-| default | icon content |
-
-## Fab Label
-
-Applicable only for Extended FAB. A FAB will be automatically extended if includes a FAB label. 
-
-```html
-<m-fab-label>create</m-fab-label>
-```
-
 ### Slots
 
 | Slot | Description |

components/fab/__test__/Fab.spec.js

@@ -1,8 +1,6 @@
 import 'mutationobserver-shim'
 import { mount } from '@vue/test-utils'
 import Fab from '../Fab.vue'
-import FabLabel from '../FabLabel'
-import FabIcon from '../FabIcon'
 
 describe('Fab', () => {
   it('should mount', () => {
@@ -41,7 +39,7 @@ describe('Fab', () => {
   it('should render as extended', () => {
     const wrapper = mount(Fab, {
       slots: {
-        default: FabLabel
+        default: 'create'
       }
     })
     expect(wrapper).toMatchSnapshot()
@@ -68,35 +66,3 @@ describe('Fab', () => {
     expect(wrapper.vm.$data.mdcRipple).toBeUndefined()
   })
 })
-
-describe('Fab Icon', () => {
-  it('should mount', () => {
-    const wrapper = mount(FabIcon, {})
-    expect(wrapper.isVueInstance()).toBeTruthy()
-  })
-
-  it('should render with no prop', () => {
-    const wrapper = mount(FabIcon, {
-      slots: {
-        default: 'favorite'
-      }
-    })
-    expect(wrapper.isVueInstance()).toBeTruthy()
-    expect(wrapper).toMatchSnapshot()
-    expect(wrapper.classes()).toContain('mdc-fab__icon')
-  })
-})
-
-describe('Fab Label', () => {
-  it('should mount', () => {
-    const wrapper = mount(FabLabel, {})
-    expect(wrapper.isVueInstance()).toBeTruthy()
-  })
-
-  it('should render with no prop', () => {
-    const wrapper = mount(FabLabel, {})
-    expect(wrapper.isVueInstance()).toBeTruthy()
-    expect(wrapper).toMatchSnapshot()
-    expect(wrapper.classes()).toContain('mdc-fab__label')
-  })
-})

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

@@ -1,17 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Fab Icon should render with no prop 1`] = `<span class="mdc-fab__icon">favorite</span>`;
-
-exports[`Fab Label should render with no prop 1`] = `<span class="mdc-fab__label"></span>`;
-
-exports[`Fab should render as absolute right 1`] = `<button class="mdc-fab mdc-fab--absolute-right"></button>`;
-
-exports[`Fab should render as exited 1`] = `<button class="mdc-fab mdc-fab--exited"></button>`;
-
-exports[`Fab should render as extended 1`] = `<button class="mdc-fab mdc-fab--extended"><span class="mdc-fab__label"></span></button>`;
-
-exports[`Fab should render as mini 1`] = `<button class="mdc-fab mdc-fab--mini"></button>`;
-
-exports[`Fab should render with no prop 1`] = `<button class="mdc-fab"></button>`;
-
-exports[`Fab should render without ripple 1`] = `<button class="mdc-fab"></button>`;
+exports[`Fab should render as absolute right 1`] = `
+<button class="mdc-fab mdc-fab--absolute-right">
+  <!----> </button>
+`;
+
+exports[`Fab should render as exited 1`] = `
+<button class="mdc-fab mdc-fab--exited">
+  <!----> </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 mini 1`] = `
+<button class="mdc-fab mdc-fab--mini">
+  <!----> </button>
+`;
+
+exports[`Fab should render with no prop 1`] = `
+<button class="mdc-fab">
+  <!----> </button>
+`;
+
+exports[`Fab should render without ripple 1`] = `
+<button class="mdc-fab">
+  <!----> </button>
+`;

components/fab/index.js

@@ -1,15 +1,11 @@
 import Fab from './Fab.vue'
-import FabLabel from './FabLabel'
-import FabIcon from './FabIcon'
 import './styles.scss'
 
 import { initPlugin } from '../'
 
 const plugin = {
   install (vm) {
     vm.component('m-fab', Fab)
-    vm.component('m-fab-label', FabLabel)
-    vm.component('m-fab-icon', FabIcon)
   }
 }
 export default plugin

docs/.vuepress/components/FabDemo.vue

@@ -6,9 +6,9 @@
       :absoluteRight="checkboxProps[0].value"
       :exited="checkboxProps[1].value"
     :ripple="checkboxProps[2].value">
-        <m-fab-icon v-if="radioProps[1].value || radioProps[0].value || radioProps[4].value" class="material-icons">add</m-fab-icon>
-        <m-fab-label v-if="radioProps[1].value || radioProps[2].value || radioProps[3].value">create</m-fab-label>
-        <m-fab-icon v-if="radioProps[2].value" class="material-icons">add</m-fab-icon>
+        <m-icon v-if="radioProps[1].value || radioProps[0].value || radioProps[4].value" icon="add" slot="icon"></m-icon>
+        {{text}}
+        <m-icon v-if="radioProps[2].value" icon="add" slot="trailingIcon"></m-icon>
     </m-fab>
   </ComponentSection>
   <ComponentProps
@@ -22,9 +22,9 @@ export default {
   data () {
     return {
       radioProps: [
-        { prop: 'baseline', value: true},
+        { prop: 'baseline', value: false},
         { prop: 'extended', value: false},
-        { prop: 'extended (Text label followed by icon)', value: false},
+        { prop: 'extended (Text label followed by icon)', value: true},
         { prop: 'extended (without Icon)', value: false},
         { prop: 'mini', value: false }
       ],
@@ -34,6 +34,14 @@ export default {
         { prop: 'ripple', value: true }
       ]
     }
-  } 
+  },
+  computed: {
+    text () {
+      return this.extended ? 'create': ''
+    },
+    extended () {
+      return this.radioProps[1].value || this.radioProps[2].value || this.radioProps[3].value
+    }
+  }
 }
 </script>