Modernize polaris-radio-button component

addon/components/polaris-radio-button.js

@@ -1,18 +1,16 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
+import { tagName, layout as templateLayout } from '@ember-decorators/component';
 import layout from '../templates/components/polaris-radio-button';
 
 /**
  * Polaris radio button component.
  * See https://polaris.shopify.com/components/forms/radio-button
  */
-export default Component.extend({
-  // Tagless component, renders a `polaris-choice` component internally.
-  tagName: '',
-
-  layout,
-
+@tagName('')
+@templateLayout(layout)
+export default class PolarisRadioButton extends Component {
   /**
    * Label for the radio button
    *
@@ -21,7 +19,7 @@ export default Component.extend({
    * @default null
    * @public
    */
-  label: null,
+  label = null;
 
   /**
    * Visually hide the label
@@ -31,7 +29,7 @@ export default Component.extend({
    * @default false
    * @public
    */
-  labelHidden: false,
+  labelHidden = false;
 
   /**
    * Radio button is selected
@@ -41,7 +39,7 @@ export default Component.extend({
    * @default false
    * @public
    */
-  checked: false,
+  checked = false;
 
   /**
    * Additional text to aid in use
@@ -51,7 +49,7 @@ export default Component.extend({
    * @default null
    * @public
    */
-  helpText: null,
+  helpText = null;
 
   /**
    * ID for form input
@@ -61,7 +59,7 @@ export default Component.extend({
    * @default null
    * @public
    */
-  inputId: null,
+  inputId = null;
 
   /**
    * Name for form input
@@ -71,7 +69,7 @@ export default Component.extend({
    * @default null
    * @public
    */
-  name: null,
+  name = null;
 
   /**
    * Value for form input
@@ -81,7 +79,7 @@ export default Component.extend({
    * @default null
    * @public
    */
-  value: null,
+  value = null;
 
   /**
    * Disable the radio button
@@ -91,7 +89,7 @@ export default Component.extend({
    * @default false
    * @public
    */
-  disabled: false,
+  disabled = false;
 
   /**
    * Callback when radio button is toggled
@@ -101,7 +99,7 @@ export default Component.extend({
    * @default noop
    * @public
    */
-  onChange() {},
+  onChange() {}
 
   /**
    * Callback when radio button is focussed
@@ -111,7 +109,7 @@ export default Component.extend({
    * @default noop
    * @public
    */
-  onFocus() {},
+  onFocus() {}
 
   /**
    * Callback when focus is removed
@@ -121,20 +119,21 @@ export default Component.extend({
    * @default noop
    * @public
    */
-  onBlur() {},
+  onBlur() {}
 
   /**
    * @private
    */
-  _id: computed('inputId', function() {
-    return this.get('inputId') || `polaris-radio-button-${guidFor(this)}`;
-  }).readOnly(),
+  @(computed('inputId').readOnly())
+  get _id() {
+    return this.inputId || `polaris-radio-button-${guidFor(this)}`;
+  }
 
   /**
    * @private
    */
-  describedBy: computed('helpText', '_id', function() {
-    const helpText = this.get('helpText');
-    return helpText ? `${this.get('_id')}HelpText` : null;
-  }).readOnly(),
-});
+  @(computed('helpText', '_id').readOnly())
+  get describedBy() {
+    return this.helpText ? `${this._id}HelpText` : null;
+  }
+}

addon/templates/components/polaris-radio-button.hbs

@@ -1,27 +1,27 @@
-{{#polaris-choice
-  inputId=_id
-  label=label
-  labelHidden=labelHidden
-  disabled=disabled
-  helpText=helpText
-}}
-  <span data-test-radio-button class="Polaris-RadioButton">
+<PolarisChoice
+  @inputId={{this._id}}
+  @label={{@label}}
+  @labelHidden={{@labelHidden}}
+  @disabled={{@disabled}}
+  @helpText={{@helpText}}
+>
+  <span data-test-radio-button="true" class="Polaris-RadioButton">
     <input
       data-test-radio-button-input
       type="radio"
       class="Polaris-RadioButton__Input"
-      id={{_id}}
-      name={{name}}
-      value={{value}}
-      checked={{checked}}
-      disabled={{disabled}}
-      aria-describedby={{describedBy}}
-      onchange={{action onChange value="target.value"}}
-      onfocus={{action onFocus}}
-      onblur={{action onBlur}}
+      id={{this._id}}
+      name={{@name}}
+      value={{@value}}
+      checked={{@checked}}
+      disabled={{@disabled}}
+      aria-describedby={{this.describedBy}}
+      onchange={{action (or @onChange this.onChange) value="target.value"}}
+      onfocus={{fn (or @onFocus this.onFocus)}}
+      onblur={{fn (or @onBlur this.onBlur)}}
     >
 
-    <span data-test-radio-button-backdrop class="Polaris-RadioButton__Backdrop"></span>
-    <span data-test-radio-button-icon class="Polaris-RadioButton__Icon"></span>
+    <span data-test-radio-button-backdrop="true" class="Polaris-RadioButton__Backdrop"></span>
+    <span data-test-radio-button-icon="true" class="Polaris-RadioButton__Icon"></span>
   </span>
-{{/polaris-choice}}
+</PolarisChoice>