jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #361 from Safelite/BRM-misc-qa-validation-fixes

Browse source 
Updates to validation error styling when alert is displayed. Wrap .has-error in html selector for specificity
This commit is contained in:
bmauger 2022-04-21 12:52:35 -04:00 committed by GitHub
commit e0ca960411
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 104 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/common-components/button-question/button-question.vue
View file

@ -35,6 +35,7 @@
:selectedValues="selectedValues" :selectedValues="selectedValues"
data-test="button" data-test="button"
:validationRules="validationRules" :validationRules="validationRules"
:class="[suppressError ? 'alertError' : '']"
/> />
</div> </div>
</fieldset> </fieldset>

41
src/styles/common-error-styles.scss
View file

@ -1,3 +1,4 @@
html {
.has-error { .has-error {
&.list-button, &.list-button,
&.list-card { &.list-card {
@ -8,11 +9,11 @@
box-shadow: 0 0 0 2.5px $red; box-shadow: 0 0 0 2.5px $red;
} }
input[type=checkbox]:checked + label { input[type=checkbox]:checked + label {
box-shadow: 0 0 0 1px $red !important; box-shadow: 0 0 0 1px $red;
} }
&:hover { &:hover {
box-shadow: 0px 0px 0px 4px $red-200; box-shadow: 0px 0px 0px 4px $red-200;
border-radius: 10px !important; border-radius: 10px;
} }
} }
&.list-button-horizontal { &.list-button-horizontal {
@ -25,7 +26,7 @@
} }
input[type=checkbox]:focus + label, input[type=checkbox]:focus + label,
input[type=radio]:focus + label { input[type=radio]:focus + label {
box-shadow: 0 0 1px $red !important; box-shadow: 0 0 1px $red;
} }
} }
&.ui-radio, &.ui-radio,
@ -60,6 +61,34 @@
} }
} }
} }
//Restore to default style if alert box is present
.alertError {
.has-error {
&.list-button,
&.list-card {
border: 1px solid $gray-500;
input:not(:focus) {
+ label {
box-shadow: 0 0 0 1px $gray-500;
border-radius: .5rem;
}
}
input:focus {
border: 1px solid $gray-500;
+ label {
box-shadow: 0 0 0 2.5px transparent;
}
}
&:hover {
box-shadow: 0 0 0 4px $blue-300;
+ label {
box-shadow: 0 0 0 2.5px transparent;
border: 1px solid $blue;
}
}
}
}
}
.form-test-error { .form-test-error {
color: $red; color: $red;
@ -78,8 +107,8 @@
&.btn.btn-primary:focus, &.btn.btn-primary:focus,
&.btn.btn-primary:focus-visible { &.btn.btn-primary:focus-visible {
color: $gray !important; color: $gray !important;
background: $gray-200 !important; background: $gray-200;
box-shadow: none !important; box-shadow: none;
}
} }
} }