From 24a44c4321b34c9a75d5a98a474f33495cb5a5d1 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Thu, 17 Mar 2022 11:31:05 -0400 Subject: [PATCH 1/5] CSR-319: make validation rule names all kabob case --- .../windshield-options/windshield-options.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index edfe09dd3..ce940e5a1 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -26,7 +26,7 @@ isMultiSelect groupName="WindshieldReplaceOptions" v-model="selectedWindshieldReplaceOptionsValues" - validationRules="windshield-replace-options-required|preventSplitAndSingleTogether" + validationRules="windshield-replace-options-required|prevent-split-and-single-together" :suppressError="hasSplitSingleConflict" /> { +defineRule("check-for-repair-and-replace", (value, [otherFieldValue]) => { if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) && otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) && Array.isArray(otherFieldValue) && @@ -66,13 +66,13 @@ defineRule("checkForRepairAndReplace", (value, [otherFieldValue]) => { } return true; }); -defineRule("repairOnly", (value) => { +defineRule("repair-only", (value) => { if (value.toString().toUpperCase() === damageLocationsSelected.REPAIR.toUpperCase()) { return true; } return false; }); -defineRule("preventSplitAndSingleTogether", (value) => { +defineRule("prevent-split-and-single-together", (value) => { if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) && (value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) || value.toString().toUpperCase().includes(damageLocationsSelected.PASSENGER.toUpperCase()))) @@ -184,10 +184,10 @@ export default ({ }, windshieldDamageTypeQuestionValidationRules() { // Note: the validation rules string is not dynamic (it cannot be changed once component has been created) - let validationRules = "windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion"; + let validationRules = "windshield-damage-type-required|check-for-repair-and-replace:@DamageLocationQuestion"; // if vehicle has no windshield replacement option if (!this.isWindshieldReplaceAvailable) { - validationRules = validationRules.concat('|repairOnly'); + validationRules = validationRules.concat('|repair-only'); } return validationRules; } From 6a7fc87235b7dd7c50a5d0172588387fe38a166f Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Sat, 19 Mar 2022 10:23:01 -0400 Subject: [PATCH 2/5] CSR-262: fix button error outline styling --- src/styles/common-error-styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index 42c8e499c..494c97c48 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -1,7 +1,7 @@ .has-error { &.list-button, &.list-card { - border: 1px solid $gray-500; + border: 1px solid $red; color: $red; label { box-shadow: 0 0 1px $red; From de4461668090334ac5bbdddeb75b45fd7171b814 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Sat, 19 Mar 2022 10:29:55 -0400 Subject: [PATCH 3/5] CSR-262: fix missing focus outline on checked buttons --- src/ux-components/list-card/list-card.vue | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index d3a1fc712..a9755904e 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -209,17 +209,23 @@ export default { } } - &:focus + label { - box-shadow: 0 0 0 2.5px $blue; - border-radius: 0.5rem; - } - &:checked + label { background: $blue-100; box-shadow: 0 0 0 1px $blue; border-radius: 0.5rem; } + &:focus + label { + box-shadow: 0 0 0 2.5px $blue; + border-radius: 0.5rem; + } + + &:checked { + &:focus + label { + box-shadow: 0 0 0 2.5px $blue; + } + } + &:checked + label { p { color: $black; From ed1188ca5afc892e5b59b0418bbda63253b4b110 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Sat, 19 Mar 2022 10:51:10 -0400 Subject: [PATCH 4/5] CSR-262: add thickened border styling on has-error buttons that get focused --- src/styles/common-error-styles.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index 494c97c48..496055619 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -7,9 +7,12 @@ box-shadow: 0 0 1px $red; border-radius: .5rem; } + input[type=checkbox]:focus + label, + input[type=radio]:focus + label { + box-shadow: 0 0 0 2.5px $red; + } } - input[type=checkbox]:focus + label, - input[type=radio]:focus + label, + input[type=checkbox]:checked + label, input[type=radio]:checked + label { box-shadow: 0 0 0 2.5px transparent !important; From 47f6e7fe7c1c7f848f1d69660abb65e9058b96c4 Mon Sep 17 00:00:00 2001 From: bmauger Date: Mon, 21 Mar 2022 15:21:49 -0400 Subject: [PATCH 5/5] Update error styles. --- src/styles/common-error-styles.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index 496055619..d4dc8244a 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -22,6 +22,10 @@ label { border: 1px solid $red; } + input[type=checkbox]:focus + label, + input[type=radio]:focus + label { + box-shadow: 0 0 0 2.5px $red; + } } &.ui-radio, &.ui-checkbox {