feat(addon/components/paper-button): converts to a glimmer component.

Author: matthewhartstonge

addon/components/paper-button.hbs

@@ -1,11 +1,39 @@
-{{! template-lint-disable no-curly-component-invocation }}
-{{#if (has-block)}}
-  {{yield}}
-{{else}}
-  {{@label}}
-{{/if}}
+{{#let (element this.tag) as |Tag|}}
+  <Tag
+    class='md-default-theme md-button
+      {{if @raised " md-raised"}}
+      {{if @iconButton " md-icon-button"}}
+      {{if this.fab " md-fab"}}
+      {{if @mini " md-mini"}}
+      {{if @warn " md-warn"}}
+      {{if @accent " md-accent"}}
+      {{if @primary " md-primary"}}
+      {{if @secondary " md-secondary"}}
+      {{if this.focused " md-focused"}} {{@class}}'
+    disabled={{this.disabled}}
+    download={{@download}}
+    href={{@href}}
+    id={{@id}}
+    rel={{@rel}}
+    tabindex={{if this.disabled "-1" "0"}}
+    target={{@target}}
+    title={{@title}}
+    type={{this.type}}
+    {{did-insert this.registerListeners}}
+    {{will-destroy this.unregisterListeners}}
+    {{on 'click' this.handleClick}}
+    ...attributes
+  >
+    {{#if (has-block)}}
+      {{yield}}
+    {{else}}
+      {{@label}}
+    {{/if}}
 
-<PaperRipple
-  @fitRipple={{@iconButton}}
-  @center={{@iconButton}}
-  @dimBackground={{not @iconButton}}/>
+    <PaperRipple
+      @fitRipple={{@iconButton}}
+      @center={{@iconButton}}
+      @dimBackground={{not @iconButton}}
+    />
+  </Tag>
+{{/let}}

addon/components/paper-button.js

@@ -1,59 +1,44 @@
-/* eslint-disable ember/no-classic-components, ember/no-mixins, ember/require-tagless-components */
 /**
  * @module ember-paper
  */
-import { reads } from '@ember/object/computed';
-
-import Component from '@ember/component';
-import FocusableMixin from 'ember-paper/mixins/focusable-mixin';
-import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin';
-import { invokeAction } from 'ember-paper/utils/invoke-action';
+import Focusable from './-focusable';
+import { action } from '@ember/object';
 
 /**
  * @class PaperButton
- * @extends Ember.Component
- * @uses FocusableMixin
- * @uses ProxiableMixin
+ * @extends Focusable
  */
-export default Component.extend(FocusableMixin, ProxiableMixin, {
-  tagName: 'button',
-  classNames: ['md-default-theme', 'md-button'],
-  raised: false,
-  iconButton: false,
-
-  // circular button
-  fab: reads('mini'),
-
-  mini: false,
-  type: 'button',
-  href: null,
-  target: null,
-
-  attributeBindings: ['type', 'href', 'target', 'title', 'download', 'rel'],
-
-  classNameBindings: [
-    'raised:md-raised',
-    'iconButton:md-icon-button',
-    'fab:md-fab',
-    'mini:md-mini',
-    'warn:md-warn',
-    'accent:md-accent',
-    'primary:md-primary',
-  ],
-
-  init() {
-    this._super(...arguments);
-    if (this.href) {
-      this.setProperties({
-        tagName: 'a',
-        type: null,
-      });
+export default class PaperButton extends Focusable {
+  get tag() {
+    if (this.args.href) {
+      return 'a';
+    }
+
+    return 'button';
+  }
+
+  get type() {
+    if (this.args.type) {
+      return this.args.type;
+    }
+
+    return 'button';
+  }
+
+  get fab() {
+    return this.args.fab || this.args.mini;
+  }
+
+  @action handleClick(e) {
+    if (this.args.onClick) {
+      this.args.onClick(e);
     }
-  },
 
-  click(e) {
-    invokeAction(this, 'onClick', e);
     // Prevent bubbling, if specified. If undefined, the event will bubble.
-    return this.bubbles;
-  },
-});
+    if (this.args.bubbles === undefined) {
+      return true;
+    }
+
+    return this.args.bubbles;
+  }
+}