diff --git a/addons/rose/addon/components/rose/form/select/index.hbs b/addons/rose/addon/components/rose/form/select/index.hbs index 7210298ec..565643e5f 100644 --- a/addons/rose/addon/components/rose/form/select/index.hbs +++ b/addons/rose/addon/components/rose/form/select/index.hbs @@ -1,16 +1,13 @@ -
- - - {{@label}} - - - {{#if @helperText}} - - {{@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}} +
-
+ + {{@label}} + + + {{#if @helperText}} + + {{@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)) + )}} + +
+{{/if}} diff --git a/addons/rose/addon/components/rose/form/select/index.stories.mdx b/addons/rose/addon/components/rose/form/select/index.stories.mdx index 114c205a0..6574fcd53 100644 --- a/addons/rose/addon/components/rose/form/select/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/select/index.stories.mdx @@ -112,3 +112,28 @@ Renders a form select element. } }} + + + {{ + template: hbs` + +
+ Label +
+ Help +
+ + Value 1 + Value 2 + Value 3 + +
+ + An error occurred. + +
+
+ `, + context: {}, + }}
+
diff --git a/addons/rose/addon/components/rose/form/textarea/index.hbs b/addons/rose/addon/components/rose/form/textarea/index.hbs index f9dd29891..8bc67af1a 100644 --- a/addons/rose/addon/components/rose/form/textarea/index.hbs +++ b/addons/rose/addon/components/rose/form/textarea/index.hbs @@ -1,26 +1,50 @@ -
- - - {{@label}} - - - {{#if @helperText}} - - {{@helperText}} - - {{/if}} - - - +{{#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}} +
-
+ + {{@label}} + + + {{#if @helperText}} + + {{@helperText}} + + {{/if}} + + + + {{yield (hash + errors=(component 'rose/form/errors' id=(concat 'errors-' this.id)) + )}} + +
+{{/if}} diff --git a/addons/rose/addon/components/rose/form/textarea/index.stories.mdx b/addons/rose/addon/components/rose/form/textarea/index.stories.mdx index e1f9aad3b..5851d4b12 100644 --- a/addons/rose/addon/components/rose/form/textarea/index.stories.mdx +++ b/addons/rose/addon/components/rose/form/textarea/index.stories.mdx @@ -70,3 +70,24 @@ Renders a simple form textarea. } }} + + + {{ + template: hbs` + +
+ Label +
+ Help +
+ +
+ + An error occurred. + +
+
+ `, + context: {}, + }}
+
diff --git a/addons/rose/tests/integration/components/rose/form/select-test.js b/addons/rose/tests/integration/components/rose/form/select-test.js index 3e4dd1df0..692efe098 100644 --- a/addons/rose/tests/integration/components/rose/form/select-test.js +++ b/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` + + Label + Help + + value-1 + + + An error occurred. + + + `); + 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')); + }); }); diff --git a/addons/rose/tests/integration/components/rose/form/textarea-test.js b/addons/rose/tests/integration/components/rose/form/textarea-test.js index 56c698e61..938aeba9d 100644 --- a/addons/rose/tests/integration/components/rose/form/textarea-test.js +++ b/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``); assert.ok(await find('.error')); }); + + test('it supports a fully contextual usage', async function (assert) { + assert.expect(5); + await render(hbs` + + Label + Help + + + An error occurred. + + + `); + 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')); + }); });