From 1ee8bbe673bf8d6888974d97fe37f957b5db8fe0 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 6 Aug 2020 17:32:48 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20push=20`error`=20cla?=
 =?UTF-8?q?ss=20down=20from=20field=20wrapper=20element?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/form/helper-text.stories.mdx         |  8 ++++---
 .../components/rose/form/label.stories.mdx    |  7 ++++--
 .../rose/components/form/_helper-text.scss    |  4 ++++
 .../styles/rose/components/form/_input.scss   | 18 ++++-----------
 .../styles/rose/components/form/_label.scss   |  4 ++++
 .../styles/rose/components/form/_select.scss  | 18 ++++-----------
 .../components/rose/form/helper-text.hbs      |  2 +-
 .../templates/components/rose/form/input.hbs  | 23 +++++++++----------
 .../templates/components/rose/form/label.hbs  |  6 ++++-
 .../templates/components/rose/form/select.hbs |  9 +++++---
 .../components/rose/form/select/select.hbs    |  5 ++--
 .../components/rose/form/textarea.hbs         | 12 ++++++----
 12 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/helper-text.stories.mdx b/addons/rose/addon/components/rose/form/helper-text.stories.mdx
index f22015f8f..68ae2906b 100644
--- a/addons/rose/addon/components/rose/form/helper-text.stories.mdx
+++ b/addons/rose/addon/components/rose/form/helper-text.stories.mdx
@@ -17,12 +17,14 @@ by form fields and should not be used directly.
 ```
 
 <Preview>
-  <Story name="Basic Form Errors">{{
+  <Story name="HelperText">{{
     template: hbs`
-      <Rose::Form::HelperText>
+      <Rose::Form::HelperText @error={{this.error}}>
         Helper text
       </Rose::Form::HelperText>
     `,
-    context: {},
+    context: {
+      error: boolean('error', false)
+    },
   }}</Story>
 </Preview>
diff --git a/addons/rose/addon/components/rose/form/label.stories.mdx b/addons/rose/addon/components/rose/form/label.stories.mdx
index e8b180c02..bdc985c9c 100644
--- a/addons/rose/addon/components/rose/form/label.stories.mdx
+++ b/addons/rose/addon/components/rose/form/label.stories.mdx
@@ -19,9 +19,12 @@ and should not be used directly.
 <Preview>
   <Story name="Form Label">{{
     template: hbs`
-      <Rose::Form::Label @for="my-field-id">
+      <Rose::Form::Label @for="my-field-id" @error={{this.error}}>
         Form Label
       </Rose::Form::Label>
-    `
+    `,
+    context: {
+      error: boolean('error', false)
+    },
   }}</Story>
 </Preview>
diff --git a/addons/rose/addon/styles/rose/components/form/_helper-text.scss b/addons/rose/addon/styles/rose/components/form/_helper-text.scss
index d31446681..cca0ccda0 100644
--- a/addons/rose/addon/styles/rose/components/form/_helper-text.scss
+++ b/addons/rose/addon/styles/rose/components/form/_helper-text.scss
@@ -6,4 +6,8 @@
   display: block;
   color: var(--ui-gray);
   margin-bottom: sizing.rems(xxs);
+
+  &.error {
+    color: var(--failure);
+  }
 }
diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss
index 45329943f..e5be517eb 100644
--- a/addons/rose/addon/styles/rose/components/form/_input.scss
+++ b/addons/rose/addon/styles/rose/components/form/_input.scss
@@ -3,19 +3,6 @@
 
 .rose-form-input {
   margin-bottom: sizing.rems(m);
-
-  &.error {
-    color: var(--failure);
-
-    .rose-form-helper-text {
-      color: currentColor;
-    }
-
-    .rose-form-input-field {
-      color: currentColor;
-      border-color: currentColor;
-    }
-  }
 }
 
 .rose-form-input-field {
@@ -31,6 +18,11 @@
   box-shadow: inset 0px 3px 1px
     rgba(var(--stark-components), var(--opacity-4));
 
+  &.error {
+    color: var(--failure);
+    border-color: currentColor;
+  }
+
   &:not(:disabled):not([readonly]) {
     &:hover {
       border-color: var(--ui-gray);
diff --git a/addons/rose/addon/styles/rose/components/form/_label.scss b/addons/rose/addon/styles/rose/components/form/_label.scss
index e3ffdc68e..d473e43cc 100644
--- a/addons/rose/addon/styles/rose/components/form/_label.scss
+++ b/addons/rose/addon/styles/rose/components/form/_label.scss
@@ -5,4 +5,8 @@
   @include type.type(s, semibold);
   display: block;
   margin-bottom: sizing.rems(xxs);
+
+  &.error {
+    color: var(--failure);
+  }
 }
diff --git a/addons/rose/addon/styles/rose/components/form/_select.scss b/addons/rose/addon/styles/rose/components/form/_select.scss
index be867c493..d5d4a499a 100644
--- a/addons/rose/addon/styles/rose/components/form/_select.scss
+++ b/addons/rose/addon/styles/rose/components/form/_select.scss
@@ -3,19 +3,6 @@
 
 .rose-form-select {
   margin-bottom: sizing.rems(m);
-
-  &.error {
-    color: var(--failure);
-
-    .rose-form-helper-text {
-      color: currentColor;
-    }
-
-    .rose-form-select-field {
-      color: currentColor;
-      border-color: currentColor;
-    }
-  }
 }
 
 .rose-form-select-field {
@@ -37,6 +24,11 @@
     no-repeat right sizing.rems(xs) center;
   background-size: sizing.rems(l);
 
+  &.error {
+    color: var(--failure);
+    border-color: currentColor;
+  }
+
   &:not(:disabled) {
     &:hover {
       border-color: var(--ui-gray-subtler-1);
diff --git a/addons/rose/addon/templates/components/rose/form/helper-text.hbs b/addons/rose/addon/templates/components/rose/form/helper-text.hbs
index 1320ad168..6e075ea98 100644
--- a/addons/rose/addon/templates/components/rose/form/helper-text.hbs
+++ b/addons/rose/addon/templates/components/rose/form/helper-text.hbs
@@ -1,5 +1,5 @@
 <span
-  class="rose-form-helper-text"
+  class="rose-form-helper-text{{if @error " error"}}"
   id={{@id}}
   ...attributes
 >
diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/templates/components/rose/form/input.hbs
index aca21cd3f..d232bf07b 100644
--- a/addons/rose/addon/templates/components/rose/form/input.hbs
+++ b/addons/rose/addon/templates/components/rose/form/input.hbs
@@ -1,30 +1,29 @@
-<div class="rose-form-input{{if @error " error"}}">
+<div class="rose-form-input">
 
-  <Rose::Form::Label @for={{this.id}}>{{@label}}</Rose::Form::Label>
+  <Rose::Form::Label @for={{this.id}} @error={{@error}}>
+    {{@label}}
+  </Rose::Form::Label>
 
   {{#if @helperText}}
-    <Rose::Form::HelperText @id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
       {{@helperText}}
     </Rose::Form::HelperText>
   {{/if}}
 
-  {{!--
-    - refactor errors styles so that error classes appear on individual atoms
-      instead of on the parent wrapper (since the wrapper won't exist in cases
-      where the atoms are yielded, such as for use within a list
-      or other custom use cases)
-  --}}
   <Rose::Form::Input::Input
     ...attributes
+    class="{{if @error "error"}}"
     @id={{this.id}}
-    @disabled={{@disabled}}
     @name={{@name}}
-    @type={{@type}}
     @value={{@value}}
+    @type={{@type}}
+    @disabled={{@disabled}}
     @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
 
   {{yield (hash
-    errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
+    errors=(component 'rose/form/errors'
+      id=(concat 'errors-' this.id)
+    )
   )}}
 
 </div>
diff --git a/addons/rose/addon/templates/components/rose/form/label.hbs b/addons/rose/addon/templates/components/rose/form/label.hbs
index 0e4c55e93..006f57301 100644
--- a/addons/rose/addon/templates/components/rose/form/label.hbs
+++ b/addons/rose/addon/templates/components/rose/form/label.hbs
@@ -1,3 +1,7 @@
-<label class="rose-form-label" for={{@for}} ...attributes>
+<label
+  class="rose-form-label{{if @error " error"}}"
+  for={{@for}}
+  ...attributes
+>
   {{yield}}
 </label>
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/templates/components/rose/form/select.hbs
index 4d04a5753..de2cf00bf 100644
--- a/addons/rose/addon/templates/components/rose/form/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select.hbs
@@ -1,9 +1,11 @@
-<div class="rose-form-select{{if @error " error"}}">
+<div class="rose-form-select">
 
-  <Rose::Form::Label @for={{this.id}}>{{@label}}</Rose::Form::Label>
+  <Rose::Form::Label @for={{this.id}} @error={{@error}}>
+    {{@label}}
+  </Rose::Form::Label>
 
   {{#if @helperText}}
-    <Rose::Form::HelperText @id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
       {{@helperText}}
     </Rose::Form::HelperText>
   {{/if}}
@@ -17,6 +19,7 @@
       onChange=@onChange
       helperText=@helperText
       error=@error
+      aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
     )
     errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
   )}}
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 3d780deaa..f820e1c1b 100644
--- a/addons/rose/addon/templates/components/rose/form/select/select.hbs
+++ b/addons/rose/addon/templates/components/rose/form/select/select.hbs
@@ -1,11 +1,12 @@
 <XSelect
-  class="rose-form-select-field"
+  ...attributes
+  class="rose-form-select-field{{if @error " error"}}"
   id={{@id}}
   name={{@name}}
   disabled={{@disabled}}
   @value={{@value}}
   @onChange={{@onChange}}
-  aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}"
+  aria-describedby={{@aria-describedby}}
   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 83a58643b..7ab08489e 100644
--- a/addons/rose/addon/templates/components/rose/form/textarea.hbs
+++ b/addons/rose/addon/templates/components/rose/form/textarea.hbs
@@ -1,20 +1,22 @@
-<div class="rose-form-input{{if @error " error"}}">
+<div class="rose-form-input">
 
-  <Rose::Form::Label @for={{this.id}}>{{@label}}</Rose::Form::Label>
+  <Rose::Form::Label @for={{this.id}} @error={{@error}}>
+    {{@label}}
+  </Rose::Form::Label>
 
   {{#if @helperText}}
-    <Rose::Form::HelperText @id="helper-text-{{this.id}}">
+    <Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
       {{@helperText}}
     </Rose::Form::HelperText>
   {{/if}}
 
   <Rose::Form::Textarea::Textarea
     ...attributes
-    class="rose-form-input-field"
+    class="{{if @error "error"}}"
     @id={{this.id}}
     @name={{@name}}
-    @disabled={{@disabled}}
     @value={{@value}}
+    @disabled={{@disabled}}
     @aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
 
   {{yield (hash