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

Merge pull request #199 from Safelite/CSR-338-QA-updates

Browse source 
CSR-338 fix text color and add opacity: 0 to input.
This commit is contained in:
bmauger 2022-02-07 09:53:29 -05:00 committed by GitHub
commit 8667ee18a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -1,34 +1,34 @@
<template> <template>
<div <div
class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
@mouseup="handleClick(value)" @mouseup="handleClick(value)"
@keyup.space="handleClick(value)" @keyup.space="handleClick(value)"
> >
<input <input
:type="isMultiSelect ? 'checkbox' : 'radio'" :type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID" :id="buttonID"
:name="groupName" :name="groupName"
:value="buttonID" :value="buttonID"
:aria-required="isRequired" :aria-required="isRequired"
:data-focus-target="groupName" :data-focus-target="groupName"
v-model="checkValue" v-model="checkValue"
@change="handleCheckChange" @change="handleCheckChange"
/> />
<label <label
tabindex="-1" tabindex="-1"
:for="buttonID" :for="buttonID"
:aria-labelledby="buttonID" :aria-labelledby="buttonID"
class="d-flex flex-column justify-content-center py-3 px-4" class="d-flex flex-column justify-content-center py-3 px-4"
> >
<span <span
class="m-0" class="m-0"
:class="textPosition" :class="textPosition"
> >
{{buttonLabel}} {{buttonLabel}}
</span> </span>
<span <span
v-if="buttonLabelSubCopy" v-if="buttonLabelSubCopy"
class="m-0 small" class="m-0 small"
:class="textPosition" :class="textPosition"
> >
{{buttonLabelSubCopy}} {{buttonLabelSubCopy}}
@ -36,10 +36,10 @@
<span v-if="screenReaderOnlyText" class="sr-only"> <span v-if="screenReaderOnlyText" class="sr-only">
{{screenReaderOnlyText}} {{screenReaderOnlyText}}
</span> </span>
<loader <loader
v-if="isLoaderDisplayed && !isMultiSelect" v-if="isLoaderDisplayed && !isMultiSelect"
:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
:class="[loaderColor, loaderPosition]" :class="[loaderColor, loaderPosition]"
/> />
</label> </label>
</div> </div>
@ -151,6 +151,7 @@ export default {
border: 1px solid $gray-500; border: 1px solid $gray-500;
border-radius: 0; border-radius: 0;
width: 100%; width: 100%;
color: $gray-600;
&:hover { &:hover {
box-shadow: 0 0 0 4px $blue-100; box-shadow: 0 0 0 4px $blue-100;
cursor: pointer; cursor: pointer;

45
src/ux-components/list-button/list-button.vue
View file

@ -1,40 +1,40 @@
<template> <template>
<div <div
class="list-group list-button d-flex flex-column w-100 mb-2" class="list-group list-button d-flex flex-column w-100 mb-2"
@mouseup="handleClick(value)" @mouseup="handleClick(value)"
@keyup.space="handleClick(value)" @keyup.space="handleClick(value)"
> >
<input <input
:type="isMultiSelect ? 'checkbox' : 'radio'" :type="isMultiSelect ? 'checkbox' : 'radio'"
:id="buttonID" :id="buttonID"
:name="groupName" :name="groupName"
:value="buttonID" :value="buttonID"
:aria-required="isRequired" :aria-required="isRequired"
:data-focus-target="groupName" :data-focus-target="groupName"
v-model="checkValue" v-model="checkValue"
@change="handleCheckChange" @change="handleCheckChange"
> >
<label <label
tabindex="-1" tabindex="-1"
:for="buttonID" :for="buttonID"
:aria-labelledby="buttonID" :aria-labelledby="buttonID"
class="d-flex flex-column justify-content-center py-3 px-4" class="d-flex flex-column justify-content-center py-3 px-4"
> >
<span <span
class="m-0" class="m-0"
:class="textPosition" :class="textPosition"
> >
{{ buttonLabel }} {{ buttonLabel }}
</span> </span>
<span <span
v-if="buttonLabelSubCopy" v-if="buttonLabelSubCopy"
class="m-0 small" class="m-0 small"
:class="textPosition" :class="textPosition"
> >
{{ buttonLabelSubCopy }} {{ buttonLabelSubCopy }}
</span> </span>
<span <span
v-if="screenReaderOnlyText" v-if="screenReaderOnlyText"
class="sr-only" class="sr-only"
> >
{{ screenReaderOnlyText }} {{ screenReaderOnlyText }}
@ -67,7 +67,7 @@ export default {
loaderColor: String, loaderColor: String,
loaderPosition: String, loaderPosition: String,
sizeInRem: [Number,String], sizeInRem: [Number,String],
value: { value: {
// Field initial value // Field initial value
type: [String, Number], type: [String, Number],
default: "", default: "",
@ -132,6 +132,7 @@ export default {
input[type="checkbox"] { input[type="checkbox"] {
position: static; //override bootstrap position: static; //override bootstrap
height: 0; height: 0;
opacity: 0;
} }
&:focus-visible + label { &:focus-visible + label {
box-shadow: 0 0 0 2.5px $blue inset; box-shadow: 0 0 0 2.5px $blue inset;

2
src/ux-components/list-card/list-card.vue
View file

@ -173,6 +173,7 @@ export default {
border-radius: 2px; border-radius: 2px;
order: 2; order: 2;
flex-shrink: 0; flex-shrink: 0;
color: $gray-600;
} }
+ label.checkboxTop::before { + label.checkboxTop::before {
margin: -1.25rem 0.5rem 0 0 !important; margin: -1.25rem 0.5rem 0 0 !important;
@ -229,6 +230,7 @@ export default {
} }
+ label { + label {
min-height: 48px; min-height: 48px;
color: $gray-600;
img { img {
margin-bottom: 0; margin-bottom: 0;
} }