fix(o-mdc-button) fix ripple not working on btn's

o-rango · Dec 15, 2017 · 9e363c9 · 9e363c9
1 parent 9bb4f2f
commit 9e363c9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/components/o-mdc-button/o-mdc-button.scss b/src/components/o-mdc-button/o-mdc-button.scss
@@ -1,2 +1,9 @@
-@import '@material/button/mdc-button';
-:host {}
+@import "@material/button/mdc-button";
+
+:host{
+.mdc-button {
+  .mdc-icon {
+    @extend .mdc-button__icon;
+  }
+}
+}
diff --git a/src/components/o-mdc-button/o-mdc-button.tsx b/src/components/o-mdc-button/o-mdc-button.tsx
@@ -10,7 +10,7 @@ export class MdcButtonComponent {
 
   private ripple : any;
 
-  @Element()MdcButtonEl : HTMLElement;
+  @Element()el : HTMLElement;
   @Prop()name : string;
   @Prop()id : string;
   @Prop()href : string;
@@ -21,8 +21,9 @@ export class MdcButtonComponent {
   @Prop()dense : boolean;
   @Prop()compact : boolean;
 
-  componentWillUnload() {
-    this.ripple = MDCRipple.attachTo(this.MdcButtonEl.shadowRoot.querySelector('.mdc-button'));
+  componentDidLoad() {
+    const rootEl = this.el.shadowRoot.querySelector('.mdc-button');
+    this.ripple = new MDCRipple(rootEl);
   }
 
   componentDidUnload() {