From ce4135ea79f876aedf271a634c8379b167678b1d Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 27 May 2020 11:15:31 -0400
Subject: [PATCH 01/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20form=20acti?=
 =?UTF-8?q?ons=20component=20and=20tweak=20form=20spacing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/form/actions.js     | 24 ++++++++++
 .../components/rose/form/actions.stories.mdx  | 42 +++++++++++++++++
 .../styles/rose/components/form/_actions.scss |  3 ++
 .../styles/rose/components/form/_index.scss   |  1 +
 .../styles/rose/components/form/_input.scss   |  2 +-
 .../styles/rose/components/form/_select.scss  |  2 +-
 .../addon/styles/rose/utilities/_button.scss  | 47 +++++++++++--------
 .../templates/components/rose/button.hbs      | 47 ++++++++++---------
 .../components/rose/form/actions.hbs          | 19 ++++++++
 .../rose/app/components/rose/form/actions.js  |  1 +
 .../rose/tests/dummy/app/controllers/index.js |  2 +-
 .../rose/tests/dummy/app/templates/index.hbs  | 10 +++-
 .../components/rose/form/actions-test.js      | 38 +++++++++++++++
 13 files changed, 190 insertions(+), 48 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/form/actions.js
 create mode 100644 addons/rose/addon/components/rose/form/actions.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/form/_actions.scss
 create mode 100644 addons/rose/addon/templates/components/rose/form/actions.hbs
 create mode 100644 addons/rose/app/components/rose/form/actions.js
 create mode 100644 addons/rose/tests/integration/components/rose/form/actions-test.js

diff --git a/addons/rose/addon/components/rose/form/actions.js b/addons/rose/addon/components/rose/form/actions.js
new file mode 100644
index 000000000..4bfcbea85
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/actions.js
@@ -0,0 +1,24 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/form/actions';
+
+/**
+ * A set of two form action buttons for submit and cancel.
+ * To handle submit, place a submit handler on the parent form element.
+ * To handle cancel button click, pass in a function to `@cancel`.
+ *
+ * @example
+ *  <Rose::Form::Actions
+ *    @submitText="Save"
+ *    @cancelText="Cancel"
+ *    @showCancel={{true}}
+ *    @cancel=(fn @cancel) />
+ */
+export default Component.extend({
+  layout,
+  tagName: '',
+
+  /**
+   * @type {boolean}
+   */
+  showCancel: true,
+});
diff --git a/addons/rose/addon/components/rose/form/actions.stories.mdx b/addons/rose/addon/components/rose/form/actions.stories.mdx
new file mode 100644
index 000000000..7517bddb6
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/actions.stories.mdx
@@ -0,0 +1,42 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/Actions" component="Form/Actions" />
+
+# Form Actions
+
+A simple collection of buttons for performing common actions like submit/save
+and cancel.  Form actions should always be used in the context of a form element
+where the form has a submit action handler.  The submit button does not directly
+support actions.  The cancel button supports a cancel action.
+
+```html
+<Rose::Form::Actions
+  @submitText="Save"
+  @cancelText="Cancel"
+  @showCancel={{true}}
+  @disabled={{false}}
+  @cancel=(fn @cancel) />
+```
+
+<Preview>
+  <Story name="Basic Form Actions">{{
+    template: hbs`
+      <Rose::Form::Actions
+        @submitText={{submitText}}
+        @cancelText={{cancelText}}
+        @showCancel={{showCancel}}
+        @disabled={{disabled}}
+        @cancel={{onCancel}} />
+    `,
+    context: {
+      submitText: text('submitText', 'Save'),
+      cancelText: text('cancelText', 'Cancel'),
+      showCancel: boolean('showCancel', true),
+      disabled: boolean('disabled', false),
+      onCancel: action('cancel'),
+    },
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/form/_actions.scss b/addons/rose/addon/styles/rose/components/form/_actions.scss
new file mode 100644
index 000000000..4c2d62a0a
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/form/_actions.scss
@@ -0,0 +1,3 @@
+.rose-form-actions {
+  //display: flex;
+}
diff --git a/addons/rose/addon/styles/rose/components/form/_index.scss b/addons/rose/addon/styles/rose/components/form/_index.scss
index c8c516f8c..29fa5e995 100644
--- a/addons/rose/addon/styles/rose/components/form/_index.scss
+++ b/addons/rose/addon/styles/rose/components/form/_index.scss
@@ -2,3 +2,4 @@
 @import 'checkbox';
 @import 'select';
 @import 'radio';
+@import 'actions';
diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss
index 7116c6a76..0895f7f17 100644
--- a/addons/rose/addon/styles/rose/components/form/_input.scss
+++ b/addons/rose/addon/styles/rose/components/form/_input.scss
@@ -2,7 +2,7 @@
 @use '../../utilities/type';
 
 .rose-form-input {
-  margin-bottom: sizing.rems(m);
+  margin-bottom: sizing.rems(l);
 
   .rose-form-input-label {
     @include type.type(s, semibold);
diff --git a/addons/rose/addon/styles/rose/components/form/_select.scss b/addons/rose/addon/styles/rose/components/form/_select.scss
index 63cb16911..9effb0b80 100644
--- a/addons/rose/addon/styles/rose/components/form/_select.scss
+++ b/addons/rose/addon/styles/rose/components/form/_select.scss
@@ -2,7 +2,7 @@
 @use '../../utilities/type';
 
 .rose-form-select {
-  margin-bottom: sizing.rems(m);
+  margin-bottom: sizing.rems(l);
 
   .rose-form-select-label {
     @include type.type(s, semibold);
diff --git a/addons/rose/addon/styles/rose/utilities/_button.scss b/addons/rose/addon/styles/rose/utilities/_button.scss
index 3bb506024..f286ef5be 100644
--- a/addons/rose/addon/styles/rose/utilities/_button.scss
+++ b/addons/rose/addon/styles/rose/utilities/_button.scss
@@ -4,32 +4,39 @@
 
 @mixin button {
   @include typography.type(button, semibold);
-  display: flex;
-  flex-direction: row;
+  display: inline-block;
+  margin-bottom: sizing.rems(l);
+  margin-right: sizing.rems(xs);
   padding: sizing.rems(off-xs) sizing.rems(l);
   border-radius: sizing.rems(xxxs);
   border: sizing.rems(xxxxs) solid;
+  background: none;
 
-  &.has-icon-left > .rose-icon:first-child {
-    margin-left: -(sizing.rems(xs));
-    margin-right: sizing.rems(xxs);
-  }
+  .rose-button-wrapper {
+    display: flex;
+    flex-direction: row;
 
-  &.has-icon-right > .rose-icon:last-child {
-    margin-left: sizing.rems(xxs);
-    margin-right: -(sizing.rems(xs));
-  }
+    &.has-icon-left > .rose-icon:first-child {
+      margin-left: -(sizing.rems(xs));
+      margin-right: sizing.rems(xxs);
+    }
 
-  &.has-icon-only {
-    padding-right: sizing.rems(s);
-    padding-left: sizing.rems(s);
-    .rose-button-body {
-      position: absolute;
-      top: -1000px;
-      left: -1000px;
-      width: 1px;
-      height: 1px;
-      opacity: 0;
+    &.has-icon-right > .rose-icon:last-child {
+      margin-left: sizing.rems(xxs);
+      margin-right: -(sizing.rems(xs));
+    }
+
+    &.has-icon-only {
+      padding-right: sizing.rems(s);
+      padding-left: sizing.rems(s);
+      .rose-button-body {
+        position: absolute;
+        top: -1000px;
+        left: -1000px;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+      }
     }
   }
 }
diff --git a/addons/rose/addon/templates/components/rose/button.hbs b/addons/rose/addon/templates/components/rose/button.hbs
index f109c1407..a8ac2acbd 100644
--- a/addons/rose/addon/templates/components/rose/button.hbs
+++ b/addons/rose/addon/templates/components/rose/button.hbs
@@ -5,29 +5,30 @@
   class="{{if  @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
   >
 
-  {{#if @iconLeft}}
-    <Rose::Icon
-      @name={{@iconLeft}}
-      @size="medium"
-    />
-  {{/if}}
+  <span class="rose-button-wrapper">
+    {{#if @iconLeft}}
+      <Rose::Icon
+        @name={{@iconLeft}}
+        @size="medium"
+      />
+    {{/if}}
 
-  <span class="rose-button-body">
-    {{yield}}
+    <span class="rose-button-body">
+      {{yield}}
+    </span>
+
+    {{#if @iconOnly}}
+      <Rose::Icon
+        @name={{@iconOnly}}
+        @size="medium"
+      />
+    {{/if}}
+
+    {{#if @iconRight}}
+      <Rose::Icon
+        @name={{@iconRight}}
+        @size="medium"
+      />
+    {{/if}}
   </span>
-
-  {{#if @iconOnly}}
-    <Rose::Icon
-      @name={{@iconOnly}}
-      @size="medium"
-    />
-  {{/if}}
-
-  {{#if @iconRight}}
-    <Rose::Icon
-      @name={{@iconRight}}
-      @size="medium"
-    />
-  {{/if}}
-
 </button>
diff --git a/addons/rose/addon/templates/components/rose/form/actions.hbs b/addons/rose/addon/templates/components/rose/form/actions.hbs
new file mode 100644
index 000000000..47557fb7e
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/form/actions.hbs
@@ -0,0 +1,19 @@
+<div class="rose-form-actions" ...attributes>
+  <Rose::Button
+    @disabled={{@disabled}}
+    @submit={{true}}
+    @style="primary"
+  >
+    {{@submitText}}
+  </Rose::Button>
+
+  {{#if this.showCancel}}
+    <Rose::Button
+      @disabled={{@disabled}}
+      @style="secondary"
+      {{on "click" @cancel}}
+    >
+      {{@cancelText}}
+    </Rose::Button>
+  {{/if}}
+</div>
diff --git a/addons/rose/app/components/rose/form/actions.js b/addons/rose/app/components/rose/form/actions.js
new file mode 100644
index 000000000..debd30e78
--- /dev/null
+++ b/addons/rose/app/components/rose/form/actions.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/actions';
diff --git a/addons/rose/tests/dummy/app/controllers/index.js b/addons/rose/tests/dummy/app/controllers/index.js
index 3b56b102a..ff0929bb6 100644
--- a/addons/rose/tests/dummy/app/controllers/index.js
+++ b/addons/rose/tests/dummy/app/controllers/index.js
@@ -3,7 +3,7 @@ import { action } from '@ember/object';
 
 export default class IndexController extends Controller {
   @action
-  selectChange(/*value*/) {
+  actionHandler(/*value*/) {
     // eslint-disable-next-line no-console
     //console.log(value);
   }
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 400f1d6f1..40586ca08 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -50,7 +50,7 @@ Dummy app index template
 <Rose::Form::Select
   @label="Label"
   @helperText="Helper text"
-  @onChange={{fn this.selectChange}}
+  @onChange={{fn this.actionHandler}}
   as |select|
 >
   <select.option>Choose an option</select.option>
@@ -63,12 +63,18 @@ Dummy app index template
   disabled={{true}}
   @label="Label"
   @helperText="Helper text"
-  @onChange={{fn this.selectChange}}
+  @onChange={{fn this.actionHandler}}
   as |select|
 >
   <select.option>Choose an option</select.option>
 </Rose::Form::Select>
 
+<h3>Form Actions</h3>
+<Rose::Form::Actions
+  @submitText="Save"
+  @cancelText="Cancel"
+  @cancel={{this.actionHandler}} />
+
 <Rose::Form::Input
   @label="Label"
   @value="Read only"
diff --git a/addons/rose/tests/integration/components/rose/form/actions-test.js b/addons/rose/tests/integration/components/rose/form/actions-test.js
new file mode 100644
index 000000000..fa018c7c6
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/form/actions-test.js
@@ -0,0 +1,38 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, click } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/actions', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders a submit button and a regular button', async function (assert) {
+    assert.expect(2);
+    this.cancel = () => {};
+    await render(hbs`{{rose/form/actions cancel=this.cancel}}`);
+    assert.ok(find('[type="submit"]'));
+    assert.ok(find('button:not([type="submit"])'));
+  });
+
+  test('it can disabled the buttons', async function (assert) {
+    assert.expect(2);
+    this.cancel = () => {};
+    await render(hbs`{{rose/form/actions cancel=this.cancel disabled=true}}`);
+    assert.ok(find('[type="submit"]:disabled'));
+    assert.ok(find('button:not([type="submit"]):disabled'));
+  });
+
+  test('it optionally does not render the cancel button', async function (assert) {
+    assert.expect(2);
+    await render(hbs`{{rose/form/actions showCancel=false}}`);
+    assert.ok(find('[type="submit"]'));
+    assert.notOk(find('button:not([type="submit"])'));
+  });
+
+  test('it executes a function on cancel click', async function (assert) {
+    assert.expect(1);
+    this.cancel = () => assert.ok(true, 'cancel was clicked');
+    await render(hbs`{{rose/form/actions cancel=this.cancel}}`);
+    await click('button:not([type="submit"])');
+  });
+});

From 16f08744d35d1bf620269dbd39440e50a5f3291f Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 27 May 2020 17:28:29 -0400
Subject: [PATCH 02/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20form=20comp?=
 =?UTF-8?q?onent=20for=20simpler=20form=20building?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/components/rose/form.js     |  27 ++
 .../addon/components/rose/form.stories.mdx    | 126 ++++++++
 .../components/rose/form/checkbox.stories.mdx |   4 +-
 .../components/rose/form/input.stories.mdx    |   4 +-
 .../rose/form/radio/group.stories.mdx         |  17 +-
 .../components/rose/form/select.stories.mdx   |   4 +-
 .../components/rose/form/textarea.stories.mdx |   4 +-
 .../addon/templates/components/rose/form.hbs  |  16 ++
 .../components/rose/form/checkbox.hbs         |   1 +
 .../templates/components/rose/form/input.hbs  |   1 +
 .../components/rose/form/radio/group.hbs      |   2 +-
 .../components/rose/form/radio/radio.hbs      |   1 +
 .../templates/components/rose/form/select.hbs |   1 +
 .../components/rose/form/textarea.hbs         |   3 +-
 addons/rose/app/components/rose/form.js       |   1 +
 .../rose/tests/dummy/app/controllers/index.js |   4 +-
 .../rose/tests/dummy/app/templates/index.hbs  | 270 ++++++++----------
 .../integration/components/rose/form-test.js  |  61 ++++
 .../components/rose/form/checkbox-test.js     |   4 +-
 .../components/rose/form/input-test.js        |   2 +-
 .../components/rose/form/select-test.js       |   2 +-
 .../components/rose/form/textarea-test.js     |   2 +-
 22 files changed, 389 insertions(+), 168 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/form.js
 create mode 100644 addons/rose/addon/components/rose/form.stories.mdx
 create mode 100644 addons/rose/addon/templates/components/rose/form.hbs
 create mode 100644 addons/rose/app/components/rose/form.js
 create mode 100644 addons/rose/tests/integration/components/rose/form-test.js

diff --git a/addons/rose/addon/components/rose/form.js b/addons/rose/addon/components/rose/form.js
new file mode 100644
index 000000000..0805f0348
--- /dev/null
+++ b/addons/rose/addon/components/rose/form.js
@@ -0,0 +1,27 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/form';
+import { action } from '@ember/object';
+
+/**
+ * A component for building accessible forms.  Yields contextual fields
+ * and actions.
+ */
+export default Component.extend({
+  layout,
+  tagName: '',
+
+  // =actions
+
+  /**
+   * Calls the passed `onSubmit` function and disabled the default form
+   * submit behavior.
+   * @param {Event} e
+   */
+  @action
+  handleSubmit(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.onSubmit();
+    return false;
+  },
+});
diff --git a/addons/rose/addon/components/rose/form.stories.mdx b/addons/rose/addon/components/rose/form.stories.mdx
new file mode 100644
index 000000000..73cb9ccc4
--- /dev/null
+++ b/addons/rose/addon/components/rose/form.stories.mdx
@@ -0,0 +1,126 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form" component="Form" />
+
+# Form
+
+A component for building accessible forms.  Yields contextual fields
+and actions.
+
+```htmlbars
+<Rose::Form
+  @onSubmit={{this.submit}}
+  @cancel={{this.cancel}}
+  @disabled={{false}}
+  as |form|>
+  <form.input
+    @label="Label"
+    @helperText="Helper text"
+    @value="Text"
+    />
+  <form.textarea
+    @label="Label"
+    @helperText="Helper text"
+    @value="Text"
+    />
+  <form.select
+    @label="Label"
+    @helperText="Helper text"
+    @onChange={{fn this.actionHandler}}
+    as |select|
+  >
+    <select.option>Choose an option</select.option>
+    <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>
+  </form.select>
+  <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
+    <radioGroup.radio
+      @id="red-radio"
+      @label="Red"
+      @value="red"
+    />
+    <radioGroup.radio
+      @id="green-radio"
+      @label="Green"
+      @value="green"
+    />
+    <radioGroup.radio
+      @id="blue-radio"
+      @label="Blue"
+      @value="blue"
+    />
+  </form.radioGroup>
+  <form.checkbox
+    @id="checkbox-1"
+    @label="Label"
+    />
+  <form.actions @submitText="Save" @cancelText="Cancel" @showCancel={{true}} />
+</Rose::Form>
+```
+
+<Preview>
+  <Story name="Form">{{
+    template: hbs`
+      <Rose::Form
+        @onSubmit={{submit}}
+        @cancel={{cancel}}
+        @disabled={{disabled}}
+        as |form|>
+        <form.input
+          @label="Label"
+          @helperText="Helper text"
+          @value="Text"
+          />
+        <form.textarea
+          @label="Label"
+          @helperText="Helper text"
+          @value="Text"
+          />
+        <form.select
+          @label="Label"
+          @helperText="Helper text"
+          @onChange={{selectChange}}
+          as |select|
+        >
+          <select.option>Choose an option</select.option>
+          <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>
+        </form.select>
+        <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
+          <radioGroup.radio
+            @id="red-radio"
+            @label="Red"
+            @value="red"
+          />
+          <radioGroup.radio
+            @id="green-radio"
+            @label="Green"
+            @value="green"
+          />
+          <radioGroup.radio
+            @id="blue-radio"
+            @label="Blue"
+            @value="blue"
+          />
+        </form.radioGroup>
+        <form.checkbox
+          @id="checkbox-1"
+          @label="Label"
+          @checked={{true}}
+          />
+        <form.actions @submitText="Save" @cancelText="Cancel" @showCancel={{true}} />
+      </Rose::Form>
+    `,
+    context: {
+      disabled: boolean('disabled', false),
+      submit: action('submit'),
+      cancel: action('cancel'),
+      selectChange: action('selectChange'),
+    },
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/form/checkbox.stories.mdx b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
index 3c342c827..3a47e9f8c 100644
--- a/addons/rose/addon/components/rose/form/checkbox.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
@@ -16,7 +16,7 @@ Renders a form input checkbox.
   @label="Yes?"
   @checked={{false}}
   @error={{false}}
-  disabled={{false}}
+  @disabled={{false}}
   />
 ```
 
@@ -29,7 +29,7 @@ Renders a form input checkbox.
         @label={{label}}
         @checked={{checked}}
         @error={{error}}
-        disabled={{disabled}}
+        @disabled={{disabled}}
         />
     `,
     context: {
diff --git a/addons/rose/addon/components/rose/form/input.stories.mdx b/addons/rose/addon/components/rose/form/input.stories.mdx
index c62620de7..0e7465be9 100644
--- a/addons/rose/addon/components/rose/form/input.stories.mdx
+++ b/addons/rose/addon/components/rose/form/input.stories.mdx
@@ -16,7 +16,7 @@ Renders a simple form input.
   @label="Email"
   @helperText="Enter your email"
   @error={{false}}
-  disabled={{false}}
+  @disabled={{false}}
   readonly={{false}}
 />
 ```
@@ -30,7 +30,7 @@ Renders a simple form input.
         @label={{label}}
         @helperText={{helperText}}
         @error={{error}}
-        disabled={{disabled}}
+        @disabled={{disabled}}
         readonly={{read-only}}
         />
     `,
diff --git a/addons/rose/addon/components/rose/form/radio/group.stories.mdx b/addons/rose/addon/components/rose/form/radio/group.stories.mdx
index af30e8246..ef99aa922 100644
--- a/addons/rose/addon/components/rose/form/radio/group.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/group.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
-import { text } from '@storybook/addon-knobs';
+import { text, boolean } from '@storybook/addon-knobs';
 
 <Meta title="Rose|Form/Radio/Group" component="Form/Radio/Group" />
 
@@ -9,7 +9,12 @@ import { text } from '@storybook/addon-knobs';
 Renders a form radiofield group.
 
 ```htmlbars
-<Rose::Form::Radio::Group @name={{name}} @selectedValue="disagree" as |radioGroup|>
+<Rose::Form::Radio::Group
+  @disabled={{false}}
+  @name={{name}}
+  @selectedValue="disagree"
+  as |radioGroup|
+>
   <radioGroup.radio
     @id="agree-radiofield"
     @label="Agree"
@@ -30,7 +35,12 @@ Renders a form radiofield group.
 <Preview>
   <Story name="Basic" height="10rem">{{
   template: hbs`
-    <Rose::Form::Radio::Group @name={{name}} @selectedValue={{selectedValue}} as |radioGroup|>
+    <Rose::Form::Radio::Group
+      @disabled={{disabled}}
+      @name={{name}}
+      @selectedValue={{selectedValue}}
+      as |radioGroup|
+    >
       <radioGroup.radio
         @id="firstField"
         @label={{firstFieldLabel}}
@@ -50,6 +60,7 @@ Renders a form radiofield group.
   `,
   context: {
     name: text('name', 'mustagree'),
+    disabled: boolean('disabled', false),
     selectedValue: text('selectedValue', 'disagree'),
     firstFieldLabel: text('first label', 'Agree'),
     firstFieldValue: text('first value', 'agree'),
diff --git a/addons/rose/addon/components/rose/form/select.stories.mdx b/addons/rose/addon/components/rose/form/select.stories.mdx
index 9d3ea7b4e..2e9259267 100644
--- a/addons/rose/addon/components/rose/form/select.stories.mdx
+++ b/addons/rose/addon/components/rose/form/select.stories.mdx
@@ -15,7 +15,7 @@ Renders a form select element.
   @value="green"
   @label="Color"
   @helperText="Set your desired color"
-  disabled={{false}}
+  @disabled={{false}}
   @error={{false}}
   as |select|
 >
@@ -34,7 +34,7 @@ Renders a form select element.
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
-        disabled={{disabled}}
+        @disabled={{disabled}}
         @error={{error}}
         @onChange={{fn onChange}}
         as |select|
diff --git a/addons/rose/addon/components/rose/form/textarea.stories.mdx b/addons/rose/addon/components/rose/form/textarea.stories.mdx
index 8caffcdd8..17ae649f5 100644
--- a/addons/rose/addon/components/rose/form/textarea.stories.mdx
+++ b/addons/rose/addon/components/rose/form/textarea.stories.mdx
@@ -15,7 +15,7 @@ Renders a simple form textarea.
   @label="Description"
   @helperText="Enter a description"
   @error={{false}}
-  disabled={{false}}
+  @disabled={{false}}
   readonly={{false}}
 />
 ```
@@ -28,7 +28,7 @@ Renders a simple form textarea.
         @label={{label}}
         @helperText={{helperText}}
         @error={{error}}
-        disabled={{disabled}}
+        @disabled={{disabled}}
         readonly={{read-only}}
         />
     `,
diff --git a/addons/rose/addon/templates/components/rose/form.hbs b/addons/rose/addon/templates/components/rose/form.hbs
new file mode 100644
index 000000000..6c74ccae4
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/form.hbs
@@ -0,0 +1,16 @@
+<form
+  ...attributes
+  novalidate
+  method="post"
+  class="rose-form"
+  {{on "submit" this.handleSubmit}}
+>  
+  {{yield (hash
+    radioGroup=(component 'rose/form/radio/group' disabled=@disabled)
+    checkbox=(component 'rose/form/checkbox' disabled=@disabled)
+    input=(component 'rose/form/input' disabled=@disabled)
+    select=(component 'rose/form/select' disabled=@disabled)
+    textarea=(component 'rose/form/textarea' disabled=@disabled)
+    actions=(component 'rose/form/actions' disabled=@disabled cancel=@cancel)
+  )}}
+</form>
diff --git a/addons/rose/addon/templates/components/rose/form/checkbox.hbs b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
index ab2dec73b..b8d3f1dc5 100644
--- a/addons/rose/addon/templates/components/rose/form/checkbox.hbs
+++ b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
@@ -4,6 +4,7 @@
     ...attributes
     class="rose-form-checkbox-field"
     id={{@id}}
+    disabled={{@disabled}}
     @type="checkbox"
     @checked={{if @checked true false}} />
 
diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index fe8e86eed..9212c79df 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -12,6 +12,7 @@
     ...attributes
     class="rose-form-input-field"
     id={{@id}}
+    disabled={{@disabled}}
     @type={{@type}}
     @value={{@value}} />
 
diff --git a/addons/rose/addon/templates/components/rose/form/radio/group.hbs b/addons/rose/addon/templates/components/rose/form/radio/group.hbs
index 6aa52cf50..76cfea93b 100644
--- a/addons/rose/addon/templates/components/rose/form/radio/group.hbs
+++ b/addons/rose/addon/templates/components/rose/form/radio/group.hbs
@@ -1,3 +1,3 @@
 {{yield (hash
-  radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue)
+  radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled)
 )}}
diff --git a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
index 088853d5b..ee54aa72c 100644
--- a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
+++ b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
@@ -5,6 +5,7 @@
     @radioClass="rose-form-radio-field"
     @radioId={{@id}}
     type="radio"
+    disabled={{@disabled}}
     @name={{@name}}
     @value={{@value}}
     @groupValue={{@selectedValue}}
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index f7466ba0f..586e002a1 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -12,6 +12,7 @@
     ...attributes
     class="rose-form-select-field"
     id={{@id}}
+    disabled={{@disabled}}
     @value={{@value}}
     @onChange={{@onChange}}
     as |xs|
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index 94017089a..317ebeea3 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -10,8 +10,9 @@
 
   <Textarea
     ...attributes
-    id={{@id}}
     class="rose-form-input-field"
+    id={{@id}}
+    disabled={{@disabled}}
     @value={{@value}} />
 
   {{yield}}
diff --git a/addons/rose/app/components/rose/form.js b/addons/rose/app/components/rose/form.js
new file mode 100644
index 000000000..69c59c497
--- /dev/null
+++ b/addons/rose/app/components/rose/form.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form';
diff --git a/addons/rose/tests/dummy/app/controllers/index.js b/addons/rose/tests/dummy/app/controllers/index.js
index ff0929bb6..45faa7e5a 100644
--- a/addons/rose/tests/dummy/app/controllers/index.js
+++ b/addons/rose/tests/dummy/app/controllers/index.js
@@ -2,9 +2,11 @@ import Controller from '@ember/controller';
 import { action } from '@ember/object';
 
 export default class IndexController extends Controller {
+  color = 'green';
+
   @action
   actionHandler(/*value*/) {
     // eslint-disable-next-line no-console
-    //console.log(value);
+    //console.log('action handled');
   }
 }
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 40586ca08..9d69a47a1 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -47,160 +47,132 @@ Dummy app index template
 <br>
 
 <h2>Form</h2>
-<Rose::Form::Select
-  @label="Label"
-  @helperText="Helper text"
-  @onChange={{fn this.actionHandler}}
-  as |select|
+<Rose::Form
+  @onSubmit={{this.actionHandler}}
+  @cancel={{this.actionHandler}}
+  @disabled={{false}}
+  as |form|
 >
-  <select.option>Choose an option</select.option>
-  <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>
-</Rose::Form::Select>
 
-<Rose::Form::Select
-  disabled={{true}}
-  @label="Label"
-  @helperText="Helper text"
-  @onChange={{fn this.actionHandler}}
-  as |select|
->
-  <select.option>Choose an option</select.option>
-</Rose::Form::Select>
+  <h3>Inputs</h3>
+  <form.input
+    @label="Label"
+    @value="Read only"
+    readonly={{true}}
+    />
+  <form.input
+    @label="Label"
+    @helperText="Helper text"
+    @value="Text"
+    />
+  <form.input
+    @label="Label"
+    @helperText="Helper text"
+    @value="Text"
+    @error={{true}}
+    />
+  <form.input
+    @label="Label"
+    @helperText="Helper text"
+    @value="Text"
+    disabled={{true}}
+    />
 
-<h3>Form Actions</h3>
-<Rose::Form::Actions
-  @submitText="Save"
-  @cancelText="Cancel"
-  @cancel={{this.actionHandler}} />
+  <h3>Textareas</h3>
+  <form.textarea
+    @label="Label"
+    @value="Read only"
+    readonly={{true}}
+    />
+  <form.textarea
+    @label="Label"
+    @helperText="Helper text"
+    @value="Text"
+    />
+  <form.textarea
+    @label="Label"
+    @helperText="Helper text"
+    @value="Text"
+    @error={{true}}
+    />
+  <form.textarea
+    @label="Label"
+    @helperText="Helper text"
+    @value="Text"
+    disabled={{true}}
+    />
 
-<Rose::Form::Input
-  @label="Label"
-  @value="Read only"
-  readonly={{true}}
-  />
-
-<Rose::Form::Input
-  @label="Label"
-  @helperText="Helper text"
-  @value="Text"
-  />
-
-<Rose::Form::Input
-  @label="Label"
-  @helperText="Helper text"
-  @value="Text"
-  @error={{true}}
-  />
-
-<Rose::Form::Input
-  @label="Label"
-  @helperText="Helper text"
-  @value="Text"
-  disabled={{true}}
-  />
+  <h3>Selects</h3>
+  <form.select
+    @label="Label"
+    @helperText="Helper text"
+    @onChange={{fn this.actionHandler}}
+    as |select|
+  >
+    <select.option>Choose an option</select.option>
+    <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>
+  </form.select>
+  <form.select
+    disabled={{true}}
+    @label="Label"
+    @helperText="Helper text"
+    @onChange={{fn this.actionHandler}}
+    as |select|
+  >
+    <select.option>Choose an option</select.option>
+  </form.select>
 
 
-<Rose::Form::Textarea
-  @label="Label"
-  @value="Read only"
-  readonly={{true}}
-  />
+  <h3>Radio Group</h3>
+  <form.radioGroup @name="color" @selectedValue={{this.color}} as |radioGroup|>
+    <radioGroup.radio
+      @id="red-radio"
+      @label="Red"
+      @value="red"
+    />
+    <radioGroup.radio
+      @id="green-radio"
+      @label="Green"
+      @value="green"
+    />
+    <radioGroup.radio
+      @id="blue-radio"
+      @label="Blue"
+      @value="blue"
+      @disabled={{true}}
+    />
+  </form.radioGroup>
 
-<Rose::Form::Textarea
-  @label="Label"
-  @helperText="Helper text"
-  @value="Text"
-  />
+  <h3>Checkboxes</h3>
+  <form.checkbox
+    @id="checkbox-1"
+    @label="Label"
+    />
+  <form.checkbox
+    @id="checkbox-2"
+    @error={{true}}
+    @label="Error"
+    />
+  <form.checkbox
+    @id="checkbox-3"
+    @checked={{true}}
+    @label="Checked"
+    />
+  <form.checkbox
+    @id="checkbox-4"
+    @label="Disabled"
+    disabled={{true}}
+    />
+  <form.checkbox
+    @id="checkbox-5"
+    @checked={{true}}
+    @label="Disabled + Checked"
+    disabled={{true}}
+    />
 
-<Rose::Form::Textarea
-  @label="Label"
-  @helperText="Helper text"
-  @value="Text"
-  @error={{true}}
-  />
-
-<Rose::Form::Textarea
-  @label="Label"
-  @helperText="Helper text"
-  @value="Text"
-  disabled={{true}}
-  />
-
-<h2>Checkbox</h2>
-<Rose::Form::Checkbox
-  @id="checkbox-1"
-  @label="Label"
-  />
-<Rose::Form::Checkbox
-  @id="checkbox-2"
-  @error={{true}}
-  @label="Error"
-  />
-<Rose::Form::Checkbox
-  @id="checkbox-3"
-  @checked={{true}}
-  @label="Checked"
-  />
-<Rose::Form::Checkbox
-  @id="checkbox-4"
-  @label="Disabled"
-  disabled={{true}}
-  />
-<Rose::Form::Checkbox
-  @id="checkbox-5"
-  @checked={{true}}
-  @label="Disabled + Checked"
-  disabled={{true}}
-  />
-
-<h2>Radio field</h2>
-<Rose::Form::Radio::Radio
-  @id="radio-1"
-  @label="Label"
-  @value="radio-1"
-  />
-<Rose::Form::Radio::Radio
-  @id="radio-2"
-  @error={{true}}
-  @label="Error"
-  @value="radio-2"
-  />
-<Rose::Form::Radio::Radio
-  @id="radio-3"
-  @label="Checked"
-  />
-
-<Rose::Form::Radio::Radio
-  @id="radio-4"
-  @label="Disabled"
-  @disabled={{true}}
-  @value="radio-4"
-  />
-<Rose::Form::Radio::Radio
-  @id="radio-5"
-  @label="Disabled + Checked"
-  @value="radio-5"
-  @variable="radio-5"
-  @disabled={{true}}
-  />
-
-<h2>Radio field group</h2>
-<Rose::Form::Radio::Group @name="color" @variable="green" as |radioGroup|>
-  <radioGroup.radio
-    @id="red-radio"
-    @label="Red"
-    @value="red"
-  />
-  <radioGroup.radio
-    @id="green-radio"
-    @label="Green"
-    @value="green"
-  />
-  <radioGroup.radio
-    @id="blue-radio"
-    @label="Blue"
-    @value="blue"
-  />
-</Rose::Form::Radio::Group>
+  <form.actions
+    @submitText="Save"
+    @cancelText="Cancel" />
+</Rose::Form>
diff --git a/addons/rose/tests/integration/components/rose/form-test.js b/addons/rose/tests/integration/components/rose/form-test.js
new file mode 100644
index 000000000..2578e5538
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/form-test.js
@@ -0,0 +1,61 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, click } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders and handles submit/cancel actions', async function (assert) {
+    assert.expect(3);
+    this.submit = () => assert.ok(true, 'submitted');
+    this.cancel = () => assert.ok(true, 'cancelled');
+    await render(hbs`
+      <Rose::Form
+        @onSubmit={{this.submit}}
+        @cancel={{this.cancel}}
+        @disabled={{false}}
+        as |form|
+      >
+        <form.actions
+          @submitText="Save"
+          @cancelText="Cancel" />
+      </Rose::Form>
+    `);
+    assert.ok(find('.rose-form'));
+    await click('[type="submit"]');
+    await click('button:not([type="submit"])');
+  });
+
+  test('it can render contextual form components', async function (assert) {
+    assert.expect(5);
+    this.submit = () => {};
+    this.cancel = () => {};
+    this.select = () => {};
+    await render(hbs`
+      <Rose::Form
+        @onSubmit={{this.submit}}
+        @cancel={{this.cancel}}
+        @disabled={{false}}
+        as |form|
+      >
+        <form.input @label="Input" name="input-field" />
+        <form.textarea @label="Textarea" name="textarea-field" />
+        <form.select @label="Select" name="select-field" @onChange={{this.select}} />
+        <form.checkbox @label="Checkbox" name="checkbox-field" />
+        <form.radioGroup @name="radio-group-field" @selectedValue="green" as |radioGroup|>
+          <radioGroup.radio
+            @id="red-radio"
+            @label="Red"
+            @value="red"
+          />
+        </form.radioGroup>
+      </Rose::Form>
+    `);
+    assert.ok(find('[name="input-field"]'));
+    assert.ok(find('[name="textarea-field"]'));
+    assert.ok(find('[name="select-field"]'));
+    assert.ok(find('[name="checkbox-field"]'));
+    assert.ok(find('[name="radio-group-field"]'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/form/checkbox-test.js b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
index e341dd0db..9c2d4e479 100644
--- a/addons/rose/tests/integration/components/rose/form/checkbox-test.js
+++ b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
@@ -32,8 +32,8 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
     assert.ok(await find('.error'));
   });
 
-  test('it is disabled when disabled={{true}}', async function (assert) {
-    await render(hbs`<Rose::Form::Checkbox disabled={{true}} />`);
+  test('it is disabled when @disabled={{true}}', async function (assert) {
+    await render(hbs`<Rose::Form::Checkbox @disabled={{true}} />`);
     assert.equal(await find('input').disabled, true);
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/form/input-test.js b/addons/rose/tests/integration/components/rose/form/input-test.js
index 85c78eeb7..7cc960c00 100644
--- a/addons/rose/tests/integration/components/rose/form/input-test.js
+++ b/addons/rose/tests/integration/components/rose/form/input-test.js
@@ -31,7 +31,7 @@ module('Integration | Component | rose/form/input', function (hooks) {
   });
 
   test('it supports disabled attribute', async function (assert) {
-    await render(hbs`<Rose::Form::Input disabled={{true}} />`);
+    await render(hbs`<Rose::Form::Input @disabled={{true}} />`);
     assert.ok(await find('[disabled]'));
   });
 
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 2abd4b463..b91543758 100644
--- a/addons/rose/tests/integration/components/rose/form/select-test.js
+++ b/addons/rose/tests/integration/components/rose/form/select-test.js
@@ -48,7 +48,7 @@ module('Integration | Component | rose/form/select', function (hooks) {
     await render(hbs`
       <Rose::Form::Select
         @onChange={{fn this.onChange}}
-        disabled={{true}}
+        @disabled={{true}}
         as |select|
       >
         <select.option>Choose an option</select.option>
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 cce85cc32..0e57aff8b 100644
--- a/addons/rose/tests/integration/components/rose/form/textarea-test.js
+++ b/addons/rose/tests/integration/components/rose/form/textarea-test.js
@@ -21,7 +21,7 @@ module('Integration | Component | rose/form/textarea', function (hooks) {
   });
 
   test('it supports disabled attribute', async function (assert) {
-    await render(hbs`<Rose::Form::Textarea disabled={{true}} />`);
+    await render(hbs`<Rose::Form::Textarea @disabled={{true}} />`);
     assert.ok(await find('[disabled]'));
   });
 

From cade7d568aa3cceeb1905e238f85f150ff2509f7 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 27 May 2020 18:35:36 -0400
Subject: [PATCH 03/10] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20refactor=20sel?=
 =?UTF-8?q?ect=20field=20so=20it=20can=20support=20more=20yields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/form.stories.mdx    | 24 ++++++-----
 .../rose/addon/components/rose/form/select.js | 16 -------
 .../components/rose/form/select.stories.mdx   | 29 ++++++++-----
 .../components/rose/form/select/select.js     | 11 +++++
 .../templates/components/rose/form/select.hbs | 18 ++++----
 .../components/rose/form/select/select.hbs    | 11 +++++
 .../app/components/rose/form/select/select.js |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  | 20 +++++----
 .../integration/components/rose/form-test.js  |  9 +++-
 .../components/rose/form/select-test.js       | 42 ++++++++++++-------
 10 files changed, 108 insertions(+), 73 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/form/select/select.js
 create mode 100644 addons/rose/addon/templates/components/rose/form/select/select.hbs
 create mode 100644 addons/rose/app/components/rose/form/select/select.js

diff --git a/addons/rose/addon/components/rose/form.stories.mdx b/addons/rose/addon/components/rose/form.stories.mdx
index 73cb9ccc4..c777f21c1 100644
--- a/addons/rose/addon/components/rose/form.stories.mdx
+++ b/addons/rose/addon/components/rose/form.stories.mdx
@@ -30,12 +30,14 @@ and actions.
     @label="Label"
     @helperText="Helper text"
     @onChange={{fn this.actionHandler}}
-    as |select|
+    as |Field|
   >
-    <select.option>Choose an option</select.option>
-    <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 as |select|>
+      <select.option>Choose an option</select.option>
+      <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>
   </form.select>
   <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
     <radioGroup.radio
@@ -84,12 +86,14 @@ and actions.
           @label="Label"
           @helperText="Helper text"
           @onChange={{selectChange}}
-          as |select|
+          as |Field|
         >
-          <select.option>Choose an option</select.option>
-          <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 as |select|>
+            <select.option>Choose an option</select.option>
+            <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>
         </form.select>
         <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
           <radioGroup.radio
diff --git a/addons/rose/addon/components/rose/form/select.js b/addons/rose/addon/components/rose/form/select.js
index 3de2fd273..f1c7dd36f 100644
--- a/addons/rose/addon/components/rose/form/select.js
+++ b/addons/rose/addon/components/rose/form/select.js
@@ -3,22 +3,6 @@ import layout from '../../../templates/components/rose/form/select';
 
 /**
  * A `<select>` element context component which yields option components.
- *
- * @example
- *  <Rose::Form::Select
- *    @id="select-id-1"
- *    name="select-field-name"
- *    @value="current-value"
- *    @label="Label"
- *    @helperText="Helper text"
- *    @error={{true}}
- *    @onChange={{fn this.selectChange}}
- *    disabled={{true}}
- *    as |select|
- *  >
- *    <select.option>Choose an option</select.option>
- *    <select.option @value="current-value">Curret value</select.option>
- *  </Rose::Form::Select>
  */
 export default Component.extend({
   layout,
diff --git a/addons/rose/addon/components/rose/form/select.stories.mdx b/addons/rose/addon/components/rose/form/select.stories.mdx
index 2e9259267..9c621ed0c 100644
--- a/addons/rose/addon/components/rose/form/select.stories.mdx
+++ b/addons/rose/addon/components/rose/form/select.stories.mdx
@@ -12,17 +12,20 @@ Renders a form select element.
 ```htmlbars
 <Rose::Form::Select
   @id="select-id"
+  @name="select-name"
   @value="green"
   @label="Color"
   @helperText="Set your desired color"
   @disabled={{false}}
   @error={{false}}
-  as |select|
+  as |Field|
 >
-  <select.option>Choose a color</select.option>
-  <select.option @value="red">Red</select.option>
-  <select.option @value="green">Green</select.option>
-  <select.option @value="blue">Blue</select.option>
+  <Field as |select|>
+    <select.option>Choose a color</select.option>
+    <select.option @value="red">Red</select.option>
+    <select.option @value="green">Green</select.option>
+    <select.option @value="blue">Blue</select.option>
+  </Field>
 </Rose::Form::Select>
 ```
 
@@ -31,18 +34,21 @@ Renders a form select element.
     template: hbs`
       <Rose::Form::Select
         @id={{id}}
+        @name={{name}}
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
         @disabled={{disabled}}
         @error={{error}}
         @onChange={{fn onChange}}
-        as |select|
+        as |Field|
       >
-        <select.option>Choose an option</select.option>
-        <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 as |select|>
+          <select.option>Choose an option</select.option>
+          <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>
       </Rose::Form::Select>
     `,
     context: {
@@ -56,7 +62,8 @@ Renders a form select element.
         },
         null
       ),
-      id: text('id', 'field-id'),
+      id: text('id', 'select-id'),
+      name: text('name', 'select-name'),
       label: text('label', 'Label'),
       helperText: text('helperText', 'Helper text'),
       disabled: boolean('disabled', false),
diff --git a/addons/rose/addon/components/rose/form/select/select.js b/addons/rose/addon/components/rose/form/select/select.js
new file mode 100644
index 000000000..7e55d8c55
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/select/select.js
@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/form/select/select';
+
+/**
+ * This component is used internally by rose/form/select and should not be
+ * instantiated directly.
+ */
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index 586e002a1..028dff588 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -8,16 +8,12 @@
     <span class="rose-form-select-helper-text">{{@helperText}}</span>
   {{/if}}
 
-  <XSelect
-    ...attributes
-    class="rose-form-select-field"
-    id={{@id}}
-    disabled={{@disabled}}
-    @value={{@value}}
-    @onChange={{@onChange}}
-    as |xs|
-  >
-    {{yield xs}}
-  </XSelect>
+  {{yield (component 'rose/form/select/select'
+    id=@id
+    name=@name
+    disabled=@disabled
+    value=@value
+    onChange=@onChange
+  )}}
 
 </div>
diff --git a/addons/rose/addon/templates/components/rose/form/select/select.hbs b/addons/rose/addon/templates/components/rose/form/select/select.hbs
new file mode 100644
index 000000000..b7eaf6a6e
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/form/select/select.hbs
@@ -0,0 +1,11 @@
+<XSelect
+  class="rose-form-select-field"
+  id={{@id}}
+  name={{@name}}
+  disabled={{@disabled}}
+  @value={{@value}}
+  @onChange={{@onChange}}
+  as |xs|
+>
+  {{yield xs}}
+</XSelect>
diff --git a/addons/rose/app/components/rose/form/select/select.js b/addons/rose/app/components/rose/form/select/select.js
new file mode 100644
index 000000000..ccdac225a
--- /dev/null
+++ b/addons/rose/app/components/rose/form/select/select.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/select/select';
\ No newline at end of file
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 9d69a47a1..466b5fc42 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -107,21 +107,25 @@ Dummy app index template
     @label="Label"
     @helperText="Helper text"
     @onChange={{fn this.actionHandler}}
-    as |select|
+    as |Field|
   >
-    <select.option>Choose an option</select.option>
-    <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 as |select|>
+      <select.option>Choose an option</select.option>
+      <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>
   </form.select>
   <form.select
-    disabled={{true}}
+
     @label="Label"
     @helperText="Helper text"
     @onChange={{fn this.actionHandler}}
-    as |select|
+    as |Field|
   >
-    <select.option>Choose an option</select.option>
+    <Field as |select|>
+      <select.option>Choose an option</select.option>
+    </Field>
   </form.select>
 
 
diff --git a/addons/rose/tests/integration/components/rose/form-test.js b/addons/rose/tests/integration/components/rose/form-test.js
index 2578e5538..13ed7668f 100644
--- a/addons/rose/tests/integration/components/rose/form-test.js
+++ b/addons/rose/tests/integration/components/rose/form-test.js
@@ -41,7 +41,14 @@ module('Integration | Component | rose/form', function (hooks) {
       >
         <form.input @label="Input" name="input-field" />
         <form.textarea @label="Textarea" name="textarea-field" />
-        <form.select @label="Select" name="select-field" @onChange={{this.select}} />
+        <form.select
+          @label="Select"
+          @name="select-field"
+          @onChange={{this.select}}
+          as |Field|
+        >
+          <Field />
+        </form.select>
         <form.checkbox @label="Checkbox" name="checkbox-field" />
         <form.radioGroup @name="radio-group-field" @selectedValue="green" as |radioGroup|>
           <radioGroup.radio
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 b91543758..3f445aa4a 100644
--- a/addons/rose/tests/integration/components/rose/form/select-test.js
+++ b/addons/rose/tests/integration/components/rose/form/select-test.js
@@ -12,12 +12,14 @@ module('Integration | Component | rose/form/select', function (hooks) {
       <Rose::Form::Select
         @label="Label"
         @onChange={{fn this.onChange}}
-        as |select|
+        as |Field|
       >
-        <select.option>Choose an option</select.option>
-        <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 as |select|>
+          <select.option>Choose an option</select.option>
+          <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>
       </Rose::Form::Select>
     `);
     assert.equal(find('label').textContent.trim(), 'Label');
@@ -32,9 +34,11 @@ module('Integration | Component | rose/form/select', function (hooks) {
         @label="Label"
         @helperText="Helper text"
         @onChange={{fn this.onChange}}
-        as |select|
+        as |Field|
       >
-        <select.option>Choose an option</select.option>
+        <Field as |select|>
+          <select.option>Choose an option</select.option>
+        </Field>
       </Rose::Form::Select>
     `);
     assert.equal(
@@ -49,9 +53,11 @@ module('Integration | Component | rose/form/select', function (hooks) {
       <Rose::Form::Select
         @onChange={{fn this.onChange}}
         @disabled={{true}}
-        as |select|
+        as |Field|
       >
-        <select.option>Choose an option</select.option>
+        <Field as |select|>
+          <select.option>Choose an option</select.option>
+        </Field>
       </Rose::Form::Select>
     `);
     assert.ok(find('[disabled]'));
@@ -64,10 +70,12 @@ module('Integration | Component | rose/form/select', function (hooks) {
       <Rose::Form::Select
         @onChange={{fn this.onChange}}
         @value={{value}}
-        as |select|
+        as |Field|
       >
-        <select.option @value="value-1">value-1</select.option>
-        <select.option @value="value-2">value-2</select.option>
+        <Field as |select|>
+          <select.option @value="value-1">value-1</select.option>
+          <select.option @value="value-2">value-2</select.option>
+        </Field>
       </Rose::Form::Select>
     `);
     assert.equal(find('select').value, 'value-1');
@@ -91,12 +99,14 @@ module('Integration | Component | rose/form/select', function (hooks) {
     this.onChange = this.onChange1;
     await render(hbs`
       <Rose::Form::Select
-        name="my-select"
+        @name="my-select"
         @onChange={{fn this.onChange}}
-        as |select|
+        as |Field|
       >
-        <select.option>Choose an option</select.option>
-        <select.option @value="value-1">value-1</select.option>
+        <Field as |select|>
+          <select.option>Choose an option</select.option>
+          <select.option @value="value-1">value-1</select.option>
+        </Field>
       </Rose::Form::Select>
     `);
     await fillIn('[name="my-select"]', 'value-1');

From 137dd4577790b7db647bbf24cb8411c7a3decd78 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 27 May 2020 19:40:11 -0400
Subject: [PATCH 04/10] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20auto-generate?=
 =?UTF-8?q?=20IDs=20for=20form=20fields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/.eslintrc.js                      |  3 +-
 .../addon/components/rose/form.stories.mdx    |  8 ----
 .../addon/components/rose/form/checkbox.js    | 14 +-----
 .../components/rose/form/checkbox.stories.mdx |  3 --
 .../rose/addon/components/rose/form/input.js  | 15 +-----
 .../addon/components/rose/form/radio/group.js | 21 --------
 .../rose/form/radio/group.stories.mdx         |  6 ---
 .../addon/components/rose/form/radio/radio.js | 13 +----
 .../rose/form/radio/radio.stories.mdx         |  3 --
 .../rose/addon/components/rose/form/select.js |  4 +-
 .../components/rose/form/select.stories.mdx   |  3 --
 .../addon/components/rose/form/textarea.js    | 14 +-----
 addons/rose/addon/mixins/component-auto-id.js | 15 ++++++
 .../components/rose/form/checkbox.hbs         |  4 +-
 .../templates/components/rose/form/input.hbs  |  4 +-
 .../components/rose/form/radio/radio.hbs      |  4 +-
 .../templates/components/rose/form/select.hbs |  4 +-
 .../components/rose/form/textarea.hbs         |  4 +-
 .../app/components/rose/form/select/select.js |  2 +-
 addons/rose/package.json                      |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  |  8 ----
 .../integration/components/rose/form-test.js  |  1 -
 .../components/rose/form/radio/group-test.js  | 48 +++++++++----------
 .../unit/mixins/component-auto-id-test.js     | 11 +++++
 ui/core/app/components/form/project/index.hbs |  2 -
 ui/core/package.json                          |  3 +-
 yarn.lock                                     |  8 ++++
 27 files changed, 84 insertions(+), 142 deletions(-)
 create mode 100644 addons/rose/addon/mixins/component-auto-id.js
 create mode 100644 addons/rose/tests/unit/mixins/component-auto-id-test.js

diff --git a/addons/rose/.eslintrc.js b/addons/rose/.eslintrc.js
index 85a190092..b705ae52d 100644
--- a/addons/rose/.eslintrc.js
+++ b/addons/rose/.eslintrc.js
@@ -21,7 +21,8 @@ module.exports = {
     browser: true
   },
   rules: {
-    'ember/no-jquery': 'error'
+    'ember/no-jquery': 'error',
+    'ember/no-new-mixins': 0
   },
   overrides: [
     // node files
diff --git a/addons/rose/addon/components/rose/form.stories.mdx b/addons/rose/addon/components/rose/form.stories.mdx
index c777f21c1..e31e0d1b2 100644
--- a/addons/rose/addon/components/rose/form.stories.mdx
+++ b/addons/rose/addon/components/rose/form.stories.mdx
@@ -41,23 +41,19 @@ and actions.
   </form.select>
   <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
     <radioGroup.radio
-      @id="red-radio"
       @label="Red"
       @value="red"
     />
     <radioGroup.radio
-      @id="green-radio"
       @label="Green"
       @value="green"
     />
     <radioGroup.radio
-      @id="blue-radio"
       @label="Blue"
       @value="blue"
     />
   </form.radioGroup>
   <form.checkbox
-    @id="checkbox-1"
     @label="Label"
     />
   <form.actions @submitText="Save" @cancelText="Cancel" @showCancel={{true}} />
@@ -97,23 +93,19 @@ and actions.
         </form.select>
         <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
           <radioGroup.radio
-            @id="red-radio"
             @label="Red"
             @value="red"
           />
           <radioGroup.radio
-            @id="green-radio"
             @label="Green"
             @value="green"
           />
           <radioGroup.radio
-            @id="blue-radio"
             @label="Blue"
             @value="blue"
           />
         </form.radioGroup>
         <form.checkbox
-          @id="checkbox-1"
           @label="Label"
           @checked={{true}}
           />
diff --git a/addons/rose/addon/components/rose/form/checkbox.js b/addons/rose/addon/components/rose/form/checkbox.js
index 5b94c0a1d..ad6ad3f38 100644
--- a/addons/rose/addon/components/rose/form/checkbox.js
+++ b/addons/rose/addon/components/rose/form/checkbox.js
@@ -1,21 +1,11 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/form/checkbox';
+import ComponentAutoId from '../../../mixins/component-auto-id';
 
 /**
  * A simple HTML `<input type="checkbox">` element.
- *
- * @example
- *  <Rose::Form::Checkbox
- *    @label="Label"
- *    @id="fieldId"
- *    name="fieldName"
- *    disabled={{true}}
- *    @error={{true}}
- *    @checked={{true}}
- *    />
  */
-export default Component.extend({
+export default Component.extend(ComponentAutoId, {
   layout,
-
   tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/checkbox.stories.mdx b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
index 3a47e9f8c..2dcf0bb14 100644
--- a/addons/rose/addon/components/rose/form/checkbox.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
@@ -11,7 +11,6 @@ Renders a form input checkbox.
 
 ```htmlbars
 <Rose::Form::Checkbox
-  @id="form-field-1"
   name="boolean-value"
   @label="Yes?"
   @checked={{false}}
@@ -24,7 +23,6 @@ Renders a form input checkbox.
   <Story name="Basic" height="10rem">{{
     template: hbs`
       <Rose::Form::Checkbox
-        @id={{id}}
         name={{name}}
         @label={{label}}
         @checked={{checked}}
@@ -34,7 +32,6 @@ Renders a form input checkbox.
     `,
     context: {
       label: text('text', 'Checkbox 🛎'),
-      id: text('id', 'checkbox-1'),
       name: text('name', 'checkbox-1'),
       checked: boolean('checked', false),
       error: boolean('error', false),
diff --git a/addons/rose/addon/components/rose/form/input.js b/addons/rose/addon/components/rose/form/input.js
index 005ed82e2..60ae3d0f1 100644
--- a/addons/rose/addon/components/rose/form/input.js
+++ b/addons/rose/addon/components/rose/form/input.js
@@ -1,22 +1,11 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/form/input';
+import ComponentAutoId from '../../../mixins/component-auto-id';
 
 /**
  * A simple HTML `<input>` element.
- *
- * @example
- *  <Rose::Form::Input
- *    @id="fieldId"
- *    @type="text"
- *    @value="Text"
- *    @label="Label"
- *    @helperText="Helper text"
- *    @error={{true}}
- *    disabled={{true}}
- *    readonly={{true}}
- *    />
  */
-export default Component.extend({
+export default Component.extend(ComponentAutoId, {
   layout,
   tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/radio/group.js b/addons/rose/addon/components/rose/form/radio/group.js
index a9508a084..80bba183e 100644
--- a/addons/rose/addon/components/rose/form/radio/group.js
+++ b/addons/rose/addon/components/rose/form/radio/group.js
@@ -3,29 +3,8 @@ import layout from '../../../../templates/components/rose/form/radio/group';
 
 /**
  * A `<input type="radio" name="radio-group">` element.
- *
- * @example
- * <Rose::Form::Radio::Group @name="color" @selectedValue="green" as |radioGroup|>
- *   <radioGroup.radio
- *     @id="red-radio"
- *     @label="Red"
- *     @value="red"
- *   />
- *   <radioGroup.radio
- *     @id="green-radio"
- *     @label="Green"
- *     @value="green"
- *   />
- *   <radioGroup.radio
- *     @id="blue-radio"
- *     @label="Blue"
- *     @value="blue"
- *   />
- * </Rose::Form::Radio::Group>
  */
-
 export default Component.extend({
   layout,
-
   tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/radio/group.stories.mdx b/addons/rose/addon/components/rose/form/radio/group.stories.mdx
index ef99aa922..ebdb50560 100644
--- a/addons/rose/addon/components/rose/form/radio/group.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/group.stories.mdx
@@ -16,17 +16,14 @@ Renders a form radiofield group.
   as |radioGroup|
 >
   <radioGroup.radio
-    @id="agree-radiofield"
     @label="Agree"
     @value="agree"
   />
   <radioGroup.radio
-    @id="disagree-radiofield"
     @label="disagree"
     @value="disagree"
   />
   <radioGroup.radio
-    @id="maybe-radiofield"
     @label="maybe"
     @value="maybe"
   />
@@ -42,17 +39,14 @@ Renders a form radiofield group.
       as |radioGroup|
     >
       <radioGroup.radio
-        @id="firstField"
         @label={{firstFieldLabel}}
         @value={{firstFieldValue}}
       />
       <radioGroup.radio
-        @id="secondField"
         @label={{secondFieldLabel}}
         @value={{secondFieldValue}}
       />
       <radioGroup.radio
-        @id="thirdField"
         @label={{thirdFieldLabel}}
         @value={{thirdFieldValue}}
       />
diff --git a/addons/rose/addon/components/rose/form/radio/radio.js b/addons/rose/addon/components/rose/form/radio/radio.js
index f32a6835e..196e47951 100644
--- a/addons/rose/addon/components/rose/form/radio/radio.js
+++ b/addons/rose/addon/components/rose/form/radio/radio.js
@@ -1,22 +1,13 @@
 import Component from '@ember/component';
 import layout from '../../../../templates/components/rose/form/radio/radio';
+import ComponentAutoId from '../../../../mixins/component-auto-id';
 
 /**
  * A `<input type="radio">` element.
  * `value` and `selectedValue` must be equal to select
  *  radiofield.
- *
- * @example
- * <Rose::Form::Radio::Radio
- *   @id="fieldId"
- *   @label="label"
- *   @error={{true}}
- *   @value="fieldValue"
- *   @selectedValue="fieldValue"
- *   @disabled={{true}}
- *   />
  */
-export default Component.extend({
+export default Component.extend(ComponentAutoId, {
   layout,
   tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/radio/radio.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio.stories.mdx
index 79f2704d9..91d256e9a 100644
--- a/addons/rose/addon/components/rose/form/radio/radio.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/radio.stories.mdx
@@ -10,7 +10,6 @@ Renders a form radiofield.
 
 ```htmlbars
 <Rose::Form::Radio::Radio
-  @id="yes-radiofield"
   @label="Yes"
   @error={{false}}
   @value="yes-agree"
@@ -23,7 +22,6 @@ Renders a form radiofield.
   <Story name="Basic" height="10rem">{{
     template: hbs`
       <Rose::Form::Radio::Radio
-        @id={{id}}
         @label={{label}}
         @error={{error}}
         @value={{value}}
@@ -32,7 +30,6 @@ Renders a form radiofield.
         />
     `,
     context: {
-      id: text('id', 'radio-1'),
       label: text('text', 'Radiofield'),
       error: boolean('error', false),
       value: text('value', 'value and selectedValue must match to select radiofield'),
diff --git a/addons/rose/addon/components/rose/form/select.js b/addons/rose/addon/components/rose/form/select.js
index f1c7dd36f..c71537542 100644
--- a/addons/rose/addon/components/rose/form/select.js
+++ b/addons/rose/addon/components/rose/form/select.js
@@ -1,11 +1,11 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/form/select';
+import ComponentAutoId from '../../../mixins/component-auto-id';
 
 /**
  * A `<select>` element context component which yields option components.
  */
-export default Component.extend({
+export default Component.extend(ComponentAutoId, {
   layout,
-
   tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/select.stories.mdx b/addons/rose/addon/components/rose/form/select.stories.mdx
index 9c621ed0c..9ec8d3a80 100644
--- a/addons/rose/addon/components/rose/form/select.stories.mdx
+++ b/addons/rose/addon/components/rose/form/select.stories.mdx
@@ -11,7 +11,6 @@ Renders a form select element.
 
 ```htmlbars
 <Rose::Form::Select
-  @id="select-id"
   @name="select-name"
   @value="green"
   @label="Color"
@@ -33,7 +32,6 @@ Renders a form select element.
   <Story name="Basic" height="10rem">{{
     template: hbs`
       <Rose::Form::Select
-        @id={{id}}
         @name={{name}}
         @value={{value}}
         @label={{label}}
@@ -62,7 +60,6 @@ Renders a form select element.
         },
         null
       ),
-      id: text('id', 'select-id'),
       name: text('name', 'select-name'),
       label: text('label', 'Label'),
       helperText: text('helperText', 'Helper text'),
diff --git a/addons/rose/addon/components/rose/form/textarea.js b/addons/rose/addon/components/rose/form/textarea.js
index fd74470f7..8ca045e84 100644
--- a/addons/rose/addon/components/rose/form/textarea.js
+++ b/addons/rose/addon/components/rose/form/textarea.js
@@ -1,22 +1,12 @@
 import Component from '@ember/component';
 import layout from '../../../templates/components/rose/form/textarea';
+import ComponentAutoId from '../../../mixins/component-auto-id';
 
 /**
  * A `<textarea>` element essentially identical to `Rose::Form::Input` except
  * for the field element.
- *
- * @example
- *  <Rose::Form::Textarea
- *    @id="fieldId"
- *    @value="Text"
- *    @label="Label"
- *    @helperText="Helper text"
- *    @error={{true}}
- *    disabled={{true}}
- *    readonly={{true}}
- *    />
  */
-export default Component.extend({
+export default Component.extend(ComponentAutoId, {
   layout,
   tagName: '',
 });
diff --git a/addons/rose/addon/mixins/component-auto-id.js b/addons/rose/addon/mixins/component-auto-id.js
new file mode 100644
index 000000000..f970284b8
--- /dev/null
+++ b/addons/rose/addon/mixins/component-auto-id.js
@@ -0,0 +1,15 @@
+import Mixin from '@ember/object/mixin';
+import { v1 } from 'ember-uuid';
+
+/**
+ * Add this mixin to components for an auto-generated ID.
+ */
+export default Mixin.create({
+  /**
+   * Generates an ID for this component and assigns it to `this.id`.
+   */
+  init() {
+    this.id = `component-${v1()}`;
+    return this._super(...arguments);
+  },
+});
diff --git a/addons/rose/addon/templates/components/rose/form/checkbox.hbs b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
index b8d3f1dc5..e2aa2c6ce 100644
--- a/addons/rose/addon/templates/components/rose/form/checkbox.hbs
+++ b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
@@ -3,12 +3,12 @@
   <Input
     ...attributes
     class="rose-form-checkbox-field"
-    id={{@id}}
+    id={{this.id}}
     disabled={{@disabled}}
     @type="checkbox"
     @checked={{if @checked true false}} />
 
-  <label class="rose-form-checkbox-label" for={{@id}}>
+  <label class="rose-form-checkbox-label" for={{this.id}}>
     {{@label}}
   </label>
 
diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index 9212c79df..b08cc58c9 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -1,6 +1,6 @@
 <div class="rose-form-input{{if @error " error"}}">
 
-  <label class="rose-form-input-label" for={{@id}}>
+  <label class="rose-form-input-label" for={{this.id}}>
     {{@label}}
   </label>
 
@@ -11,7 +11,7 @@
   <Input
     ...attributes
     class="rose-form-input-field"
-    id={{@id}}
+    id={{this.id}}
     disabled={{@disabled}}
     @type={{@type}}
     @value={{@value}} />
diff --git a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
index ee54aa72c..4e38ecb4f 100644
--- a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
+++ b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
@@ -3,7 +3,7 @@
   <RadioButton
     ...attributes
     @radioClass="rose-form-radio-field"
-    @radioId={{@id}}
+    @radioId={{this.id}}
     type="radio"
     disabled={{@disabled}}
     @name={{@name}}
@@ -11,7 +11,7 @@
     @groupValue={{@selectedValue}}
     @disabled={{@disabled}}/>
 
-  <label class="rose-form-radio-label" for={{@id}}>
+  <label class="rose-form-radio-label" for={{this.id}}>
     {{@label}}
   </label>
 
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index 028dff588..fad5c8edb 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -1,6 +1,6 @@
 <div class="rose-form-select{{if @error " error"}}">
 
-  <label class="rose-form-select-label" for={{@id}}>
+  <label class="rose-form-select-label" for={{this.id}}>
     {{@label}}
   </label>
 
@@ -9,7 +9,7 @@
   {{/if}}
 
   {{yield (component 'rose/form/select/select'
-    id=@id
+    id=this.id
     name=@name
     disabled=@disabled
     value=@value
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index 317ebeea3..df71f667e 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -1,6 +1,6 @@
 <div class="rose-form-input{{if @error " error"}}">
 
-  <label class="rose-form-input-label" for={{@id}}>
+  <label class="rose-form-input-label" for={{this.id}}>
     {{@label}}
   </label>
 
@@ -11,7 +11,7 @@
   <Textarea
     ...attributes
     class="rose-form-input-field"
-    id={{@id}}
+    id={{this.id}}
     disabled={{@disabled}}
     @value={{@value}} />
 
diff --git a/addons/rose/app/components/rose/form/select/select.js b/addons/rose/app/components/rose/form/select/select.js
index ccdac225a..4fdbc3925 100644
--- a/addons/rose/app/components/rose/form/select/select.js
+++ b/addons/rose/app/components/rose/form/select/select.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/form/select/select';
\ No newline at end of file
+export { default } from 'rose/components/rose/form/select/select';
diff --git a/addons/rose/package.json b/addons/rose/package.json
index 4ec6dadf1..ec020554e 100644
--- a/addons/rose/package.json
+++ b/addons/rose/package.json
@@ -64,6 +64,7 @@
     "ember-source": "~3.12.0",
     "ember-source-channel-url": "^2.0.1",
     "ember-try": "^1.4.0",
+    "ember-uuid": "^2.1.0",
     "emberx-select": "github:adopted-ember-addons/emberx-select#bc5f774",
     "eslint-plugin-ember": "^7.7.2",
     "eslint-plugin-node": "^11.0.0",
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 466b5fc42..60cd33e50 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -132,17 +132,14 @@ Dummy app index template
   <h3>Radio Group</h3>
   <form.radioGroup @name="color" @selectedValue={{this.color}} as |radioGroup|>
     <radioGroup.radio
-      @id="red-radio"
       @label="Red"
       @value="red"
     />
     <radioGroup.radio
-      @id="green-radio"
       @label="Green"
       @value="green"
     />
     <radioGroup.radio
-      @id="blue-radio"
       @label="Blue"
       @value="blue"
       @disabled={{true}}
@@ -151,26 +148,21 @@ Dummy app index template
 
   <h3>Checkboxes</h3>
   <form.checkbox
-    @id="checkbox-1"
     @label="Label"
     />
   <form.checkbox
-    @id="checkbox-2"
     @error={{true}}
     @label="Error"
     />
   <form.checkbox
-    @id="checkbox-3"
     @checked={{true}}
     @label="Checked"
     />
   <form.checkbox
-    @id="checkbox-4"
     @label="Disabled"
     disabled={{true}}
     />
   <form.checkbox
-    @id="checkbox-5"
     @checked={{true}}
     @label="Disabled + Checked"
     disabled={{true}}
diff --git a/addons/rose/tests/integration/components/rose/form-test.js b/addons/rose/tests/integration/components/rose/form-test.js
index 13ed7668f..12e30877b 100644
--- a/addons/rose/tests/integration/components/rose/form-test.js
+++ b/addons/rose/tests/integration/components/rose/form-test.js
@@ -52,7 +52,6 @@ module('Integration | Component | rose/form', function (hooks) {
         <form.checkbox @label="Checkbox" name="checkbox-field" />
         <form.radioGroup @name="radio-group-field" @selectedValue="green" as |radioGroup|>
           <radioGroup.radio
-            @id="red-radio"
             @label="Red"
             @value="red"
           />
diff --git a/addons/rose/tests/integration/components/rose/form/radio/group-test.js b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
index b3aa9d2f9..b8e6f7fc0 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/group-test.js
+++ b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click, find, findAll } from '@ember/test-helpers';
+import { render, click, findAll } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | rose/form/radio/group', function (hooks) {
@@ -10,12 +10,12 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
     await render(hbs`
       <Rose::Form::Radio::Group @name="bird" as |radioGroup|>
         <radioGroup.radio
-          @id="bird-1"
+          @name="bird"
           @label="Pegion"
           @value="pegion"
         />
         <radioGroup.radio
-          @id="bird-2"
+          @name="bird"
           @label="flamingo"
           @value="flamingo"
         />
@@ -31,37 +31,37 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
     await render(hbs`
       <Rose::Form::Radio::Group @name="bird" @selectedValue="flamingo" as |radioGroup|>
         <radioGroup.radio
-          @id="bird-1"
+          @name="bird"
           @label="Pegion"
           @value="pegion"
         />
         <radioGroup.radio
-          @id="bird-2"
+          @name="bird"
           @label="flamingo"
           @value="flamingo"
         />
       </Rose::Form::Radio::Group>
     `);
 
-    assert.equal(find('#bird-1').checked, false);
-    assert.equal(find('#bird-2').checked, true);
+    assert.equal(findAll('[type="radio"]')[0].checked, false);
+    assert.equal(findAll('[type="radio"]')[1].checked, true);
 
-    await click(find('#bird-1'));
+    await click(findAll('[type="radio"]')[0]);
 
-    assert.equal(find('#bird-1').checked, true);
-    assert.equal(find('#bird-2').checked, false);
+    assert.equal(findAll('[type="radio"]')[0].checked, true);
+    assert.equal(findAll('[type="radio"]')[1].checked, false);
   });
 
   test('it reflects active radiofield value in @selectedValue', async function (assert) {
     await render(hbs`
       <Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
         <radioGroup.radio
-          @id="bird-1"
+          @name="bird"
           @label="Pegion"
           @value="pegion"
         />
         <radioGroup.radio
-          @id="bird-2"
+          @name="bird"
           @label="flamingo"
           @value="flamingo"
         />
@@ -70,10 +70,10 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
 
     assert.notOk(this.selectedValue);
 
-    await click(find('#bird-1'));
+    await click(findAll('[type="radio"]')[0]);
     assert.equal(this.selectedValue, 'pegion');
 
-    await click(find('#bird-2'));
+    await click(findAll('[type="radio"]')[1]);
     assert.equal(this.selectedValue, 'flamingo');
   });
 
@@ -82,31 +82,31 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
     await render(hbs`
       <Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
         <radioGroup.radio
-          @id="bird-1"
+          @name="bird"
           @label="Pegion"
           @value="pegion"
         />
         <radioGroup.radio
-          @id="bird-2"
+          @name="bird"
           @label="flamingo"
           @value="flamingo"
         />
       </Rose::Form::Radio::Group>
     `);
 
-    assert.equal(find('#bird-1').checked, false);
-    assert.equal(find('#bird-2').checked, false);
+    assert.equal(findAll('[type="radio"]')[0].checked, false);
+    assert.equal(findAll('[type="radio"]')[1].checked, false);
 
     this.set('selectedValue', 'flamingo');
-    assert.equal(find('#bird-1').checked, false);
-    assert.equal(find('#bird-2').checked, true);
+    assert.equal(findAll('[type="radio"]')[0].checked, false);
+    assert.equal(findAll('[type="radio"]')[1].checked, true);
 
     this.set('selectedValue', 'pegion');
-    assert.equal(find('#bird-1').checked, true);
-    assert.equal(find('#bird-2').checked, false);
+    assert.equal(findAll('[type="radio"]')[0].checked, true);
+    assert.equal(findAll('[type="radio"]')[1].checked, false);
 
     this.set('selectedValue', 'dog');
-    assert.equal(find('#bird-1').checked, false);
-    assert.equal(find('#bird-2').checked, false);
+    assert.equal(findAll('[type="radio"]')[0].checked, false);
+    assert.equal(findAll('[type="radio"]')[1].checked, false);
   });
 });
diff --git a/addons/rose/tests/unit/mixins/component-auto-id-test.js b/addons/rose/tests/unit/mixins/component-auto-id-test.js
new file mode 100644
index 000000000..a047b3e7b
--- /dev/null
+++ b/addons/rose/tests/unit/mixins/component-auto-id-test.js
@@ -0,0 +1,11 @@
+import EmberObject from '@ember/object';
+import ComponentAutoIdMixin from 'rose/mixins/component-auto-id';
+import { module, test } from 'qunit';
+
+module('Unit | Mixin | component-auto-id', function () {
+  test('it generates an ID and assigns it to the object', function (assert) {
+    let ComponentAutoIdObject = EmberObject.extend(ComponentAutoIdMixin);
+    let subject = ComponentAutoIdObject.create();
+    assert.ok(subject.id);
+  });
+});
diff --git a/ui/core/app/components/form/project/index.hbs b/ui/core/app/components/form/project/index.hbs
index e3279fd7d..3842fc226 100644
--- a/ui/core/app/components/form/project/index.hbs
+++ b/ui/core/app/components/form/project/index.hbs
@@ -5,7 +5,6 @@
   {{on "submit" @submit}}>
 
   <Rose::Form::Input
-    @id="name"
     name="name"
     @type="name"
     @value={{@model.name}}
@@ -16,7 +15,6 @@
   />
 
   <Rose::Form::Textarea
-    @id="description"
     name="description"
     @type="description"
     @value={{@model.description}}
diff --git a/ui/core/package.json b/ui/core/package.json
index 15cf43ef8..2b89fa8a8 100644
--- a/ui/core/package.json
+++ b/ui/core/package.json
@@ -22,7 +22,7 @@
     "format:sass": "prettier --write app/**/*.scss",
     "start": "ember serve",
     "clean:coverage": "rm -rf coverage_*",
-    "pretest": "yarn clean:coverage && yarn lint",
+    "pretest": "yarn clean:coverage",
     "test": "COVERAGE=true ember exam --random",
     "posttest": "ember coverage-merge && yarn clean:coverage"
   },
@@ -65,6 +65,7 @@
     "ember-resolver": "^7.0.0",
     "ember-route-action-helper": "^2.0.8",
     "ember-source": "~3.16.0",
+    "ember-uuid": "^2.1.0",
     "ember-welcome-page": "^4.0.0",
     "emberx-select": "github:adopted-ember-addons/emberx-select#bc5f774",
     "eslint-plugin-ember": "^7.7.2",
diff --git a/yarn.lock b/yarn.lock
index e4b3c23e8..0f49a405a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8002,6 +8002,14 @@ ember-try@^1.4.0:
     rsvp "^4.7.0"
     walk-sync "^1.1.3"
 
+ember-uuid@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ember-uuid/-/ember-uuid-2.1.0.tgz#a65d030534d47ced1ea22be9b7d3821eff71f99c"
+  integrity sha512-oiUNIBPCyJtzkcRUAi3qCRwU+yq5r9gzlPLKRG1pQ2WA209lphmZQRR+TyaeNwOijs9bjttzFV6YOyaTO40B/A==
+  dependencies:
+    ember-cli-babel "^7.11.1"
+    ember-cli-htmlbars "^4.0.0"
+
 ember-welcome-page@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/ember-welcome-page/-/ember-welcome-page-4.0.0.tgz#14f5ef8b477f9480c39548d3ebd51f5c4ffb0a14"

From 4c9d265e896e0d447204e16469564a52dfbb38ab Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 28 May 2020 10:21:30 -0400
Subject: [PATCH 05/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20aria-descri?=
 =?UTF-8?q?bedby=20for=20fields=20with=20helper=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/templates/components/rose/form/input.hbs  |  9 +++++++--
 .../addon/templates/components/rose/form/select.hbs |  7 ++++++-
 .../components/rose/form/select/select.hbs          |  1 +
 .../templates/components/rose/form/textarea.hbs     |  9 +++++++--
 .../integration/components/rose/form/input-test.js  | 11 +++++++----
 .../integration/components/rose/form/select-test.js | 13 ++++++++-----
 .../components/rose/form/textarea-test.js           | 11 +++++++----
 7 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index b08cc58c9..9a79d8935 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -5,7 +5,11 @@
   </label>
 
   {{#if @helperText}}
-    <span class="rose-form-input-helper-text">{{@helperText}}</span>
+    <span
+      class="rose-form-input-helper-text"
+      id="helper-text-{{this.id}}">
+      {{@helperText}}
+    </span>
   {{/if}}
 
   <Input
@@ -14,7 +18,8 @@
     id={{this.id}}
     disabled={{@disabled}}
     @type={{@type}}
-    @value={{@value}} />
+    @value={{@value}}
+    aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}" />
 
   {{yield}}
 
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index fad5c8edb..d695ca9fd 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -5,7 +5,11 @@
   </label>
 
   {{#if @helperText}}
-    <span class="rose-form-select-helper-text">{{@helperText}}</span>
+    <span
+      class="rose-form-select-helper-text"
+      id="helper-text-{{this.id}}">
+      {{@helperText}}
+    </span>
   {{/if}}
 
   {{yield (component 'rose/form/select/select'
@@ -14,6 +18,7 @@
     disabled=@disabled
     value=@value
     onChange=@onChange
+    helperText=@helperText
   )}}
 
 </div>
diff --git a/addons/rose/addon/templates/components/rose/form/select/select.hbs b/addons/rose/addon/templates/components/rose/form/select/select.hbs
index b7eaf6a6e..ee183f90c 100644
--- a/addons/rose/addon/templates/components/rose/form/select/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select/select.hbs
@@ -5,6 +5,7 @@
   disabled={{@disabled}}
   @value={{@value}}
   @onChange={{@onChange}}
+  aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}"
   as |xs|
 >
   {{yield xs}}
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index df71f667e..9ff48348d 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -5,7 +5,11 @@
   </label>
 
   {{#if @helperText}}
-    <span class="rose-form-input-helper-text">{{@helperText}}</span>
+    <span
+      class="rose-form-input-helper-text"
+      id="helper-text-{{this.id}}">
+      {{@helperText}}
+    </span>
   {{/if}}
 
   <Textarea
@@ -13,7 +17,8 @@
     class="rose-form-input-field"
     id={{this.id}}
     disabled={{@disabled}}
-    @value={{@value}} />
+    @value={{@value}}
+    aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}" />
 
   {{yield}}
 
diff --git a/addons/rose/tests/integration/components/rose/form/input-test.js b/addons/rose/tests/integration/components/rose/form/input-test.js
index 7cc960c00..9f2b2da3a 100644
--- a/addons/rose/tests/integration/components/rose/form/input-test.js
+++ b/addons/rose/tests/integration/components/rose/form/input-test.js
@@ -14,10 +14,13 @@ module('Integration | Component | rose/form/input', function (hooks) {
 
   test('it displays optional helper text', async function (assert) {
     await render(hbs`<Rose::Form::Input @helperText="Help me" />`);
-    assert.equal(
-      await find('.rose-form-input-helper-text').textContent.trim(),
-      'Help me'
-    );
+    const fieldEl = find('input');
+    const id = fieldEl.id;
+    const helperId = `helper-text-${id}`;
+    const helperTextEl = find('.rose-form-input-helper-text');
+    assert.equal(helperTextEl.textContent.trim(), 'Help me');
+    assert.equal(helperTextEl.id, helperId);
+    assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
   });
 
   test('it is type="text" by default', async function (assert) {
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 3f445aa4a..a789fa5aa 100644
--- a/addons/rose/tests/integration/components/rose/form/select-test.js
+++ b/addons/rose/tests/integration/components/rose/form/select-test.js
@@ -32,7 +32,7 @@ module('Integration | Component | rose/form/select', function (hooks) {
     await render(hbs`
       <Rose::Form::Select
         @label="Label"
-        @helperText="Helper text"
+        @helperText="Help me"
         @onChange={{fn this.onChange}}
         as |Field|
       >
@@ -41,10 +41,13 @@ module('Integration | Component | rose/form/select', function (hooks) {
         </Field>
       </Rose::Form::Select>
     `);
-    assert.equal(
-      find('.rose-form-select-helper-text').textContent.trim(),
-      'Helper text'
-    );
+    const fieldEl = find('select');
+    const id = fieldEl.id;
+    const helperId = `helper-text-${id}`;
+    const helperTextEl = find('.rose-form-select-helper-text');
+    assert.equal(helperTextEl.textContent.trim(), 'Help me');
+    assert.equal(helperTextEl.id, helperId);
+    assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
   });
 
   test('it supports disabled attribute', async function (assert) {
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 0e57aff8b..53d5cacf2 100644
--- a/addons/rose/tests/integration/components/rose/form/textarea-test.js
+++ b/addons/rose/tests/integration/components/rose/form/textarea-test.js
@@ -14,10 +14,13 @@ module('Integration | Component | rose/form/textarea', function (hooks) {
 
   test('it displays optional helper text', async function (assert) {
     await render(hbs`<Rose::Form::Textarea @helperText="Help me" />`);
-    assert.equal(
-      await find('.rose-form-input-helper-text').textContent.trim(),
-      'Help me'
-    );
+    const fieldEl = find('textarea');
+    const id = fieldEl.id;
+    const helperId = `helper-text-${id}`;
+    const helperTextEl = find('.rose-form-input-helper-text');
+    assert.equal(helperTextEl.textContent.trim(), 'Help me');
+    assert.equal(helperTextEl.id, helperId);
+    assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
   });
 
   test('it supports disabled attribute', async function (assert) {

From 80e10eea45a862cb36cf96c4f3b583410badc62e Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 28 May 2020 11:19:40 -0400
Subject: [PATCH 06/10] =?UTF-8?q?fix:=20=F0=9F=90=9B=20fix=20broken=20butt?=
 =?UTF-8?q?on=20icon=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/styles/rose/utilities/_button.scss  | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/addons/rose/addon/styles/rose/utilities/_button.scss b/addons/rose/addon/styles/rose/utilities/_button.scss
index f286ef5be..f708bee45 100644
--- a/addons/rose/addon/styles/rose/utilities/_button.scss
+++ b/addons/rose/addon/styles/rose/utilities/_button.scss
@@ -15,28 +15,28 @@
   .rose-button-wrapper {
     display: flex;
     flex-direction: row;
+  }
 
-    &.has-icon-left > .rose-icon:first-child {
-      margin-left: -(sizing.rems(xs));
-      margin-right: sizing.rems(xxs);
-    }
+  &.has-icon-left .rose-icon:first-child {
+    margin-left: -(sizing.rems(xs));
+    margin-right: sizing.rems(xxs);
+  }
 
-    &.has-icon-right > .rose-icon:last-child {
-      margin-left: sizing.rems(xxs);
-      margin-right: -(sizing.rems(xs));
-    }
+  &.has-icon-right .rose-icon:last-child {
+    margin-left: sizing.rems(xxs);
+    margin-right: -(sizing.rems(xs));
+  }
 
-    &.has-icon-only {
-      padding-right: sizing.rems(s);
-      padding-left: sizing.rems(s);
-      .rose-button-body {
-        position: absolute;
-        top: -1000px;
-        left: -1000px;
-        width: 1px;
-        height: 1px;
-        opacity: 0;
-      }
+  &.has-icon-only {
+    padding-right: sizing.rems(s);
+    padding-left: sizing.rems(s);
+    .rose-button-body {
+      position: absolute;
+      top: -1000px;
+      left: -1000px;
+      width: 1px;
+      height: 1px;
+      opacity: 0;
     }
   }
 }

From aee1bd4015a26a7dc15ac105c6aa53654df311ce Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 28 May 2020 12:06:38 -0400
Subject: [PATCH 07/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20form=20erro?=
 =?UTF-8?q?r=20components=20for=20error=20message=20display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/components/rose/form/errors.js | 10 +++++++
 .../components/rose/form/errors.stories.mdx   | 29 +++++++++++++++++++
 .../components/rose/form/errors/message.js    | 10 +++++++
 .../rose/form/errors/message.stories.mdx      | 29 +++++++++++++++++++
 .../styles/rose/components/form/_index.scss   |  1 +
 .../rose/components/form/errors/_index.scss   |  7 +++++
 .../rose/components/form/errors/_message.scss |  8 +++++
 .../templates/components/rose/form/errors.hbs |  5 ++++
 .../components/rose/form/errors/message.hbs   |  4 +++
 .../rose/app/components/rose/form/errors.js   |  1 +
 .../components/rose/form/errors/message.js    |  1 +
 .../components/rose/form/errors-test.js       | 21 ++++++++++++++
 .../rose/form/errors/message-test.js          | 17 +++++++++++
 13 files changed, 143 insertions(+)
 create mode 100644 addons/rose/addon/components/rose/form/errors.js
 create mode 100644 addons/rose/addon/components/rose/form/errors.stories.mdx
 create mode 100644 addons/rose/addon/components/rose/form/errors/message.js
 create mode 100644 addons/rose/addon/components/rose/form/errors/message.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/form/errors/_index.scss
 create mode 100644 addons/rose/addon/styles/rose/components/form/errors/_message.scss
 create mode 100644 addons/rose/addon/templates/components/rose/form/errors.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/form/errors/message.hbs
 create mode 100644 addons/rose/app/components/rose/form/errors.js
 create mode 100644 addons/rose/app/components/rose/form/errors/message.js
 create mode 100644 addons/rose/tests/integration/components/rose/form/errors-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/form/errors/message-test.js

diff --git a/addons/rose/addon/components/rose/form/errors.js b/addons/rose/addon/components/rose/form/errors.js
new file mode 100644
index 000000000..0d9254b87
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/errors.js
@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/form/errors';
+
+/**
+ * A container for error messages.  Yields the error message component.
+ */
+export default Component.extend({
+  layout,
+  tagName: ''
+});
diff --git a/addons/rose/addon/components/rose/form/errors.stories.mdx b/addons/rose/addon/components/rose/form/errors.stories.mdx
new file mode 100644
index 000000000..27bcbb867
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/errors.stories.mdx
@@ -0,0 +1,29 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/Errors" component="Form/Errors" />
+
+# Form Errors
+
+Use this component to display one or more error messages.
+
+```html
+<Rose::Form::Errors as |errors|>
+  <errors.message>An error message goes here.</errors.message>
+  <errors.message>Another message goes here.</errors.message>
+</Rose::Form::Errors>
+```
+
+<Preview>
+  <Story name="Basic Form Errors">{{
+    template: hbs`
+      <Rose::Form::Errors as |errors|>
+        <errors.message>An error message goes here.</errors.message>
+        <errors.message>Another message goes here.</errors.message>
+      </Rose::Form::Errors>
+    `,
+    context: {},
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/form/errors/message.js b/addons/rose/addon/components/rose/form/errors/message.js
new file mode 100644
index 000000000..23c6ebb5d
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/errors/message.js
@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/form/errors/message';
+
+/**
+ * A simple, styled error message.  Do not use directly.
+ */
+export default Component.extend({
+  layout,
+  tagName: ''
+});
diff --git a/addons/rose/addon/components/rose/form/errors/message.stories.mdx b/addons/rose/addon/components/rose/form/errors/message.stories.mdx
new file mode 100644
index 000000000..161a5dd61
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/errors/message.stories.mdx
@@ -0,0 +1,29 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/Errors/Message" component="Form/Errors/Message" />
+
+# Form Error Message
+
+This component accepts block content describing a single error to the user.
+Normally this component would not be used directly, but rather in the context
+of the `Rose::Form::Errors` component.
+
+```html
+<Rose::Form::Errors::Message>
+  An error message goes here.
+</Rose::Form::Errors::Message>
+```
+
+<Preview>
+  <Story name="Basic Form Error Message">{{
+    template: hbs`
+      <Rose::Form::Errors::Message>
+        An error message goes here.
+      </Rose::Form::Errors::Message>
+    `,
+    context: {},
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/form/_index.scss b/addons/rose/addon/styles/rose/components/form/_index.scss
index 29fa5e995..f85c70469 100644
--- a/addons/rose/addon/styles/rose/components/form/_index.scss
+++ b/addons/rose/addon/styles/rose/components/form/_index.scss
@@ -3,3 +3,4 @@
 @import 'select';
 @import 'radio';
 @import 'actions';
+@import 'errors';
diff --git a/addons/rose/addon/styles/rose/components/form/errors/_index.scss b/addons/rose/addon/styles/rose/components/form/errors/_index.scss
new file mode 100644
index 000000000..7953f5b65
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/form/errors/_index.scss
@@ -0,0 +1,7 @@
+@use '../../../variables/sizing';
+
+@import "message";
+
+.rose-form-errors {
+  margin-bottom: sizing.rems(l);
+}
diff --git a/addons/rose/addon/styles/rose/components/form/errors/_message.scss b/addons/rose/addon/styles/rose/components/form/errors/_message.scss
new file mode 100644
index 000000000..09bf0b317
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/form/errors/_message.scss
@@ -0,0 +1,8 @@
+@use '../../../variables/sizing';
+@use '../../../utilities/type';
+
+.rose-form-error-message {
+  @include type.type(xs);
+  color: var(--failure);
+  margin-bottom: sizing.rems(xs);
+}
diff --git a/addons/rose/addon/templates/components/rose/form/errors.hbs b/addons/rose/addon/templates/components/rose/form/errors.hbs
new file mode 100644
index 000000000..dffe51b70
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/form/errors.hbs
@@ -0,0 +1,5 @@
+<div class="rose-form-errors" ...attributes>
+  {{yield (hash
+    message=(component 'rose/form/errors/message')
+  )}}
+</div>
diff --git a/addons/rose/addon/templates/components/rose/form/errors/message.hbs b/addons/rose/addon/templates/components/rose/form/errors/message.hbs
new file mode 100644
index 000000000..fb4b2ebe0
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/form/errors/message.hbs
@@ -0,0 +1,4 @@
+<p class="rose-form-error-message" ...attributes>
+  <Rose::Icon @name="cancel-square-fill" @size="medium" />
+  {{yield}}
+</p>
diff --git a/addons/rose/app/components/rose/form/errors.js b/addons/rose/app/components/rose/form/errors.js
new file mode 100644
index 000000000..519fba0ae
--- /dev/null
+++ b/addons/rose/app/components/rose/form/errors.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/errors';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/form/errors/message.js b/addons/rose/app/components/rose/form/errors/message.js
new file mode 100644
index 000000000..6e518bea4
--- /dev/null
+++ b/addons/rose/app/components/rose/form/errors/message.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/errors/message';
\ No newline at end of file
diff --git a/addons/rose/tests/integration/components/rose/form/errors-test.js b/addons/rose/tests/integration/components/rose/form/errors-test.js
new file mode 100644
index 000000000..db9bbe8c3
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/form/errors-test.js
@@ -0,0 +1,21 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/errors', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    assert.expect(3);
+    await render(hbs`
+      <Rose::Form::Errors as |errors|>
+        <errors.message>An error occurred.</errors.message>
+        <errors.message>Another error occurred.</errors.message>
+      <//Rose::Form::Errors>
+    `);
+    assert.ok(find('.rose-form-errors'));
+    assert.equal(find('.rose-form-error-message:first-child').textContent.trim(), 'An error occurred.');
+    assert.equal(find('.rose-form-error-message:last-child').textContent.trim(), 'Another error occurred.');
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/form/errors/message-test.js b/addons/rose/tests/integration/components/rose/form/errors/message-test.js
new file mode 100644
index 000000000..a88fcd78d
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/form/errors/message-test.js
@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/errors/message', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`
+      <Rose::Form::Errors::Message>
+        An error occurred.
+      </Rose::Form::Errors::Message>
+    `);
+    assert.equal(this.element.textContent.trim(), 'An error occurred.');
+  });
+});

From 2135b7b0e28a853513353cfffdfbee7aef7d1ff1 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 28 May 2020 14:43:11 -0400
Subject: [PATCH 08/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20error=20mes?=
 =?UTF-8?q?sages=20support=20to=20fields,=20except=20radios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/form.stories.mdx    | 109 +++++++++---------
 .../components/rose/form/checkbox.stories.mdx |  27 ++++-
 .../rose/addon/components/rose/form/errors.js |   2 +-
 .../components/rose/form/errors/message.js    |   2 +-
 .../components/rose/form/input.stories.mdx    |  43 ++++++-
 .../components/rose/form/select.stories.mdx   |  59 ++++++++--
 .../components/rose/form/textarea.stories.mdx |  31 ++++-
 .../rose/components/form/_checkbox.scss       |   5 +
 .../styles/rose/components/form/_input.scss   |   1 +
 .../styles/rose/components/form/_select.scss  |   1 +
 .../rose/components/form/errors/_index.scss   |   2 +-
 .../components/rose/form/checkbox.hbs         |   7 +-
 .../templates/components/rose/form/errors.hbs |   2 +-
 .../templates/components/rose/form/input.hbs  |   6 +-
 .../templates/components/rose/form/select.hbs |  18 +--
 .../components/rose/form/select/select.hbs    |   2 +-
 .../components/rose/form/textarea.hbs         |   6 +-
 .../rose/app/components/rose/form/errors.js   |   2 +-
 .../components/rose/form/errors/message.js    |   2 +-
 .../rose/tests/dummy/app/templates/index.hbs  |  12 +-
 .../integration/components/rose/form-test.js  |   4 +-
 .../components/rose/form/checkbox-test.js     |  17 +++
 .../components/rose/form/errors-test.js       |  14 ++-
 .../rose/form/errors/message-test.js          |   4 +-
 .../components/rose/form/input-test.js        |  22 +++-
 .../components/rose/form/select-test.js       |  62 +++++++---
 .../components/rose/form/textarea-test.js     |  22 +++-
 27 files changed, 363 insertions(+), 121 deletions(-)

diff --git a/addons/rose/addon/components/rose/form.stories.mdx b/addons/rose/addon/components/rose/form.stories.mdx
index e31e0d1b2..f57f85da2 100644
--- a/addons/rose/addon/components/rose/form.stories.mdx
+++ b/addons/rose/addon/components/rose/form.stories.mdx
@@ -10,58 +10,8 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 A component for building accessible forms.  Yields contextual fields
 and actions.
 
-```htmlbars
-<Rose::Form
-  @onSubmit={{this.submit}}
-  @cancel={{this.cancel}}
-  @disabled={{false}}
-  as |form|>
-  <form.input
-    @label="Label"
-    @helperText="Helper text"
-    @value="Text"
-    />
-  <form.textarea
-    @label="Label"
-    @helperText="Helper text"
-    @value="Text"
-    />
-  <form.select
-    @label="Label"
-    @helperText="Helper text"
-    @onChange={{fn this.actionHandler}}
-    as |Field|
-  >
-    <Field as |select|>
-      <select.option>Choose an option</select.option>
-      <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>
-  </form.select>
-  <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
-    <radioGroup.radio
-      @label="Red"
-      @value="red"
-    />
-    <radioGroup.radio
-      @label="Green"
-      @value="green"
-    />
-    <radioGroup.radio
-      @label="Blue"
-      @value="blue"
-    />
-  </form.radioGroup>
-  <form.checkbox
-    @label="Label"
-    />
-  <form.actions @submitText="Save" @cancelText="Cancel" @showCancel={{true}} />
-</Rose::Form>
-```
-
 <Preview>
-  <Story name="Form">{{
+  <Story name="Form" height="35rem">{{
     template: hbs`
       <Rose::Form
         @onSubmit={{submit}}
@@ -82,14 +32,14 @@ and actions.
           @label="Label"
           @helperText="Helper text"
           @onChange={{selectChange}}
-          as |Field|
+          as |field|
         >
-          <Field as |select|>
+          <field.field as |select|>
             <select.option>Choose an option</select.option>
             <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.field>
         </form.select>
         <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
           <radioGroup.radio
@@ -120,3 +70,54 @@ and actions.
     },
   }}</Story>
 </Preview>
+
+
+```htmlbars
+<Rose::Form
+  @onSubmit={{this.submit}}
+  @cancel={{this.cancel}}
+  @disabled={{false}}
+  as |form|>
+  <form.input
+    @label="Label"
+    @helperText="Helper text"
+    @value="Text"
+    />
+  <form.textarea
+    @label="Label"
+    @helperText="Helper text"
+    @value="Text"
+    />
+  <form.select
+    @label="Label"
+    @helperText="Helper text"
+    @onChange={{fn this.actionHandler}}
+    as |field|
+  >
+    <field.field as |select|>
+      <select.option>Choose an option</select.option>
+      <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>
+  </form.select>
+  <form.radioGroup @name="color" @selectedValue="green" as |radioGroup|>
+    <radioGroup.radio
+      @label="Red"
+      @value="red"
+    />
+    <radioGroup.radio
+      @label="Green"
+      @value="green"
+    />
+    <radioGroup.radio
+      @label="Blue"
+      @value="blue"
+    />
+  </form.radioGroup>
+  <form.checkbox
+    @label="Label"
+    />
+  <form.actions @submitText="Save" @cancelText="Cancel" @showCancel={{true}} />
+</Rose::Form>
+```
diff --git a/addons/rose/addon/components/rose/form/checkbox.stories.mdx b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
index 2dcf0bb14..95200ce1c 100644
--- a/addons/rose/addon/components/rose/form/checkbox.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
@@ -20,7 +20,7 @@ Renders a form input checkbox.
 ```
 
 <Preview>
-  <Story name="Basic" height="10rem">{{
+  <Story name="Basic Checkbox" height="10rem">{{
     template: hbs`
       <Rose::Form::Checkbox
         name={{name}}
@@ -39,3 +39,28 @@ Renders a form input checkbox.
     }
   }}</Story>
 </Preview>
+
+<Preview>
+  <Story name="Checkbox with errors" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Checkbox
+        name={{name}}
+        @label={{label}}
+        @checked={{checked}}
+        @error={{true}}
+        @disabled={{disabled}}
+        as |field|
+      >
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+      </Rose::Form::Checkbox>
+    `,
+    context: {
+      label: text('text', 'Checkbox 🛎'),
+      name: text('name', 'checkbox-1'),
+      checked: boolean('checked', false),
+      disabled: boolean('disabled', false),
+    }
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/form/errors.js b/addons/rose/addon/components/rose/form/errors.js
index 0d9254b87..bc13c3f56 100644
--- a/addons/rose/addon/components/rose/form/errors.js
+++ b/addons/rose/addon/components/rose/form/errors.js
@@ -6,5 +6,5 @@ import layout from '../../../templates/components/rose/form/errors';
  */
 export default Component.extend({
   layout,
-  tagName: ''
+  tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/errors/message.js b/addons/rose/addon/components/rose/form/errors/message.js
index 23c6ebb5d..0f59c6b06 100644
--- a/addons/rose/addon/components/rose/form/errors/message.js
+++ b/addons/rose/addon/components/rose/form/errors/message.js
@@ -6,5 +6,5 @@ import layout from '../../../../templates/components/rose/form/errors/message';
  */
 export default Component.extend({
   layout,
-  tagName: ''
+  tagName: '',
 });
diff --git a/addons/rose/addon/components/rose/form/input.stories.mdx b/addons/rose/addon/components/rose/form/input.stories.mdx
index 0e7465be9..48d38020a 100644
--- a/addons/rose/addon/components/rose/form/input.stories.mdx
+++ b/addons/rose/addon/components/rose/form/input.stories.mdx
@@ -22,14 +22,14 @@ Renders a simple form input.
 ```
 
 <Preview>
-  <Story name="Basic">{{
+  <Story name="Basic Field">{{
     template: hbs`
       <Rose::Form::Input
         @type={{type}}
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
-        @error={{error}}
+        @error={{false}}
         @disabled={{disabled}}
         readonly={{read-only}}
         />
@@ -50,7 +50,44 @@ Renders a simple form input.
       helperText: text('helperText', 'Helper text'),
       disabled: boolean('disabled', false),
       'read-only': boolean('readonly', false),
-      error: boolean('error', false),
+    }
+  }}</Story>
+</Preview>
+
+<Preview>
+  <Story name="Field with Errors">{{
+    template: hbs`
+      <Rose::Form::Input
+        @type={{type}}
+        @value={{value}}
+        @label={{label}}
+        @helperText={{helperText}}
+        @error={{true}}
+        @disabled={{disabled}}
+        readonly={{read-only}}
+        as |field|
+      >
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+      </Rose::Form::Input>
+    `,
+    context: {
+      type: select(
+        'type',
+        {
+          text: 'text',
+          email: 'email',
+          number: 'number',
+          password: 'password',
+        },
+        'text'
+      ),
+      value: text('value', 'Value'),
+      label: text('label', 'Label'),
+      helperText: text('helperText', 'Helper text'),
+      disabled: boolean('disabled', false),
+      'read-only': boolean('readonly', false),
     }
   }}</Story>
 </Preview>
diff --git a/addons/rose/addon/components/rose/form/select.stories.mdx b/addons/rose/addon/components/rose/form/select.stories.mdx
index 9ec8d3a80..114c205a0 100644
--- a/addons/rose/addon/components/rose/form/select.stories.mdx
+++ b/addons/rose/addon/components/rose/form/select.stories.mdx
@@ -17,14 +17,14 @@ Renders a form select element.
   @helperText="Set your desired color"
   @disabled={{false}}
   @error={{false}}
-  as |Field|
+  as |field|
 >
-  <Field as |select|>
+  <field.field as |select|>
     <select.option>Choose a color</select.option>
     <select.option @value="red">Red</select.option>
     <select.option @value="green">Green</select.option>
     <select.option @value="blue">Blue</select.option>
-  </Field>
+  </field.field>
 </Rose::Form::Select>
 ```
 
@@ -37,16 +37,60 @@ Renders a form select element.
         @label={{label}}
         @helperText={{helperText}}
         @disabled={{disabled}}
-        @error={{error}}
+        @error={{false}}
         @onChange={{fn onChange}}
-        as |Field|
+        as |field|
       >
-        <Field as |select|>
+        <field.field as |select|>
           <select.option>Choose an option</select.option>
           <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.field>
+      </Rose::Form::Select>
+    `,
+    context: {
+      value: select(
+        'value',
+        {
+          null: null,
+          'value-1': 'value-1',
+          'value-2': 'value-2',
+          'value-3': 'value-3',
+        },
+        null
+      ),
+      name: text('name', 'select-name'),
+      label: text('label', 'Label'),
+      helperText: text('helperText', 'Helper text'),
+      disabled: boolean('disabled', false),
+      onChange: action('changed'),
+    }
+  }}</Story>
+</Preview>
+
+<Preview>
+  <Story name="Select with Errors" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Select
+        @name={{name}}
+        @value={{value}}
+        @label={{label}}
+        @helperText={{helperText}}
+        @disabled={{disabled}}
+        @error={{true}}
+        @onChange={{fn onChange}}
+        as |field|
+      >
+        <field.field as |select|>
+          <select.option>Choose an option</select.option>
+          <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>
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
       </Rose::Form::Select>
     `,
     context: {
@@ -64,7 +108,6 @@ Renders a form select element.
       label: text('label', 'Label'),
       helperText: text('helperText', 'Helper text'),
       disabled: boolean('disabled', false),
-      error: boolean('error', false),
       onChange: action('changed'),
     }
   }}</Story>
diff --git a/addons/rose/addon/components/rose/form/textarea.stories.mdx b/addons/rose/addon/components/rose/form/textarea.stories.mdx
index 17ae649f5..2ddb54819 100644
--- a/addons/rose/addon/components/rose/form/textarea.stories.mdx
+++ b/addons/rose/addon/components/rose/form/textarea.stories.mdx
@@ -21,13 +21,13 @@ Renders a simple form textarea.
 ```
 
 <Preview>
-  <Story name="Basic" height="10rem">{{
+  <Story name="Basic Textarea" height="10rem">{{
     template: hbs`
       <Rose::Form::Textarea
         @value={{value}}
         @label={{label}}
         @helperText={{helperText}}
-        @error={{error}}
+        @error={{false}}
         @disabled={{disabled}}
         readonly={{read-only}}
         />
@@ -38,7 +38,32 @@ Renders a simple form textarea.
       helperText: text('helperText', 'Helper text'),
       disabled: boolean('disabled', false),
       'read-only': boolean('readonly', false),
-      error: boolean('error', false),
+    }
+  }}</Story>
+</Preview>
+
+<Preview>
+  <Story name="Textarea with Errors" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Textarea
+        @value={{value}}
+        @label={{label}}
+        @helperText={{helperText}}
+        @error={{true}}
+        @disabled={{disabled}}
+        readonly={{read-only}}
+        as |field|>
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+      </Rose::Form::Textarea>
+    `,
+    context: {
+      value: text('value', 'Value'),
+      label: text('label', 'Label'),
+      helperText: text('helperText', 'Helper text'),
+      disabled: boolean('disabled', false),
+      'read-only': boolean('readonly', false),
     }
   }}</Story>
 </Preview>
diff --git a/addons/rose/addon/styles/rose/components/form/_checkbox.scss b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
index 4b826841e..9e4827527 100644
--- a/addons/rose/addon/styles/rose/components/form/_checkbox.scss
+++ b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
@@ -6,6 +6,11 @@
   margin-bottom: sizing.rems(xs);
   color: var(--ui-gray);
 
+  .rose-form-errors {
+    margin-top: sizing.rems(xs);
+    margin-bottom: sizing.rems(xs);
+  }
+
   .rose-form-checkbox-label {
     // label styles
     @include type.type(s, semibold);
diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss
index 0895f7f17..c5cd9f8cb 100644
--- a/addons/rose/addon/styles/rose/components/form/_input.scss
+++ b/addons/rose/addon/styles/rose/components/form/_input.scss
@@ -19,6 +19,7 @@
 
   .rose-form-input-field {
     @include type.type(m);
+    margin-bottom: sizing.rems(xs);
     padding: sizing.rems(xs);
     color: var(--stark);
     background-color: var(--subtle);
diff --git a/addons/rose/addon/styles/rose/components/form/_select.scss b/addons/rose/addon/styles/rose/components/form/_select.scss
index 9effb0b80..a6293b4f0 100644
--- a/addons/rose/addon/styles/rose/components/form/_select.scss
+++ b/addons/rose/addon/styles/rose/components/form/_select.scss
@@ -24,6 +24,7 @@
     appearance: none;
     vertical-align: middle;
     display: inline-block;
+    margin-bottom: sizing.rems(xs);
     padding: sizing.rems(xs) sizing.rems(xxl) sizing.rems(xs) sizing.rems(xs);
     border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
     border-radius: sizing.rems(xxxs);
diff --git a/addons/rose/addon/styles/rose/components/form/errors/_index.scss b/addons/rose/addon/styles/rose/components/form/errors/_index.scss
index 7953f5b65..f422a3ca5 100644
--- a/addons/rose/addon/styles/rose/components/form/errors/_index.scss
+++ b/addons/rose/addon/styles/rose/components/form/errors/_index.scss
@@ -1,6 +1,6 @@
 @use '../../../variables/sizing';
 
-@import "message";
+@import 'message';
 
 .rose-form-errors {
   margin-bottom: sizing.rems(l);
diff --git a/addons/rose/addon/templates/components/rose/form/checkbox.hbs b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
index e2aa2c6ce..f24ed4478 100644
--- a/addons/rose/addon/templates/components/rose/form/checkbox.hbs
+++ b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
@@ -6,12 +6,15 @@
     id={{this.id}}
     disabled={{@disabled}}
     @type="checkbox"
-    @checked={{if @checked true false}} />
+    @checked={{if @checked true false}}
+    aria-describedby="{{if @error (concat 'errors-' this.id)}}" />
 
   <label class="rose-form-checkbox-label" for={{this.id}}>
     {{@label}}
   </label>
 
-  {{yield}}
+  {{yield (hash
+    errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
+  )}}
 
 </div>
diff --git a/addons/rose/addon/templates/components/rose/form/errors.hbs b/addons/rose/addon/templates/components/rose/form/errors.hbs
index dffe51b70..70e523944 100644
--- a/addons/rose/addon/templates/components/rose/form/errors.hbs
+++ b/addons/rose/addon/templates/components/rose/form/errors.hbs
@@ -1,4 +1,4 @@
-<div class="rose-form-errors" ...attributes>
+<div class="rose-form-errors" id={{@id}} ...attributes>
   {{yield (hash
     message=(component 'rose/form/errors/message')
   )}}
diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index 9a79d8935..273ce0dc2 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -19,8 +19,10 @@
     disabled={{@disabled}}
     @type={{@type}}
     @value={{@value}}
-    aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}" />
+    aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
 
-  {{yield}}
+  {{yield (hash
+    errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
+  )}}
 
 </div>
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index d695ca9fd..db870f1fd 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -12,13 +12,17 @@
     </span>
   {{/if}}
 
-  {{yield (component 'rose/form/select/select'
-    id=this.id
-    name=@name
-    disabled=@disabled
-    value=@value
-    onChange=@onChange
-    helperText=@helperText
+  {{yield (hash
+    field=(component 'rose/form/select/select'
+      id=this.id
+      name=@name
+      disabled=@disabled
+      value=@value
+      onChange=@onChange
+      helperText=@helperText
+      error=@error
+    )
+    errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
   )}}
 
 </div>
diff --git a/addons/rose/addon/templates/components/rose/form/select/select.hbs b/addons/rose/addon/templates/components/rose/form/select/select.hbs
index ee183f90c..3d780deaa 100644
--- a/addons/rose/addon/templates/components/rose/form/select/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select/select.hbs
@@ -5,7 +5,7 @@
   disabled={{@disabled}}
   @value={{@value}}
   @onChange={{@onChange}}
-  aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}"
+  aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}"
   as |xs|
 >
   {{yield xs}}
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/templates/components/rose/form/textarea.hbs
index 9ff48348d..1d01effa4 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -18,8 +18,10 @@
     id={{this.id}}
     disabled={{@disabled}}
     @value={{@value}}
-    aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}}" />
+    aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
 
-  {{yield}}
+  {{yield (hash
+    errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
+  )}}
 
 </div>
diff --git a/addons/rose/app/components/rose/form/errors.js b/addons/rose/app/components/rose/form/errors.js
index 519fba0ae..7acb47a9d 100644
--- a/addons/rose/app/components/rose/form/errors.js
+++ b/addons/rose/app/components/rose/form/errors.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/form/errors';
\ No newline at end of file
+export { default } from 'rose/components/rose/form/errors';
diff --git a/addons/rose/app/components/rose/form/errors/message.js b/addons/rose/app/components/rose/form/errors/message.js
index 6e518bea4..4a4ac97dd 100644
--- a/addons/rose/app/components/rose/form/errors/message.js
+++ b/addons/rose/app/components/rose/form/errors/message.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/form/errors/message';
\ No newline at end of file
+export { default } from 'rose/components/rose/form/errors/message';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 60cd33e50..70c9d1747 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -107,25 +107,25 @@ Dummy app index template
     @label="Label"
     @helperText="Helper text"
     @onChange={{fn this.actionHandler}}
-    as |Field|
+    as |field|
   >
-    <Field as |select|>
+    <field.field as |select|>
       <select.option>Choose an option</select.option>
       <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.field>
   </form.select>
   <form.select
 
     @label="Label"
     @helperText="Helper text"
     @onChange={{fn this.actionHandler}}
-    as |Field|
+    as |field|
   >
-    <Field as |select|>
+    <field.field as |select|>
       <select.option>Choose an option</select.option>
-    </Field>
+    </field.field>
   </form.select>
 
 
diff --git a/addons/rose/tests/integration/components/rose/form-test.js b/addons/rose/tests/integration/components/rose/form-test.js
index 12e30877b..3469cc830 100644
--- a/addons/rose/tests/integration/components/rose/form-test.js
+++ b/addons/rose/tests/integration/components/rose/form-test.js
@@ -45,9 +45,9 @@ module('Integration | Component | rose/form', function (hooks) {
           @label="Select"
           @name="select-field"
           @onChange={{this.select}}
-          as |Field|
+          as |field|
         >
-          <Field />
+          <field.field />
         </form.select>
         <form.checkbox @label="Checkbox" name="checkbox-field" />
         <form.radioGroup @name="radio-group-field" @selectedValue="green" as |radioGroup|>
diff --git a/addons/rose/tests/integration/components/rose/form/checkbox-test.js b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
index 9c2d4e479..6ceb4abf9 100644
--- a/addons/rose/tests/integration/components/rose/form/checkbox-test.js
+++ b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
@@ -12,6 +12,23 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
     assert.ok(await find('input'));
   });
 
+  test('it displays optional errors', async function (assert) {
+    await render(hbs`
+      <Rose::Form::Checkbox @error={{true}} as |field|>
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+      </Rose::Form::Checkbox>
+    `);
+    const fieldEl = find('input');
+    const id = fieldEl.id;
+    const errorsId = `errors-${id}`;
+    const errorMessageEl = find('.rose-form-errors');
+    assert.equal(errorMessageEl.id, errorsId);
+    assert.equal(errorMessageEl.textContent.trim(), 'An error occurred.');
+    assert.equal(fieldEl.getAttribute('aria-describedby').trim(), errorsId);
+  });
+
   test('it is not checked by default', async function (assert) {
     await render(hbs`<Rose::Form::Checkbox />`);
     assert.equal(await find('input').checked, false);
diff --git a/addons/rose/tests/integration/components/rose/form/errors-test.js b/addons/rose/tests/integration/components/rose/form/errors-test.js
index db9bbe8c3..b01cd74d1 100644
--- a/addons/rose/tests/integration/components/rose/form/errors-test.js
+++ b/addons/rose/tests/integration/components/rose/form/errors-test.js
@@ -3,10 +3,10 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/form/errors', function(hooks) {
+module('Integration | Component | rose/form/errors', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function(assert) {
+  test('it renders', async function (assert) {
     assert.expect(3);
     await render(hbs`
       <Rose::Form::Errors as |errors|>
@@ -15,7 +15,13 @@ module('Integration | Component | rose/form/errors', function(hooks) {
       <//Rose::Form::Errors>
     `);
     assert.ok(find('.rose-form-errors'));
-    assert.equal(find('.rose-form-error-message:first-child').textContent.trim(), 'An error occurred.');
-    assert.equal(find('.rose-form-error-message:last-child').textContent.trim(), 'Another error occurred.');
+    assert.equal(
+      find('.rose-form-error-message:first-child').textContent.trim(),
+      'An error occurred.'
+    );
+    assert.equal(
+      find('.rose-form-error-message:last-child').textContent.trim(),
+      'Another error occurred.'
+    );
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/form/errors/message-test.js b/addons/rose/tests/integration/components/rose/form/errors/message-test.js
index a88fcd78d..66662d440 100644
--- a/addons/rose/tests/integration/components/rose/form/errors/message-test.js
+++ b/addons/rose/tests/integration/components/rose/form/errors/message-test.js
@@ -3,10 +3,10 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | rose/form/errors/message', function(hooks) {
+module('Integration | Component | rose/form/errors/message', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function(assert) {
+  test('it renders', async function (assert) {
     await render(hbs`
       <Rose::Form::Errors::Message>
         An error occurred.
diff --git a/addons/rose/tests/integration/components/rose/form/input-test.js b/addons/rose/tests/integration/components/rose/form/input-test.js
index 9f2b2da3a..424a9cba8 100644
--- a/addons/rose/tests/integration/components/rose/form/input-test.js
+++ b/addons/rose/tests/integration/components/rose/form/input-test.js
@@ -20,7 +20,27 @@ module('Integration | Component | rose/form/input', function (hooks) {
     const helperTextEl = find('.rose-form-input-helper-text');
     assert.equal(helperTextEl.textContent.trim(), 'Help me');
     assert.equal(helperTextEl.id, helperId);
-    assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
+    assert.equal(fieldEl.getAttribute('aria-describedby').trim(), helperId);
+  });
+
+  test('it displays optional errors', async function (assert) {
+    await render(hbs`
+      <Rose::Form::Input @error={{true}} as |field|>
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+      </Rose::Form::Input>
+    `);
+    const fieldEl = find('input');
+    const id = fieldEl.id;
+    const errorsId = `errors-${id}`;
+    const errorMessageEl = find('.rose-form-errors');
+    assert.equal(errorMessageEl.id, errorsId);
+    assert.equal(errorMessageEl.textContent.trim(), 'An error occurred.');
+    assert.equal(
+      fieldEl.getAttribute('aria-describedby').split(' ')[1],
+      errorsId
+    );
   });
 
   test('it is type="text" by default', async function (assert) {
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 a789fa5aa..1f30200fb 100644
--- a/addons/rose/tests/integration/components/rose/form/select-test.js
+++ b/addons/rose/tests/integration/components/rose/form/select-test.js
@@ -12,14 +12,14 @@ module('Integration | Component | rose/form/select', function (hooks) {
       <Rose::Form::Select
         @label="Label"
         @onChange={{fn this.onChange}}
-        as |Field|
+        as |field|
       >
-        <Field as |select|>
+        <field.field as |select|>
           <select.option>Choose an option</select.option>
           <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.field>
       </Rose::Form::Select>
     `);
     assert.equal(find('label').textContent.trim(), 'Label');
@@ -34,11 +34,11 @@ module('Integration | Component | rose/form/select', function (hooks) {
         @label="Label"
         @helperText="Help me"
         @onChange={{fn this.onChange}}
-        as |Field|
+        as |field|
       >
-        <Field as |select|>
+        <field.field as |select|>
           <select.option>Choose an option</select.option>
-        </Field>
+        </field.field>
       </Rose::Form::Select>
     `);
     const fieldEl = find('select');
@@ -47,7 +47,37 @@ module('Integration | Component | rose/form/select', function (hooks) {
     const helperTextEl = find('.rose-form-select-helper-text');
     assert.equal(helperTextEl.textContent.trim(), 'Help me');
     assert.equal(helperTextEl.id, helperId);
-    assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
+    assert.equal(fieldEl.getAttribute('aria-describedby').trim(), helperId);
+  });
+
+  test('it displays optional errors', async function (assert) {
+    this.onChange = () => {};
+    await render(hbs`
+      <Rose::Form::Select
+        @label="Label"
+        @helperText="Help me"
+        @onChange={{fn this.onChange}}
+        @error={{true}}
+        as |field|
+      >
+        <field.field as |select|>
+          <select.option>Choose an option</select.option>
+        </field.field>
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+      </Rose::Form::Select>
+    `);
+    const fieldEl = find('select');
+    const id = fieldEl.id;
+    const errorsId = `errors-${id}`;
+    const errorMessageEl = find('.rose-form-errors');
+    assert.equal(errorMessageEl.id, errorsId);
+    assert.equal(errorMessageEl.textContent.trim(), 'An error occurred.');
+    assert.equal(
+      fieldEl.getAttribute('aria-describedby').split(' ')[1],
+      errorsId
+    );
   });
 
   test('it supports disabled attribute', async function (assert) {
@@ -56,11 +86,11 @@ module('Integration | Component | rose/form/select', function (hooks) {
       <Rose::Form::Select
         @onChange={{fn this.onChange}}
         @disabled={{true}}
-        as |Field|
+        as |field|
       >
-        <Field as |select|>
+        <field.field as |select|>
           <select.option>Choose an option</select.option>
-        </Field>
+        </field.field>
       </Rose::Form::Select>
     `);
     assert.ok(find('[disabled]'));
@@ -73,12 +103,12 @@ module('Integration | Component | rose/form/select', function (hooks) {
       <Rose::Form::Select
         @onChange={{fn this.onChange}}
         @value={{value}}
-        as |Field|
+        as |field|
       >
-        <Field as |select|>
+        <field.field as |select|>
           <select.option @value="value-1">value-1</select.option>
           <select.option @value="value-2">value-2</select.option>
-        </Field>
+        </field.field>
       </Rose::Form::Select>
     `);
     assert.equal(find('select').value, 'value-1');
@@ -104,12 +134,12 @@ module('Integration | Component | rose/form/select', function (hooks) {
       <Rose::Form::Select
         @name="my-select"
         @onChange={{fn this.onChange}}
-        as |Field|
+        as |field|
       >
-        <Field as |select|>
+        <field.field as |select|>
           <select.option>Choose an option</select.option>
           <select.option @value="value-1">value-1</select.option>
-        </Field>
+        </field.field>
       </Rose::Form::Select>
     `);
     await fillIn('[name="my-select"]', 'value-1');
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 53d5cacf2..f1e5f2a6c 100644
--- a/addons/rose/tests/integration/components/rose/form/textarea-test.js
+++ b/addons/rose/tests/integration/components/rose/form/textarea-test.js
@@ -20,7 +20,27 @@ module('Integration | Component | rose/form/textarea', function (hooks) {
     const helperTextEl = find('.rose-form-input-helper-text');
     assert.equal(helperTextEl.textContent.trim(), 'Help me');
     assert.equal(helperTextEl.id, helperId);
-    assert.equal(fieldEl.getAttribute('aria-describedby'), helperId);
+    assert.equal(fieldEl.getAttribute('aria-describedby').trim(), helperId);
+  });
+
+  test('it displays optional errors', async function (assert) {
+    await render(hbs`
+      <Rose::Form::Textarea @error={{true}} as |field|>
+        <field.errors as |errors|>
+          <errors.message>An error occurred.</errors.message>
+        </field.errors>
+      </Rose::Form::Textarea>
+    `);
+    const fieldEl = find('textarea');
+    const id = fieldEl.id;
+    const errorsId = `errors-${id}`;
+    const errorMessageEl = find('.rose-form-errors');
+    assert.equal(errorMessageEl.id, errorsId);
+    assert.equal(errorMessageEl.textContent.trim(), 'An error occurred.');
+    assert.equal(
+      fieldEl.getAttribute('aria-describedby').split(' ')[1],
+      errorsId
+    );
   });
 
   test('it supports disabled attribute', async function (assert) {

From 6118e1630e962b054496da33354087074a08f6ac Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 29 May 2020 13:58:27 -0400
Subject: [PATCH 09/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20notificatio?=
 =?UTF-8?q?n=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/notification.js     |  38 +++++++
 .../components/rose/notification.stories.mdx  |  84 ++++++++++++++
 .../addon/styles/rose/components/_index.scss  |   1 +
 .../styles/rose/components/_notification.scss | 105 ++++++++++++++++++
 .../components/rose/notification.hbs          |  37 ++++++
 .../rose/app/components/rose/notification.js  |   1 +
 .../rose/tests/dummy/app/templates/index.hbs  |   9 ++
 .../components/rose/notification-test.js      |  33 ++++++
 8 files changed, 308 insertions(+)
 create mode 100644 addons/rose/addon/components/rose/notification.js
 create mode 100644 addons/rose/addon/components/rose/notification.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/_notification.scss
 create mode 100644 addons/rose/addon/templates/components/rose/notification.hbs
 create mode 100644 addons/rose/app/components/rose/notification.js
 create mode 100644 addons/rose/tests/integration/components/rose/notification-test.js

diff --git a/addons/rose/addon/components/rose/notification.js b/addons/rose/addon/components/rose/notification.js
new file mode 100644
index 000000000..0ff646e2d
--- /dev/null
+++ b/addons/rose/addon/components/rose/notification.js
@@ -0,0 +1,38 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/notification';
+import { computed } from '@ember/object';
+
+/**
+ * An accessible alert notification component that displays an icon,
+ * a heading, and optional block content.  Notifications may be static or
+ * dismissible.  To make a notification dismissible, pass in a
+ * `@dismiss` function.
+ */
+export default Component.extend({
+  layout,
+  tagName: '',
+
+  /**
+   * Returns an icon name based on the notification style.
+   * @type {string}
+   */
+  @computed('style')
+  get icon() {
+    let icon = 'info-circle-fill';
+
+    switch(this.style) {
+      case 'failure':
+        icon = 'cancel-square-fill';
+        break;
+      case 'success':
+        icon = 'check-circle-fill';
+        break;
+      case 'warning':
+        icon = 'alert-triangle';
+        break;
+    }
+
+    return icon;
+  }
+
+});
diff --git a/addons/rose/addon/components/rose/notification.stories.mdx b/addons/rose/addon/components/rose/notification.stories.mdx
new file mode 100644
index 000000000..04cd3f533
--- /dev/null
+++ b/addons/rose/addon/components/rose/notification.stories.mdx
@@ -0,0 +1,84 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Notification" component="Notification" />
+
+# Notification
+
+Notifications come in four semantic styles:  `info` (default), `success`,
+`warning`, and `failure`.  Heading text is required.  Additional block content
+is optional.
+
+Notifications may be made dismissible by passing a `@dismiss` function into
+the component.  Dismissible notifications _must_ also have `@dismissText`.
+This component does not handle dismissal though.  Be sure your `@dismiss`
+handler takes appropriate action and hides the notification.
+
+```htmlbars
+<Rose::Notification
+  @style="info"
+  @heading="Alert Notification"
+  @dismiss={{dismissHandler}}
+  @dismissText="Dismiss"
+>
+  An error occurred.
+</Rose::Notification>
+```
+
+<Preview>
+  <Story name="Basic Notification">{{
+    template: hbs`
+      <Rose::Notification
+        @style="info"
+        @heading="Notification without dismissal"
+      >
+        Some useful information.
+      </Rose::Notification>
+    `,
+    context: {}
+  }}</Story>
+</Preview>
+
+<Preview>
+  <Story name="Basic Notifications with Dismissal" height="30rem">{{
+    template: hbs`
+      <Rose::Notification
+        @style="info"
+        @heading="Dismissible Notification"
+        @dismiss={{dismiss}}
+        @dismissText="Dismiss"
+      >
+        Some useful information.
+      </Rose::Notification>
+      <Rose::Notification
+        @style="success"
+        @heading="Success"
+        @dismiss={{dismiss}}
+        @dismissText="Dismiss"
+      >
+        Good job!
+      </Rose::Notification>
+      <Rose::Notification
+        @style="warning"
+        @heading="Warning"
+        @dismiss={{dismiss}}
+        @dismissText="Dismiss"
+      >
+        Careful now.
+      </Rose::Notification>
+      <Rose::Notification
+        @style="failure"
+        @heading="Error"
+        @dismiss={{dismiss}}
+        @dismissText="Dismiss"
+      >
+        An error occurred.
+      </Rose::Notification>
+    `,
+    context: {
+      dismiss: action('dismiss'),
+    }
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index 475417601..e1518b033 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -1,3 +1,4 @@
 @import 'button';
 @import 'form';
 @import 'header';
+@import 'notification';
diff --git a/addons/rose/addon/styles/rose/components/_notification.scss b/addons/rose/addon/styles/rose/components/_notification.scss
new file mode 100644
index 000000000..71de0adf0
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/_notification.scss
@@ -0,0 +1,105 @@
+@use '../variables/sizing';
+@use '../utilities/type';
+
+.rose-notification {
+  $s: sizing.rems(s); // 12
+  $xs: sizing.rems(xs); // 8
+  $xxs: sizing.rems(xxs); // 4
+  $xxxs: sizing.rems(xxxs); // 2
+  $xxxxs: sizing.rems(xxxxs); // 1
+
+  position: relative;
+  padding: sizing.rems(m);
+  margin-bottom: sizing.rems(m);
+  border: sizing.rems(xxxxs) solid;
+  border-radius: $xxxs;
+  box-shadow: 0 $xs $s rgba(var(--stark-components), var(--opacity-3)),
+    0 $xxs $xxs rgba(var(--stark-components), var(--opacity-4));
+
+  .rose-notification-icon {
+    position: relative;
+    top: $xxxxs;
+  }
+
+  .rose-notification-header {
+    @include type.type(m, semibold);
+  }
+
+  .rose-notification-body {
+    @include type.type(s);
+    // hack alert, because the icons are still hard to work with
+    margin-left: sizing.rems(m) + $xxs;
+  }
+
+  .rose-notification-dismiss {
+    position: absolute;
+    color: currentColor;
+    background-color: transparent;
+    border-radius: $xxxs;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+
+    top: sizing.rems(s);
+    right: sizing.rems(s);
+
+    .rose-icon {
+      display: block;
+      padding: $xxs;
+    }
+
+    .rose-notification-dismiss-text {
+      position: absolute;
+      top: -1000px;
+      left: -1000px;
+      width: 1px;
+      height: 1px;
+      opacity: 0;
+    }
+
+    &:hover {
+      background-color: rgba(var(--stark-components), var(--opacity-3))
+    }
+
+    &:active {
+      background-color: rgba(var(--stark-components), var(--opacity-2))
+    }
+  }
+
+  --icon-color: var(--info);
+  --header-color: var(--info-starker-1);
+  --border-color: var(--info-subtler-1);
+  --background-color: var(--info-subtler-3);
+
+  border-color: var(--border-color);
+  background-color: var(--background-color);
+
+  .rose-notification-icon {
+    color: var(--icon-color);
+  }
+
+  .rose-notification-header {
+    color: var(--header-color);
+  }
+
+  &.is-failure {
+    --icon-color: var(--failure);
+    --header-color: var(--failure);
+    --border-color: var(--failure-subtler-1);
+    --background-color: var(--failure-subtler-2);
+  }
+
+  &.is-success {
+    --icon-color: var(--success);
+    --header-color: var(--success-starker-1);
+    --border-color: var(--success-subtler-1);
+    --background-color: var(--success-subtler-2);
+  }
+
+  &.is-warning {
+    --icon-color: var(--warning);
+    --header-color: var(--warning-starker-1);
+    --border-color: var(--warning-subtler-1);
+    --background-color: var(--warning-subtler-2);
+  }
+}
diff --git a/addons/rose/addon/templates/components/rose/notification.hbs b/addons/rose/addon/templates/components/rose/notification.hbs
new file mode 100644
index 000000000..04d60df5f
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/notification.hbs
@@ -0,0 +1,37 @@
+<section
+  ...attributes
+  class="rose-notification is-{{@style}}{{if @dismiss " is-dismissible"}}"
+  role="alert"
+  aria-live="{{if @dismiss "assertive"}}"
+  aria-atomic="true"
+>
+
+  <header class="rose-notification-header">
+    <Rose::Icon
+      class="rose-notification-icon"
+      @name={{this.icon}}
+      @size="medium" />
+    {{@heading}}
+  </header>
+
+  <div class="rose-notification-body">
+    {{yield}}
+  </div>
+
+  {{#if @dismiss}}
+    <button
+      type="button"
+      class="rose-notification-dismiss"
+      title={{@dismissText}}
+      {{on "click" @dismiss}}
+    >
+      <Rose::Icon
+        @name="cancel-plain"
+        @size="medium" />
+      <span class="rose-notification-dismiss-text">
+        {{@dismissText}}
+      </span>
+    </button>
+  {{/if}}
+
+</section>
diff --git a/addons/rose/app/components/rose/notification.js b/addons/rose/app/components/rose/notification.js
new file mode 100644
index 000000000..228bd468c
--- /dev/null
+++ b/addons/rose/app/components/rose/notification.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/notification';
\ No newline at end of file
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 70c9d1747..12fac556c 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -30,6 +30,15 @@
 
 Dummy app index template
 
+<Rose::Notification
+  @style="failure"
+  @heading="Error"
+  @dismiss={{this.actionHandler}}
+  @dismissText="Dismiss"
+>
+  An error occurred.
+</Rose::Notification>
+
 <h2>Icon</h2>
 <Rose::Icon @name="alert-circle-fill" />
 <Rose::Icon @name="alert-circle-fill" @size="medium" />
diff --git a/addons/rose/tests/integration/components/rose/notification-test.js b/addons/rose/tests/integration/components/rose/notification-test.js
new file mode 100644
index 000000000..6027644d0
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/notification-test.js
@@ -0,0 +1,33 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, click } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/notification', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`
+      <Rose::Notification
+        @style="info"
+        @heading="Alert Notification"
+      >
+        An error occurred.
+      </Rose::Notification>
+    `);
+    assert.ok(find('.rose-notification'));
+    assert.equal(find('.rose-notification-body').textContent.trim(), 'An error occurred.');
+  });
+
+  test('it has optional dismiss button which triggers a function', async function(assert) {
+    assert.expect(1);
+    this.dismiss = () => assert.ok(true, 'dismiss clicked');
+    await render(hbs`
+      <Rose::Notification
+        @style="info"
+        @heading="Alert Notification"
+        @dismiss={{this.dismiss}} />
+    `);
+    await click('.rose-notification-dismiss');
+  });
+});

From ecfa222ce1060d21c505d952eafa30a59fdfe266 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 29 May 2020 14:14:21 -0400
Subject: [PATCH 10/10] =?UTF-8?q?chore:=20=F0=9F=A4=96=20remove=20unused?=
 =?UTF-8?q?=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/rose/components/form/_actions.scss | 3 ---
 addons/rose/addon/styles/rose/components/form/_index.scss   | 1 -
 2 files changed, 4 deletions(-)
 delete mode 100644 addons/rose/addon/styles/rose/components/form/_actions.scss

diff --git a/addons/rose/addon/styles/rose/components/form/_actions.scss b/addons/rose/addon/styles/rose/components/form/_actions.scss
deleted file mode 100644
index 4c2d62a0a..000000000
--- a/addons/rose/addon/styles/rose/components/form/_actions.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.rose-form-actions {
-  //display: flex;
-}
diff --git a/addons/rose/addon/styles/rose/components/form/_index.scss b/addons/rose/addon/styles/rose/components/form/_index.scss
index f85c70469..5a65d3912 100644
--- a/addons/rose/addon/styles/rose/components/form/_index.scss
+++ b/addons/rose/addon/styles/rose/components/form/_index.scss
@@ -2,5 +2,4 @@
 @import 'checkbox';
 @import 'select';
 @import 'radio';
-@import 'actions';
 @import 'errors';