fix: make label tagless to preserve visibility feature

knownasilya · Dec 27, 2019 · 0b9e39e · 0b9e39e · raido · Jan 15, 2020
1 parent 6b4369c
commit 0b9e39e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/addon/components/x-toggle-label/component.js b/addon/components/x-toggle-label/component.js
@@ -5,10 +5,7 @@ import layout from './template';
 
 export default Component.extend({
   layout,
-  tagName: 'label',
-  attributeBindings: ['for'],
-  classNames: ['toggle-text', 'toggle-prefix'],
-  classNameBindings: ['labelType'],
+  tagName: '',
   for: readOnly('switchId'),
 
   labelType: computed('type', function() {
@@ -23,9 +20,11 @@ export default Component.extend({
     }
   }),
 
-  click(e) {
-    e.stopPropagation();
-    e.preventDefault();
-    this.sendToggle(this.get('value'));
+  actions: {
+    clickLabel(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.sendToggle(this.get('value'));
+    }
   }
 });
diff --git a/addon/components/x-toggle-label/template.hbs b/addon/components/x-toggle-label/template.hbs
@@ -1,7 +1,13 @@
 {{#if this.show}}
-  {{#if hasBlock}}
-    {{yield this.label}}
-  {{else}}
-    {{this.label}}
-  {{/if}}
+  <label
+    for={{this.for}}
+    class='toggle-text toggle-prefix {{this.labelType}}'
+    onclick={{action 'clickLabel'}}
+  > 
+    {{#if hasBlock}}
+      {{yield this.label}}
+    {{else}}
+      {{this.label}}
+    {{/if}}
+  </label>
 {{/if}}