feat(button): add support for icons on buttons

fix #317
Lundalogik · Sep 10, 2019 · b80e5b6 · b80e5b6
1 parent bb4b5d1
commit b80e5b6
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -22,6 +22,14 @@ button {
         position: absolute;
     }
 
+    .mdc-button__icon.no-label {
+        margin: 0;
+    }
+
+    limel-icon {
+        vertical-align: top;
+    }
+
     svg {
         fill: currentColor;
         height: 3.0rem;
@@ -31,13 +39,15 @@ button {
         width: 3.0rem;
     }
 
+    limel-icon,
     .label,
     limel-spinner,
     svg {
         transition: opacity 300ms ease-in-out;
     }
 
     &.loading {
+        limel-icon,
         .label {
             opacity: 0;
         }
@@ -47,6 +57,7 @@ button {
     }
 
     &.just-loaded {
+        limel-icon,
         .label {
             opacity: 0;
         }

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -26,6 +26,12 @@ export class Button {
     @Prop({ reflectToAttr: true })
     public outlined = false;
 
+    /**
+     * Set icon for the button
+     */
+    @Prop({ reflectToAttr: true })
+    public icon: string;
+
     /**
      * Set to `true` to disable the button.
      * Defaults to `false`.
@@ -58,6 +64,7 @@ export class Button {
                 `}
                 disabled={this.disabled}
             >
+                {this.renderIcon()}
                 <span class="label mdc-button__label">{this.label}</span>
                 <limel-spinner />
                 <svg viewBox="0 0 30 30">
@@ -78,4 +85,26 @@ export class Button {
             }, TIMEOUT);
         }
     }
+
+    /**
+     * Render the icon for the button
+     *
+     * @returns {HTMLElement} the icon
+     */
+    private renderIcon() {
+        if (!this.icon) {
+            return;
+        }
+
+        let withoutLabelClass = '';
+        if (!this.label) {
+            withoutLabelClass = 'no-label';
+        }
+
+        return (
+            <i class={`mdc-button__icon ${withoutLabelClass}`}>
+                <limel-icon name={this.icon} />
+            </i>
+        );
+    }
 }