refactor: 💡 add support for fully contextual input field

addons/rose/addon/components/rose/form/input.stories.mdx

@@ -22,6 +22,24 @@ Renders a simple form input.
 />
 ```
 
+Or a fully contextual component without a wrapper, for maximum flexibility.
+
+```htmlbars
+<Rose::Form::Input
+  @contextual={{true}}
+  @type="email"
+  @name="email"
+  @value="info@example.com"
+  @label="Email"
+  @helperText="Enter your email"
+  @error={{false}}
+  @disabled={{false}}
+  readonly={{false}}
+>
+
+</Rose::Form::Input>
+```
+
 <Preview>
   <Story name="Basic Field">{{
     template: hbs`
@@ -94,3 +112,24 @@ Renders a simple form input.
     }
   }}</Story>
 </Preview>
+
+<Preview>
+  <Story name="Fully Contextual Input">{{
+    template: hbs`
+      <Rose::Form::Input @value="Text" @error={{true}} @contextual={{true}} as |field|>
+        <hr />
+        <field.label>Label</field.label>
+        <hr />
+        <field.helperText>Help</field.helperText>
+        <hr />
+        <field.field />
+        <hr />
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+        <hr />
+      </Rose::Form::Input>
+    `,
+    context: {},
+  }}</Story>
+</Preview>

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

@@ -1,29 +1,54 @@
-<div class="rose-form-input">
-
-  <Rose::Form::Label @for={{this.id}} @error={{@error}}>
-    {{@label}}
-  </Rose::Form::Label>
-
-  {{#if @helperText}}
-    <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
-      {{@helperText}}
-    </Rose::Form::HelperText>
-  {{/if}}
-
-  <Rose::Form::Input::Input
-    ...attributes
-    class="{{if @error "error"}}"
-    @id={{this.id}}
-    @name={{@name}}
-    @value={{@value}}
-    @type={{@type}}
-    @disabled={{@disabled}}
-    @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
-
+{{#if @contextual}}
   {{yield (hash
+    label=(component 'rose/form/label'
+      for=this.id
+      error=@error
+    )
+    helperText=(component 'rose/form/helper-text'
+      id=(concat 'helper-text-' this.id)
+      error=@error
+    )
+    field=(component 'rose/form/input/input'
+      id=this.id
+      name=@name
+      value=@value
+      type=@type
+      disabled=@disabled
+      error=@error
+      aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
+    )
     errors=(component 'rose/form/errors'
       id=(concat 'errors-' this.id)
     )
   )}}
+{{else}}
+  <div class="rose-form-input">
 
-</div>
+    <Rose::Form::Label @for={{this.id}} @error={{@error}}>
+      {{@label}}
+    </Rose::Form::Label>
+
+    {{#if @helperText}}
+      <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
+        {{@helperText}}
+      </Rose::Form::HelperText>
+    {{/if}}
+
+    <Rose::Form::Input::Input
+      ...attributes
+      @id={{this.id}}
+      @name={{@name}}
+      @value={{@value}}
+      @type={{@type}}
+      @disabled={{@disabled}}
+      @error={{@error}}
+      @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)
+      )
+    )}}
+
+  </div>
+{{/if}}

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

@@ -1,6 +1,6 @@
 <Input
   ...attributes
-  class="rose-form-input-field"
+  class="rose-form-input-field{{if @error " error"}}"
   id={{@id}}
   disabled={{@disabled}}
   name={{@name}}

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

@@ -14,10 +14,9 @@
     field=(component 'rose/form/select/select'
       id=this.id
       name=@name
-      disabled=@disabled
       value=@value
       onChange=@onChange
-      helperText=@helperText
+      disabled=@disabled
       error=@error
       aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
     )

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

@@ -12,11 +12,11 @@
 
   <Rose::Form::Textarea::Textarea
     ...attributes
-    class="{{if @error "error"}}"
     @id={{this.id}}
     @name={{@name}}
     @value={{@value}}
     @disabled={{@disabled}}
+    @error={{@error}}
     @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
 
   {{yield (hash

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

@@ -1,6 +1,6 @@
 <Textarea
   ...attributes
-  class="rose-form-input-field"
+  class="rose-form-input-field{{if @error " error"}}"
   id={{@id}}
   name={{@name}}
   disabled={{@disabled}}

addons/rose/tests/integration/components/rose/form/input-test.js

@@ -67,4 +67,23 @@ module('Integration | Component | rose/form/input', function (hooks) {
     await render(hbs`<Rose::Form::Input @error={{true}} />`);
     assert.ok(await find('.error'));
   });
+
+  test('it supports a fully contextual usage', async function (assert) {
+    assert.expect(5);
+    await render(hbs`
+      <Rose::Form::Input @value="Text" @error={{true}} @contextual={{true}} as |field|>
+        <field.label>Label</field.label>
+        <field.helperText>Help</field.helperText>
+        <field.field />
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+      </Rose::Form::Input>
+    `);
+    assert.notOk(find('.rose-form-input'), 'The form field wrapper element is not present in contextual mode');
+    assert.ok(find('.rose-form-label.error'));
+    assert.ok(find('.rose-form-helper-text.error'));
+    assert.ok(find('.rose-form-input-field.error'));
+    assert.ok(find('.rose-form-error-message'));
+  });
 });