From 8e45c1c99bfa8561f2a069816ad4d0d137b2ae39 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 26 Jan 2022 15:35:21 -0500
Subject: [PATCH] CSR-266 add has-error css styling for validation.

---
 src/App.vue                         |  1 +
 src/layouts/form-test/form-test.vue | 11 +++++------
 src/styles/error-styles.scss        | 10 ++++++++++
 3 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 src/styles/error-styles.scss

diff --git a/src/App.vue b/src/App.vue
index e6380a315..f64aad6aa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,4 +7,5 @@
   @import "@/styles/common-styles.scss";
   @import "@/styles/common-list-styles.scss";
   @import "@/styles/common-typography-styles.scss";
+  @import "@/styles/error-styles.scss";
 </style>
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 2df7ee70f..33a7e6a70 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -9,10 +9,11 @@
   <div class="row g-2 mt-6 mx-4">
     <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
     <p class="mx-2">NOTE: This page is testing functionality only; styling will not match Figma mocks.</p>
-  </div> 
+  </div>
 
   <div class="row g-2 mt-6 mx-4">
     <h4 class="mx-2 mt-4 mb-0">How many chips are we repairing? (Required)</h4>
+    <fieldset>
     <div
       role="radiogroup"
       aria-labelledby="demo-group"
@@ -61,6 +62,7 @@
         screenReaderOnlyText=" opens new window"
       />
     </div>
+  </fieldset>
     <div class="row px-3 form-test-error">
       <error-message name="demo"></error-message>
     </div>
@@ -292,7 +294,7 @@ export default {
         // passwordConfirmation: Yup.string()
         //  .required()
         //  .oneOf([Yup.ref("password")], "Passwords do not match"),
-      }).test('repair-replace-conflict', 
+      }).test('repair-replace-conflict',
         null, // need to pass null as error message so it won't get added to list of errors
         function(value) {
           // whole form test
@@ -352,7 +354,4 @@ export default {
   .form-test-invalid {
     opacity: 0.5;
   }
-  .has-error {
-    border: 1px solid red;
-  }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/styles/error-styles.scss b/src/styles/error-styles.scss
new file mode 100644
index 000000000..c2c6c3fea
--- /dev/null
+++ b/src/styles/error-styles.scss
@@ -0,0 +1,10 @@
+.has-error {
+  .list-button,
+  .list-card,
+  .list-button-horizontal {
+    color: $red;
+    label {
+      border: 1px solid $red;
+    }
+  }
+}