feat: update button to mdc-web v3.1.0 (#365)

matsp · Jul 27, 2019 · 851f5c4 · 851f5c4
1 parent 71c715f
commit 851f5c4
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 23 deletions.
diff --git a/components/button/Button.vue b/components/button/Button.vue
@@ -9,7 +9,8 @@
     v-on="$listeners"
   >
     <slot name="icon" />
-    <slot />
+    <span class="mdc-button__label"><slot /></span>
+    <slot name="trailingIcon" />
   </a>
   <button
     v-else
@@ -19,7 +20,8 @@
     v-on="$listeners"
   >
     <slot name="icon" />
-    <slot />
+    <span class="mdc-button__label"><slot /></span>
+    <slot name="trailingIcon" />
   </button>
 </template>
 
@@ -49,6 +51,10 @@ export default {
     href: {
       type: String,
       default: ''
+    },
+    ripple: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
@@ -69,8 +75,10 @@ export default {
   },
   watch: {
     classes () {
-      this.mdcRipple.destroy()
-      this.mdcRipple = MDCRipple.attachTo(this.$el)
+      this.reinitRipple()
+    },
+    ripple () {
+      this.reinitRipple()
     }
   },
   mounted () {
@@ -80,11 +88,11 @@ export default {
       childList: true,
       subtree: true
     })
-    this.mdcRipple = MDCRipple.attachTo(this.$el)
+    if (this.ripple) this.mdcRipple = MDCRipple.attachTo(this.$el)
   },
   beforeDestroy () {
     this.slotObserver.disconnect()
-    if (typeof this.mdcRipple !== 'undefined') {
+    if (this.mdcRipple) {
       this.mdcRipple.destroy()
     }
   },
@@ -96,6 +104,18 @@ export default {
           n.elm.setAttribute('aria-hidden', 'true')
         })
       }
+      if (this.$slots.trailingIcon) {
+        this.$slots.trailingIcon.map(n => {
+          n.elm.classList.add('mdc-button__icon')
+          n.elm.setAttribute('aria-hidden', 'true')
+        })
+      }
+    },
+    reinitRipple () {
+      if (this.mdcRipple) {
+        this.mdcRipple.destroy()
+        if (this.ripple) this.mdcRipple = MDCRipple.attachTo(this.$el)
+      }
     }
   }
 }

diff --git a/components/button/README.md b/components/button/README.md
@@ -33,7 +33,8 @@
 | unelevated | Boolean | false | unelevated button |
 | outlined | Boolean | false | outlined button |
 | dense | Boolean | false | dense button |
-| href | String | ' ' | link button |
+| href | String | '' | link button |
+| ripple | Boolean | true | use js ripple or not |
 
 Non prop attributes and events are mapped to the inner button element.
 
@@ -42,7 +43,8 @@ Non prop attributes and events are mapped to the inner button element.
 | Slot | Description |
 |------|-------------|
 | default | button label |
-| icon | icon component |
+| icon | leading icon component |
+| trailingIcon | trailing icon component |
 
 ### Reference
 

diff --git a/components/button/__tests__/Button.spec.js b/components/button/__tests__/Button.spec.js
@@ -4,20 +4,20 @@ import Button from '../Button.vue'
 
 describe('Button', () => {
   it('should mount', () => {
-    let wrapper = mount(Button)
+    const wrapper = mount(Button)
     expect(wrapper.isVueInstance()).toBeTruthy()
     expect(wrapper.vm.$data.mdcRipple).toBeDefined()
     expect(wrapper.vm.$data.slotObserver).toBeDefined()
   })
 
   it('should render with no prop', () => {
-    let wrapper = mount(Button)
+    const wrapper = mount(Button)
     expect(wrapper).toMatchSnapshot()
     expect(wrapper.classes()).toContain('mdc-button')
   })
 
   it('should render as raised', () => {
-    let wrapper = mount(Button, {
+    const wrapper = mount(Button, {
       propsData: {
         raised: true
       }
@@ -27,7 +27,7 @@ describe('Button', () => {
   })
 
   it('should render as unelevated', () => {
-    let wrapper = mount(Button, {
+    const wrapper = mount(Button, {
       propsData: {
         unelevated: true
       }
@@ -37,7 +37,7 @@ describe('Button', () => {
   })
 
   it('should render as outlined', () => {
-    let wrapper = mount(Button, {
+    const wrapper = mount(Button, {
       propsData: {
         outlined: true
       }
@@ -47,12 +47,22 @@ describe('Button', () => {
   })
 
   it('should render as dense', () => {
-    let wrapper = mount(Button, {
+    const wrapper = mount(Button, {
       propsData: {
         dense: true
       }
     })
     expect(wrapper).toMatchSnapshot()
     expect(wrapper.classes()).toContain('mdc-button--dense')
   })
+
+  it('should render without ripple', () => {
+    const wrapper = mount(Button, {
+      propsData: {
+        ripple: false
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.vm.$data.mdcRipple).toBeUndefined()
+  })
 })
diff --git a/components/button/__tests__/__snapshots__/Button.spec.js.snap b/components/button/__tests__/__snapshots__/Button.spec.js.snap
@@ -1,11 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button should render as dense 1`] = `<button class="mdc-button mdc-button--dense"> </button>`;
+exports[`Button should render as dense 1`] = `<button class="mdc-button mdc-button--dense"> <span class="mdc-button__label"></span> </button>`;
 
-exports[`Button should render as outlined 1`] = `<button class="mdc-button mdc-button--outlined"> </button>`;
+exports[`Button should render as outlined 1`] = `<button class="mdc-button mdc-button--outlined"> <span class="mdc-button__label"></span> </button>`;
 
-exports[`Button should render as raised 1`] = `<button class="mdc-button mdc-button--raised"> </button>`;
+exports[`Button should render as raised 1`] = `<button class="mdc-button mdc-button--raised"> <span class="mdc-button__label"></span> </button>`;
 
-exports[`Button should render as unelevated 1`] = `<button class="mdc-button mdc-button--unelevated"> </button>`;
+exports[`Button should render as unelevated 1`] = `<button class="mdc-button mdc-button--unelevated"> <span class="mdc-button__label"></span> </button>`;
 
-exports[`Button should render with no prop 1`] = `<button class="mdc-button"> </button>`;
+exports[`Button should render with no prop 1`] = `<button class="mdc-button"> <span class="mdc-button__label"></span> </button>`;
+
+exports[`Button should render without ripple 1`] = `<button class="mdc-button"> <span class="mdc-button__label"></span> </button>`;
diff --git a/components/card/__test__/__snapshots__/Card.spec.js.snap b/components/card/__test__/__snapshots__/Card.spec.js.snap
@@ -28,7 +28,7 @@ exports[`Card should render with action buttons 1`] = `
 <div class="mdc-card">
   <div class="mdc-card__actions">
     <!---->
-    <div class="mdc-card__action-buttons"><button class="mdc-button mdc-card__action mdc-card__action--button"> </button><button class="mdc-button mdc-card__action mdc-card__action--button"> </button></div>
+    <div class="mdc-card__action-buttons"><button class="mdc-button mdc-card__action mdc-card__action--button"> <span class="mdc-button__label"></span> </button><button class="mdc-button mdc-card__action mdc-card__action--button"> <span class="mdc-button__label"></span> </button></div>
     <!---->
   </div>
 </div>
@@ -54,7 +54,7 @@ exports[`Card should render with action icons 1`] = `
 
 exports[`Card should render with full bleed action 1`] = `
 <div class="mdc-card">
-  <div class="mdc-card__actions mdc-card__actions--full-bleed"><button class="mdc-button mdc-card__action mdc-card__action--button"> </button>
+  <div class="mdc-card__actions mdc-card__actions--full-bleed"><button class="mdc-button mdc-card__action mdc-card__action--button"> <span class="mdc-button__label"></span> </button>
     <!---->
     <!---->
   </div>

diff --git a/docs/.vuepress/components/ButtonDemo.vue b/docs/.vuepress/components/ButtonDemo.vue
@@ -7,12 +7,16 @@
       :unelevated="radioProps[2].value"
       :outlined="radioProps[3].value"
       :disabled="checkboxProps[1].value"
-      :interactive="checkboxProps[2].value">
+      :ripple="checkboxProps[4].value">
       <m-icon
         v-if="checkboxProps[0].value"
         icon="cloud"
         slot="icon"/>
       Button
+      <m-icon
+              v-if="checkboxProps[3].value"
+              icon="cloud"
+              slot="trailingIcon"/>
     </m-button>
   </ComponentSection>
   <ComponentProps
@@ -34,7 +38,9 @@ export default {
       checkboxProps: [
         { prop: 'icon', value: false },
         { prop: 'disabled', value: false },
-        { prop: 'dense', value: false }
+        { prop: 'dense', value: false },
+        { prop: 'trailingIcon', value: false },
+        { prop: 'ripple', value: true }
       ]
     }
   }