Commit 6585e3d8 authored by Dennis Tang's avatar Dennis Tang

use bootstrap 4 utilities for error states

parent 5ef0e1c3
...@@ -89,14 +89,13 @@ export default { ...@@ -89,14 +89,13 @@ export default {
<div> <div>
<div <div
class="js-gcp-machine-type-dropdown dropdown" class="js-gcp-machine-type-dropdown dropdown"
:class="{ 'gl-show-field-errors': hasErrors }"
> >
<dropdown-hidden-input <dropdown-hidden-input
:name="fieldName" :name="fieldName"
:value="selectedMachineType" :value="selectedMachineType"
/> />
<dropdown-button <dropdown-button
:class="{ 'gl-field-error-outline': hasErrors }" :class="{ 'border-danger': hasErrors }"
:is-disabled="isDisabled" :is-disabled="isDisabled"
:is-loading="isLoading" :is-loading="isLoading"
:toggle-text="toggleText" :toggle-text="toggleText"
...@@ -132,8 +131,11 @@ export default { ...@@ -132,8 +131,11 @@ export default {
</div> </div>
</div> </div>
<span <span
class="form-text text-muted" class="form-text"
:class="{ 'gl-field-error': hasErrors }" :class="{
'text-danger': hasErrors,
'text-muted': !hasErrors
}"
v-if="hasErrors" v-if="hasErrors"
> >
{{ errorMessage }} {{ errorMessage }}
......
...@@ -147,7 +147,6 @@ export default { ...@@ -147,7 +147,6 @@ export default {
<div> <div>
<div <div
class="js-gcp-project-id-dropdown dropdown" class="js-gcp-project-id-dropdown dropdown"
:class="{ 'gl-show-field-errors': hasErrors }"
> >
<dropdown-hidden-input <dropdown-hidden-input
:name="fieldName" :name="fieldName"
...@@ -155,7 +154,7 @@ export default { ...@@ -155,7 +154,7 @@ export default {
/> />
<dropdown-button <dropdown-button
:class="{ :class="{
'gl-field-error-outline': hasErrors, 'border-danger': hasErrors,
'read-only': hasOneProject 'read-only': hasOneProject
}" }"
:is-disabled="isDisabled" :is-disabled="isDisabled"
...@@ -193,8 +192,11 @@ export default { ...@@ -193,8 +192,11 @@ export default {
</div> </div>
</div> </div>
<span <span
class="form-text text-muted" class="form-text"
:class="{ 'gl-field-error': hasErrors }" :class="{
'text-danger': hasErrors,
'text-muted': !hasErrors
}"
v-html="helpText" v-html="helpText"
></span> ></span>
</div> </div>
......
...@@ -63,14 +63,13 @@ export default { ...@@ -63,14 +63,13 @@ export default {
<div> <div>
<div <div
class="js-gcp-zone-dropdown dropdown" class="js-gcp-zone-dropdown dropdown"
:class="{ 'gl-show-field-errors': hasErrors }"
> >
<dropdown-hidden-input <dropdown-hidden-input
:name="fieldName" :name="fieldName"
:value="selectedZone" :value="selectedZone"
/> />
<dropdown-button <dropdown-button
:class="{ 'gl-field-error-outline': hasErrors }" :class="{ 'border-danger': hasErrors }"
:is-disabled="isDisabled" :is-disabled="isDisabled"
:is-loading="isLoading" :is-loading="isLoading"
:toggle-text="toggleText" :toggle-text="toggleText"
...@@ -106,8 +105,11 @@ export default { ...@@ -106,8 +105,11 @@ export default {
</div> </div>
</div> </div>
<span <span
class="form-text text-muted" class="form-text"
:class="{ 'gl-field-error': hasErrors }" :class="{
'text-danger': hasErrors,
'text-muted': !hasErrors
}"
v-if="hasErrors" v-if="hasErrors"
> >
{{ errorMessage }} {{ errorMessage }}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment