fix(button): Set ripple on class changes

BREAKING CHANGES: Removed interactive prop, ripple effect is now default.
matsp · May 17, 2018 · 4ecd765 · 4ecd765
1 parent b115b3d
commit 4ecd765
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/components/button/Button.vue b/components/button/Button.vue
@@ -1,20 +1,20 @@
 <template>
   <a
     v-if="href"
-    role="button"
-    class="mdc-button"
     :class="classes"
     :href="href"
     v-bind="$attrs"
+    role="button"
+    class="mdc-button"
     v-on="$listeners">
     <slot name="icon"/>
     <slot />
   </a>
   <button
     v-else
-    class="mdc-button"
     :class="classes"
     v-bind="$attrs"
+    class="mdc-button"
     v-on="$listeners">
     <slot name="icon"/>
     <slot />
@@ -44,10 +44,6 @@ export default {
       type: Boolean,
       default: false
     },
-    interactive: {
-      type: Boolean,
-      default: false
-    },
     href: {
       type: String,
       default: ''
@@ -69,15 +65,20 @@ export default {
       }
     }
   },
+  watch: {
+    classes () {
+      this.mdcRipple.destroy()
+      this.mdcRipple = MDCRipple.attachTo(this.$el)
+    }
+  },
   mounted () {
     this.updateSlot()
-    this.slotObserver = new MutationObserver( () => this.updateSlot())
+    this.slotObserver = new MutationObserver(() => this.updateSlot())
     this.slotObserver.observe(this.$el, {
       childList: true,
       subtree: true
     })
-
-    if (this.interactive) { this.mdcRipple = MDCRipple.attachTo(this.$el) }
+    this.mdcRipple = MDCRipple.attachTo(this.$el)
   },
   beforeDestroy () {
     this.slotObserver.disconnect()
@@ -86,18 +87,14 @@ export default {
     }
   },
   methods: {
-    updateSlot() {
+    updateSlot () {
       if (this.$slots.icon) {
         this.$slots.icon.map(n => {
           n.elm.classList.add('mdc-button__icon')
+          n.elm.setAttribute('aria-hidden', 'true')
         })
       }
     }
-  },
-  watch: {
-    interactive (value) {
-      value ? this.mdcRipple = MDCRipple.attachTo(this.$el) : this.mdcRipple.destroy() 
-    }
   }
 }
 </script>
diff --git a/components/button/README.md b/components/button/README.md
@@ -3,13 +3,22 @@
 ### Markup
 
 ```html
-<m-button interactive raised @click="onClick">Button</m-button>
+<m-button
+  raised
+  @click="onClick">
+  Button
+</m-button>
+
 <m-button unelevated>
-  <m-icon slot="icon" icon="cloud"/>
+  <m-icon
+    slot="icon"
+    icon="cloud"/>
   Button
 </m-button>
+
 <m-button disabled>Button</m-button>
-<m-button interactive href="https://github.com/matsp/material-components-vue">Github</m-button>
+<m-button href="https://github.com/matsp/material-components-vue">Github</m-button>
+
 <m-button>
   <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="...">
     ...
@@ -24,7 +33,6 @@
 | unelevated | Boolean | false | unelevated button |
 | outlined | Boolean | false | outlined button |
 | dense | Boolean | false | dense button |
-| interactive | Boolean | false | button with ripple effect |
 | href | String | ' ' | link button |
 
 Non prop attributes and events are mapped to the inner button element.