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"; 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 @@

FORM VALIDATION TEST

NOTE: This page is testing functionality only; styling will not match Figma mocks.

-
+

How many chips are we repairing? (Required)

+
+
@@ -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; - } - \ No newline at end of file + 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; + } + } +}