feat: 🎸 textarea and select should support contexual usage

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

@@ -1,16 +1,13 @@
-<div class="rose-form-select">
-
-  <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}}
-
+{{#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/select/select'
       id=this.id
       name=@name
@@ -20,7 +17,35 @@
       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))
+    errors=(component 'rose/form/errors'
+      id=(concat 'errors-' this.id)
+    )
   )}}
+{{else}}
+  <div class="rose-form-select">
 
-</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}}
+
+    {{yield (hash
+      field=(component 'rose/form/select/select'
+        id=this.id
+        name=@name
+        value=@value
+        onChange=@onChange
+        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))
+    )}}
+
+  </div>
+{{/if}}

addons/rose/addon/components/rose/form/select/index.stories.mdx

@@ -112,3 +112,28 @@ Renders a form select element.
     }
   }}</Story>
 </Preview>
+
+<Preview>
+  <Story name="Fully Contextual Select">{{
+    template: hbs`
+      <Rose::Form::Select @value="value-3" @error={{true}} @contextual={{true}} as |field|>
+        <hr />
+        <field.label>Label</field.label>
+        <hr />
+        <field.helperText>Help</field.helperText>
+        <hr />
+        <field.field as |select|>
+          <select.option @value="value-1">Value 1</select.option>
+          <select.option @value="value-2">Value 2</select.option>
+          <select.option @value="value-3">Value 3</select.option>
+        </field.field>
+        <hr />
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+        <hr />
+      </Rose::Form::Select>
+    `,
+    context: {},
+  }}</Story>
+</Preview>

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

@@ -1,26 +1,50 @@
-<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::Textarea::Textarea
-    ...attributes
-    @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)}}" />
-
+{{#if @contextual}}
   {{yield (hash
-    errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
+    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/textarea/textarea'
+      id=this.id
+      name=@name
+      value=@value
+      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::Textarea::Textarea
+      ...attributes
+      @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
+      errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
+    )}}
+
+  </div>
+{{/if}}

addons/rose/addon/components/rose/form/textarea/index.stories.mdx

@@ -70,3 +70,24 @@ Renders a simple form textarea.
     }
   }}</Story>
 </Preview>
+
+<Preview>
+  <Story name="Fully Contextual Textarea">{{
+    template: hbs`
+      <Rose::Form::Textarea @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::Textarea>
+    `,
+    context: {},
+  }}</Story>
+</Preview>

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

@@ -144,4 +144,28 @@ module('Integration | Component | rose/form/select', function (hooks) {
     `);
     await fillIn('[name="my-select"]', 'value-1');
   });
+
+  test('it supports a fully contextual usage', async function (assert) {
+    assert.expect(5);
+    await render(hbs`
+      <Rose::Form::Select @value="value-1" @error={{true}} @contextual={{true}} as |field|>
+        <field.label>Label</field.label>
+        <field.helperText>Help</field.helperText>
+        <field.field as |select|>
+          <select.option @value="value-1">value-1</select.option>
+        </field.field>
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+      </Rose::Form::Select>
+    `);
+    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-select-field.error'));
+    assert.ok(find('.rose-form-error-message'));
+  });
 });

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

@@ -57,4 +57,26 @@ module('Integration | Component | rose/form/textarea', function (hooks) {
     await render(hbs`<Rose::Form::Textarea @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::Textarea @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::Textarea>
+    `);
+    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'));
+  });
 });