refactor: 💡 extract input and textarea into separate components

addons/rose/addon/components/rose/form/input/input.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/form/input/input';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/components/rose/form/textarea/textarea.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/form/textarea/textarea';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/templates/components/rose/form/input.hbs

@@ -8,15 +8,20 @@
     </Rose::Form::HelperText>
   {{/if}}
 
-  <Input
+  {{!--
+    - refactor errors styles so that error classes appear on individual atoms
+      instead of on the parent wrapper (since the wrapper won't exist in cases
+      where the atoms are yielded, such as for use within a list
+      or other custom use cases)
+  --}}
+  <Rose::Form::Input::Input
     ...attributes
-    class="rose-form-input-field"
-    id={{this.id}}
-    disabled={{@disabled}}
-    name={{@name}}
+    @id={{this.id}}
+    @disabled={{@disabled}}
+    @name={{@name}}
     @type={{@type}}
     @value={{@value}}
-    aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
+    @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
 
   {{yield (hash
     errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))

addons/rose/addon/templates/components/rose/form/input/input.hbs

@@ -0,0 +1,9 @@
+<Input
+  ...attributes
+  class="rose-form-input-field"
+  id={{@id}}
+  disabled={{@disabled}}
+  name={{@name}}
+  @type={{@type}}
+  @value={{@value}}
+  aria-describedby={{@aria-describedby}} />

addons/rose/addon/templates/components/rose/form/textarea.hbs

@@ -8,14 +8,14 @@
     </Rose::Form::HelperText>
   {{/if}}
 
-  <Textarea
+  <Rose::Form::Textarea::Textarea
     ...attributes
     class="rose-form-input-field"
-    id={{this.id}}
-    name={{@name}}
-    disabled={{@disabled}}
+    @id={{this.id}}
+    @name={{@name}}
+    @disabled={{@disabled}}
     @value={{@value}}
-    aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
+    @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
 
   {{yield (hash
     errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))

addons/rose/addon/templates/components/rose/form/textarea/textarea.hbs

@@ -0,0 +1,8 @@
+<Textarea
+  ...attributes
+  class="rose-form-input-field"
+  id={{@id}}
+  name={{@name}}
+  disabled={{@disabled}}
+  @value={{@value}}
+  aria-describedby={{@aria-describedby}} />

addons/rose/app/components/rose/form/input/input.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/input/input';

addons/rose/app/components/rose/form/textarea/textarea.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/textarea/textarea';