Fix error and success states

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>

Author: marcoambrosini

src/components/InputField/InputField.vue

@@ -38,6 +38,8 @@
 				:class="{
 					'input-field__input--trailing-icon': showTrailingButton || hasTrailingIcon,
 					'input-field__input--leading-icon': hasLeadingIcon,
+					'input-field__input--success': success,
+					'input-field__input--error': error,
 				}"
 				:value="value"
 				v-on="$listeners"
@@ -49,9 +51,10 @@
 				<slot />
 			</div>
 
-			<!-- Success icon -->
-			<div v-if="success" class="input-field__icon input-field__icon--trailing">
-				<Check :size="18" />
+			<!-- Success and error icons -->
+			<div v-if="success || error" class="input-field__icon input-field__icon--trailing">
+				<Check v-if="success" :size="18" />
+				<AlertCircle v-else-if="error" :size="18" />
 			</div>
 
 			<!-- trailing button -->
@@ -72,6 +75,7 @@
 <script>
 import Button from '../Button/index.js'
 import Check from 'vue-material-design-icons/Check'
+import AlertCircle from 'vue-material-design-icons/AlertCircleOutline'
 import GenRandomId from '../../utils/GenRandomId.js'
 
 export default {
@@ -80,6 +84,7 @@ export default {
 	components: {
 		Button,
 		Check,
+		AlertCircle,
 	},
 
 	props: {
@@ -193,18 +198,6 @@ export default {
 	},
 
 	watch: {
-		/**
-		 * Don't allow both trailing checkmark and clear button to be present
-		 * at the same time
-		 */
-		success() {
-			this.validateTrailingIcon()
-		},
-
-		canClear() {
-			this.validateTrailingIcon()
-		},
-
 		label() {
 			this.validateLabel()
 		},
@@ -223,12 +216,6 @@ export default {
 			this.$emit('trailing-button-click', event)
 		},
 
-		validateTrailingIcon() {
-			if (this.canClear && this.success) {
-				throw new Error('success and canClear props cannot be true at the same time')
-			}
-		},
-
 		validateLabel() {
 			if (this.label && !this.labelOutside) {
 				throw new Error('You need to add a label to the textField component. Either use the prop label or use an external one, as per the example in the documentation')
@@ -273,6 +260,14 @@ export default {
 			cursor: text;
 		}
 
+		&--success {
+			border-color: var(--color-success) !important; //Override hover border color
+		}
+
+		&--error {
+			border-color: var(--color-error) !important; //Override hover border color
+		}
+
 		&--leading-icon {
 			padding-left: 28px;
 		}

src/components/TextField/TextField.vue

@@ -31,28 +31,34 @@ and `minlength`.
 <template>
 	<div class="wrapper">
 		<TextField :value.sync="text1"
-			label="Type something here"
+			label="Leading icon and trailing button"
 			trailing-button-icon="close"
 			:show-trailing-button="text1 !== ''"
 			@trailing-button-click="clearText">
 			<Magnify :size="16" />
 		</TextField>
 		<TextField :value.sync="text2"
-			label="Type something here"
+			label="Success state"
 			:success="true"
 			@trailing-button-click="clearText">
 		</TextField>
 		<TextField :value.sync="text3"
-			label="Type something here"
+			label="Error state"
+			:error="true"
+			@trailing-button-click="clearText">
+		</TextField>
+		<TextField :value.sync="text4"
+			label="Internal label"
+			placeholder="That can be used together with placeholder"
 			:label-visible="true"
 			trailing-button-icon="close"
-			:show-trailing-button="text3 !== ''"
+			:show-trailing-button="text4 !== ''"
 			@trailing-button-click="clearText">
 			<Lock :size="16" />
 		</TextField>
 		<div class="external-label">
 			<label for="$refs.textField.id">External label</label>
-			<TextField :value.sync="text4"
+			<TextField :value.sync="text5"
 				ref="textField"
 				:label-outside= "true"
 				@trailing-button-click="clearText" />
@@ -71,6 +77,7 @@ export default {
 			text2: '',
 			text3: '',
 			text4: '',
+			text5: '',
 		}
 	},