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

Merge pull request #219 from Safelite/CSR-262-validation-styling-updates

Browse source 
CSR-262 validation styling updates.
This commit is contained in:
bmauger 2022-02-16 09:05:25 -05:00 committed by GitHub
commit b72e9b8a58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -37,7 +37,7 @@
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div class="row px-3 my-6 form-test-error" v-if="!suppressError"> <div class="row mt-2 form-test-error" v-if="!suppressError">
<error-message :name="groupName"></error-message> <error-message :name="groupName"></error-message>
</div> </div>
</div> </div>

1
src/layouts/component-test/component-test.vue
View file

@ -18,7 +18,6 @@
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">Radio Button</h4> <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
<p class="m-0">Sample radio button group</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">

3
src/layouts/form-test/form-test.vue
View file

@ -8,7 +8,7 @@
@invalid-submit="onInvalidSubmit" @invalid-submit="onInvalidSubmit"
ref="theForm" ref="theForm"
v-slot="{ values, meta, errors }" v-slot="{ values, meta, errors }"
> >
<damageLocationQuestion <damageLocationQuestion
ref="damageLocation" ref="damageLocation"
v-model="selectedDamageLocations" v-model="selectedDamageLocations"
@ -20,6 +20,7 @@
:suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')" :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
/> />
<alert <alert
class="my-3"
v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')" v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
alertClass="alert-danger" alertClass="alert-danger"
alertHeadline="You'll need to schedule separate appointments" alertHeadline="You'll need to schedule separate appointments"

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

@ -1,18 +1,22 @@
.has-error { .has-error {
&.list-button, &.list-button,
&.list-card, &.list-card {
&.list-button-horizontal {
border: 1px solid transparent; border: 1px solid transparent;
box-shadow: 0 0 0 1px $red;
color: $red; color: $red;
label { label {
box-shadow: 0 0 0 2.5px $red; border: 1px solid $red;
border-radius: .5rem; border-radius: .5rem;
} }
} }
input[type=checkbox]:focus + label, input[type=checkbox]:focus + label,
input[type=radio]:checked + label { input[type=radio]:checked + label {
box-shadow: 0 0 0 2.5px transparent; box-shadow: 0 0 0 2.5px transparent !important;
}
&.list-button-horizontal {
color: $red;
label {
border: 1px solid $red;
}
} }
} }

2
src/ux-components/button-main/button-main.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<button <button
:aria-disabled="isDisabled" :aria-disabled="isDisabled"
class="btn d-flex align-items-center py-3 px-2 delay" class="btn d-flex align-items-center py-3 px-4 delay"
:class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
@click="clicked()" @click="clicked()"
> >