From e8bd70e151181fceb6bfc4eead85f7ff834bcbb1 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Thu, 21 Jul 2022 14:16:11 +0200
Subject: [PATCH 01/21] Initialize TextField component

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/TextField/TextField.vue | 119 +++++++++++++++++++++++++
 src/components/TextField/index.js      |  25 ++++++
 src/components/index.js                |   1 +
 3 files changed, 145 insertions(+)
 create mode 100644 src/components/TextField/TextField.vue
 create mode 100644 src/components/TextField/index.js

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
new file mode 100644
index 0000000000..772b1fabe1
--- /dev/null
+++ b/src/components/TextField/TextField.vue
@@ -0,0 +1,119 @@
+<!--
+  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<docs>
+### Sescription
+
+General purpose text field component.
+
+```
+<template>
+	<TextField :value.sync="textField"
+</template>
+<script>
+
+export default {
+	data() {
+		return {
+			textField: '',
+		}
+	}
+}
+</script>
+```
+</docs>
+
+<template>
+	<div class="text-field">
+		<input class="text-input__input"
+			type="text"
+			:value="value"
+			@input="handleInput">
+		<Button type="tertiary-no-background" v-if="showClearButton" class="text-input__clear-button" />
+	</div>
+</template>
+
+<script>
+import Button from '../Button/index.js'
+
+export default {
+	name: 'TextField',
+
+	components: {
+		Button,
+	},
+
+	props: {
+		/**
+		 * The value of the input field
+		 */
+		value: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * The input placeholder
+		 */
+		placeholder: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * Controls whether to display the clear button or not. Since the
+		 * parent component will have to store the value of this text input,
+		 * once clear button is pressed, there's no change in the value of
+		 * the text input. Instead, a 'clear' event is sent to the parent
+		 * component.
+		 */
+		showClearButton: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	methods: {
+		handleInput(event) {
+			this.$emit('update:value', event.target.value)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.text-field {
+	position: relative;
+	width: 100%;
+	border-radius: var(--border-radius-large);
+	padding-left: 16px;
+
+	&__input {
+		width: 100%;
+	}
+
+	&__clear-button {
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
+}
+</style>
diff --git a/src/components/TextField/index.js b/src/components/TextField/index.js
new file mode 100644
index 0000000000..64c6c4e26c
--- /dev/null
+++ b/src/components/TextField/index.js
@@ -0,0 +1,25 @@
+/**
+ * @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @author Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import TextField from './TextField.vue'
+
+export default TextField
diff --git a/src/components/index.js b/src/components/index.js
index 1dd1c75a29..43dc65bdcf 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -71,3 +71,4 @@ export { default as RichContenteditable } from './RichContenteditable/index.js'
 export { default as SettingsSection } from './SettingsSection/index.js'
 export { default as UserBubble } from './UserBubble/index.js'
 export { default as Button } from './Button/index.js'
+export { default as TextField } from './TextField/index.js'

From 350f4b3c7263a18dec3c4a9383b816ab7269c5ab Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Thu, 21 Jul 2022 17:51:04 +0200
Subject: [PATCH 02/21] Style the input

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/TextField/TextField.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 772b1fabe1..77306f6bb1 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -100,14 +100,35 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 .text-field {
 	position: relative;
 	width: 100%;
 	border-radius: var(--border-radius-large);
 	padding-left: 16px;
+	display: flex;
+	align-items: center;
 
 	&__input {
+		margin: 0;
+		padding: 0 12px;
+		font-size: var(--default-font-size);
+		background-color: var(--color-main-background);
+		color: var(--color-main-text);
+		border: 2px solid var(--color-border-dark);
+		height: 36px !important;
+		border-radius: var(--border-radius-large);
+		cursor: pointer;
 		width: 100%;
+		-webkit-appearance: textfield !important;
+		-moz-appearance: textfield !important;
+
+		&:hover {
+			border-color: var(--color-primary-element);
+		}
+		&:focus {
+			cursor: text;
+		}
 	}
 
 	&__clear-button {

From 756ba37e8cf10f4f129630f4d3de00adc1c224c3 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Thu, 21 Jul 2022 18:14:19 +0200
Subject: [PATCH 03/21] Remove placeholder prop

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/TextField/TextField.vue | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 77306f6bb1..4d095494b8 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -43,7 +43,8 @@ export default {
 
 <template>
 	<div class="text-field">
-		<input class="text-input__input"
+		<input v-bind="$attrs"
+			ref="input"
 			type="text"
 			:value="value"
 			@input="handleInput">
@@ -70,14 +71,6 @@ export default {
 			required: true,
 		},
 
-		/**
-		 * The input placeholder
-		 */
-		placeholder: {
-			type: String,
-			required: true,
-		},
-
 		/**
 		 * Controls whether to display the clear button or not. Since the
 		 * parent component will have to store the value of this text input,

From 5028e02075f12f291433a95aa16c75858b85ccfc Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Thu, 21 Jul 2022 18:14:33 +0200
Subject: [PATCH 04/21] Add ability to clear text

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/TextField/TextField.vue | 53 +++++++++++++++++++++-----
 webpack.dev.js                         |  6 +--
 2 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 4d095494b8..8235d93bcc 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -26,14 +26,23 @@ General purpose text field component.
 
 ```
 <template>
-	<TextField :value.sync="textField"
+	<TextField :value.sync="text"
+		placeholder="Type something here"
+		:can-clear="true"
+		@clear="clearText" />
 </template>
 <script>
 
 export default {
 	data() {
 		return {
-			textField: '',
+			text: '',
+		}
+	},
+
+	methods: {
+		clearText() {
+			this.text = ''
 		}
 	}
 }
@@ -45,21 +54,32 @@ export default {
 	<div class="text-field">
 		<input v-bind="$attrs"
 			ref="input"
+			class="text-field__input"
 			type="text"
+			:class="{ 'text-field__input--can-clear': canClear }"
 			:value="value"
+			v-on="$listeners"
 			@input="handleInput">
-		<Button type="tertiary-no-background" v-if="showClearButton" class="text-input__clear-button" />
+		<Button v-if="canClear"
+			type="tertiary-no-background"
+			class="text-field__clear-button"
+			@click="clearText">
+			<Close slot="icon"
+				:size="20" />
+		</Button>
 	</div>
 </template>
 
 <script>
 import Button from '../Button/index.js'
+import Close from 'vue-material-design-icons/Close'
 
 export default {
 	name: 'TextField',
 
 	components: {
 		Button,
+		Close,
 	},
 
 	props: {
@@ -78,9 +98,9 @@ export default {
 		 * the text input. Instead, a 'clear' event is sent to the parent
 		 * component.
 		 */
-		showClearButton: {
+		canClear: {
 			type: Boolean,
-			default: true,
+			default: false,
 		},
 	},
 
@@ -88,6 +108,11 @@ export default {
 		handleInput(event) {
 			this.$emit('update:value', event.target.value)
 		},
+
+		clearText(event) {
+			this.$emit('clear', event)
+			this.$refs.input.focus()
+		},
 	},
 }
 </script>
@@ -99,8 +124,6 @@ export default {
 	width: 100%;
 	border-radius: var(--border-radius-large);
 	padding-left: 16px;
-	display: flex;
-	align-items: center;
 
 	&__input {
 		margin: 0;
@@ -122,12 +145,24 @@ export default {
 		&:focus {
 			cursor: text;
 		}
+
+		&--can-clear {
+			padding-right: 36px;
+		}
 	}
 
 	&__clear-button {
 		position: absolute;
-		top: 0;
-		right: 0;
+		top: 2px;
+		right: 1px;
 	}
 }
+
+::v-deep .button-vue {
+	min-width: unset;
+	min-height: unset;
+	height: 32px;
+	width: 32px !important;
+	border-radius: var(--border-radius-large);
+}
 </style>
diff --git a/webpack.dev.js b/webpack.dev.js
index 6d758c94f3..42c4c9b782 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -1,12 +1,12 @@
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
+const { merge } = require('webpack-merge')
+const common = require('./webpack.common.js')
 
 module.exports = merge(common, {
 	mode: 'development',
 	devServer: {
 		historyApiFallback: true,
 		noInfo: true,
-		overlay: true
+		overlay: true,
 	},
 	devtool: 'source-map',
 })

From 986885271cdf70bf68b10a5c20ea9eb702b1563e Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Thu, 21 Jul 2022 18:18:02 +0200
Subject: [PATCH 05/21] Fix typo

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/TextField/TextField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 8235d93bcc..d63f1a26a3 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -20,7 +20,7 @@
 -->
 
 <docs>
-### Sescription
+### Description
 
 General purpose text field component.
 

From 9dfd4f33e5c238f191c55160a25293635341a969 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@icloud.com>
Date: Wed, 27 Jul 2022 09:42:22 +0200
Subject: [PATCH 06/21] Allow to add a leading icon to the text field

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 65 +++++++++++++++++++++++++-
 1 file changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index d63f1a26a3..3179ba316d 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -29,9 +29,12 @@ General purpose text field component.
 	<TextField :value.sync="text"
 		placeholder="Type something here"
 		:can-clear="true"
-		@clear="clearText" />
+		@clear="clearText">
+		<Magnify :size="16 " />
+	</TextField>
 </template>
 <script>
+import Magnify from 'vue-material-design-icons/Magnify'
 
 export default {
 	data() {
@@ -40,6 +43,10 @@ export default {
 		}
 	},
 
+	components: {
+		Magnify,
+	},
+
 	methods: {
 		clearText() {
 			this.text = ''
@@ -56,10 +63,21 @@ export default {
 			ref="input"
 			class="text-field__input"
 			type="text"
-			:class="{ 'text-field__input--can-clear': canClear }"
+			:class="{
+				'text-field__input--can-clear': canClear,
+				'text-field__input--leading-icon': hasLeadingIcon,
+			}"
 			:value="value"
 			v-on="$listeners"
 			@input="handleInput">
+
+		<!-- Leading icon -->
+		<div class="text-field__leading-icon">
+			<!-- Leading material design icon in the text field, set the size to 18 -->
+			<slot />
+		</div>
+
+		<!-- clear text button -->
 		<Button v-if="canClear"
 			type="tertiary-no-background"
 			class="text-field__clear-button"
@@ -104,6 +122,26 @@ export default {
 		},
 	},
 
+	computed: {
+		hasLeadingIcon() {
+			return this.$slots.default
+		},
+	},
+
+	watch: {
+		/**
+		 * Don't allow both trailing checkmark and clear button to be present
+		 * at the same time
+		 */
+		success() {
+			this.validateProps()
+		},
+
+		canClear() {
+			this.validateProps()
+		},
+	},
+
 	methods: {
 		handleInput(event) {
 			this.$emit('update:value', event.target.value)
@@ -113,8 +151,15 @@ export default {
 			this.$emit('clear', event)
 			this.$refs.input.focus()
 		},
+
+		validateProps() {
+			if (this.canClear && this.success) {
+				throw new Error('success and canClear props cannot be true at the same time')
+			}
+		},
 	},
 }
+
 </script>
 
 <style lang="scss" scoped>
@@ -149,6 +194,22 @@ export default {
 		&--can-clear {
 			padding-right: 36px;
 		}
+
+		&--leading-icon {
+			padding-left: 32px;
+		}
+	}
+
+	&__leading-icon {
+		position: absolute;
+		top: 2px;
+		left: 20px;
+		height: 32px;
+		width: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0.7;
 	}
 
 	&__clear-button {

From 8aeac82b1f14931eafa2ef1aabbbe43f6ea219ff Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@icloud.com>
Date: Wed, 27 Jul 2022 10:21:41 +0200
Subject: [PATCH 07/21] Add success state

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 56 +++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 11 deletions(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 3179ba316d..9c1ecc6da0 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -26,12 +26,19 @@ General purpose text field component.
 
 ```
 <template>
-	<TextField :value.sync="text"
-		placeholder="Type something here"
-		:can-clear="true"
-		@clear="clearText">
-		<Magnify :size="16 " />
-	</TextField>
+	<div class="wrapper">
+		<TextField :value.sync="text"
+			placeholder="Type something here"
+			:can-clear="true"
+			@clear="clearText">
+			<Magnify :size="16 " />
+		</TextField>
+		<TextField :value.sync="text"
+			placeholder="Type something here"
+			:success="true"
+			@clear="clearText">
+		</TextField>
+	</div>
 </template>
 <script>
 import Magnify from 'vue-material-design-icons/Magnify'
@@ -54,6 +61,12 @@ export default {
 	}
 }
 </script>
+<style lang="scss" scoped>
+.wrapper {
+	display: flex;
+	gap: 4px;
+}
+</style>
 ```
 </docs>
 
@@ -72,11 +85,14 @@ export default {
 			@input="handleInput">
 
 		<!-- Leading icon -->
-		<div class="text-field__leading-icon">
+		<div class="text-field__icon text-field__icon--leading">
 			<!-- Leading material design icon in the text field, set the size to 18 -->
 			<slot />
 		</div>
-
+		<!-- Success icon -->
+		<div v-if="success" class="text-field__icon text-field__icon--trailing">
+			<Check :size="18" />
+		</div>
 		<!-- clear text button -->
 		<Button v-if="canClear"
 			type="tertiary-no-background"
@@ -91,6 +107,7 @@ export default {
 <script>
 import Button from '../Button/index.js'
 import Close from 'vue-material-design-icons/Close'
+import Check from 'vue-material-design-icons/Check'
 
 export default {
 	name: 'TextField',
@@ -98,6 +115,7 @@ export default {
 	components: {
 		Button,
 		Close,
+		Check,
 	},
 
 	props: {
@@ -120,6 +138,15 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Toggles the success state of the component. Adds a checkmark icon.
+		 * this cannot be used together with canClear.
+		 */
+		success: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
@@ -200,16 +227,23 @@ export default {
 		}
 	}
 
-	&__leading-icon {
+	&__icon {
 		position: absolute;
-		top: 2px;
-		left: 20px;
 		height: 32px;
 		width: 32px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		opacity: 0.7;
+		&--leading {
+			top: 2px;
+			left: 20px;
+		}
+
+		&--trailing {
+			top: 2px;
+			right: 2px;
+		}
 	}
 
 	&__clear-button {

From 1c2dadb6b4ee86d9fbb723228f5ee062f32a1349 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@icloud.com>
Date: Wed, 27 Jul 2022 11:01:10 +0200
Subject: [PATCH 08/21] Add input label

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 46 ++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 9c1ecc6da0..dfe15a52ed 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -28,13 +28,13 @@ General purpose text field component.
 <template>
 	<div class="wrapper">
 		<TextField :value.sync="text"
-			placeholder="Type something here"
+			label="Type something here"
 			:can-clear="true"
 			@clear="clearText">
 			<Magnify :size="16 " />
 		</TextField>
 		<TextField :value.sync="text"
-			placeholder="Type something here"
+			label="Type something here"
 			:success="true"
 			@clear="clearText">
 		</TextField>
@@ -74,8 +74,10 @@ export default {
 	<div class="text-field">
 		<input v-bind="$attrs"
 			ref="input"
+			:name="inputName"
 			class="text-field__input"
 			type="text"
+			:placeholder="hasPlaceholder ? placeholder : label"
 			:class="{
 				'text-field__input--can-clear': canClear,
 				'text-field__input--leading-icon': hasLeadingIcon,
@@ -83,7 +85,7 @@ export default {
 			:value="value"
 			v-on="$listeners"
 			@input="handleInput">
-
+		<label class="hidden-visually" :for="inputName">{{ label }}</label>
 		<!-- Leading icon -->
 		<div class="text-field__icon text-field__icon--leading">
 			<!-- Leading material design icon in the text field, set the size to 18 -->
@@ -108,6 +110,7 @@ export default {
 import Button from '../Button/index.js'
 import Close from 'vue-material-design-icons/Close'
 import Check from 'vue-material-design-icons/Check'
+import GenRandomId from '../../utils/GenRandomId.js'
 
 export default {
 	name: 'TextField',
@@ -127,6 +130,26 @@ export default {
 			required: true,
 		},
 
+		/**
+		 * The hidden input label for accessibility purposes. This will also
+		 * be used as a placeholder unless the placeholder prop is populated
+		 * with a different string.
+		 */
+		label: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * The placeholder of the input. This defaults as the string that's
+		 * passed into the label prop. In order to remove the placeholder,
+		 * pass in an empty string.
+		 */
+		placeholder: {
+			type: String,
+			default: undefined,
+		},
+
 		/**
 		 * Controls whether to display the clear button or not. Since the
 		 * parent component will have to store the value of this text input,
@@ -150,9 +173,17 @@ export default {
 	},
 
 	computed: {
+		inputName() {
+			return 'input' + GenRandomId()
+		},
+
 		hasLeadingIcon() {
 			return this.$slots.default
 		},
+
+		hasPlaceholder() {
+			return this.placeholder !== '' && this.placeholder !== undefined
+		},
 	},
 
 	watch: {
@@ -260,4 +291,13 @@ export default {
 	width: 32px !important;
 	border-radius: var(--border-radius-large);
 }
+
+.hidden-visually {
+	position: absolute;
+	left: -10000px;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
 </style>

From bfdb6c74210a0a5864657961ca554ea1edf684b9 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@icloud.com>
Date: Wed, 27 Jul 2022 11:35:16 +0200
Subject: [PATCH 09/21] Update docs

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index dfe15a52ed..479a309a15 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -27,13 +27,13 @@ General purpose text field component.
 ```
 <template>
 	<div class="wrapper">
-		<TextField :value.sync="text"
+		<TextField :value.sync="text1"
 			label="Type something here"
-			:can-clear="true"
+			:can-clear="text1 !== ''"
 			@clear="clearText">
 			<Magnify :size="16 " />
 		</TextField>
-		<TextField :value.sync="text"
+		<TextField :value.sync="text2"
 			label="Type something here"
 			:success="true"
 			@clear="clearText">
@@ -46,7 +46,8 @@ import Magnify from 'vue-material-design-icons/Magnify'
 export default {
 	data() {
 		return {
-			text: '',
+			text1: '',
+			text2: '',
 		}
 	},
 
@@ -56,7 +57,7 @@ export default {
 
 	methods: {
 		clearText() {
-			this.text = ''
+			this.text1 = ''
 		}
 	}
 }
@@ -78,6 +79,7 @@ export default {
 			class="text-field__input"
 			type="text"
 			:placeholder="hasPlaceholder ? placeholder : label"
+			aria-live="polite"
 			:class="{
 				'text-field__input--can-clear': canClear,
 				'text-field__input--leading-icon': hasLeadingIcon,

From 54f0da966615202ebb999ece41abaac8ec243822 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@icloud.com>
Date: Wed, 27 Jul 2022 16:15:19 +0200
Subject: [PATCH 10/21] Add support for visible label and fix layout

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 147 +++++++++++++++++--------
 1 file changed, 102 insertions(+), 45 deletions(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 479a309a15..3f825f7200 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -23,6 +23,9 @@
 ### Description
 
 General purpose text field component.
+Note: the inner html `input` element inherits all the attributes from the
+textField component so you can add things like `autocomplete`, `maxlength`
+and `minlength`.
 
 ```
 <template>
@@ -38,21 +41,30 @@ General purpose text field component.
 			:success="true"
 			@clear="clearText">
 		</TextField>
+		<TextField :value.sync="text3"
+			label="Type something here"
+			:label-visible="true"
+			@clear="clearText">
+			<Lock :size="16 " />
+		</TextField>
 	</div>
 </template>
 <script>
 import Magnify from 'vue-material-design-icons/Magnify'
+import Lock from 'vue-material-design-icons/Lock'
 
 export default {
 	data() {
 		return {
 			text1: '',
 			text2: '',
+			text3: '',
 		}
 	},
 
 	components: {
 		Magnify,
+		Lock,
 	},
 
 	methods: {
@@ -66,6 +78,7 @@ export default {
 .wrapper {
 	display: flex;
 	gap: 4px;
+	align-items: flex-end;
 }
 </style>
 ```
@@ -73,38 +86,45 @@ export default {
 
 <template>
 	<div class="text-field">
-		<input v-bind="$attrs"
-			ref="input"
-			:name="inputName"
-			class="text-field__input"
-			type="text"
-			:placeholder="hasPlaceholder ? placeholder : label"
-			aria-live="polite"
-			:class="{
-				'text-field__input--can-clear': canClear,
-				'text-field__input--leading-icon': hasLeadingIcon,
-			}"
-			:value="value"
-			v-on="$listeners"
-			@input="handleInput">
-		<label class="hidden-visually" :for="inputName">{{ label }}</label>
-		<!-- Leading icon -->
-		<div class="text-field__icon text-field__icon--leading">
-			<!-- Leading material design icon in the text field, set the size to 18 -->
-			<slot />
+		<label class="text-field__label"
+			:class="{ 'text-field__label--hidden': !labelVisible }"
+			:for="inputName">
+			{{ label }}
+		</label>
+		<div class="text-field__main-wrapper">
+			<input v-bind="$attrs"
+				ref="input"
+				:name="inputName"
+				class="text-field__input"
+				type="text"
+				:placeholder="computedPlaceholder"
+				aria-live="polite"
+				:class="{
+					'text-field__input--can-clear': canClear,
+					'text-field__input--leading-icon': hasLeadingIcon,
+					'text-field__input--trailing-icon': hasTrailingIcon,
+				}"
+				:value="value"
+				v-on="$listeners"
+				@input="handleInput">
+			<!-- Leading icon -->
+			<div class="text-field__icon text-field__icon--leading">
+				<!-- Leading material design icon in the text field, set the size to 18 -->
+				<slot />
+			</div>
+			<!-- Success icon -->
+			<div v-if="success" class="text-field__icon text-field__icon--trailing">
+				<Check :size="18" />
+			</div>
+			<!-- clear text button -->
+			<Button v-if="canClear"
+				type="tertiary-no-background"
+				class="text-field__clear-button"
+				@click="clearText">
+				<Close slot="icon"
+					:size="20" />
+			</Button>
 		</div>
-		<!-- Success icon -->
-		<div v-if="success" class="text-field__icon text-field__icon--trailing">
-			<Check :size="18" />
-		</div>
-		<!-- clear text button -->
-		<Button v-if="canClear"
-			type="tertiary-no-background"
-			class="text-field__clear-button"
-			@click="clearText">
-			<Close slot="icon"
-				:size="20" />
-		</Button>
 	</div>
 </template>
 
@@ -142,6 +162,16 @@ export default {
 			required: true,
 		},
 
+		/**
+		 * We normally have the lable hidden visually and use it for
+		 * accessibility only. If you want to have the label visible just above
+		 * the input field pass in true to this prop.
+		 */
+		labelVisible: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * The placeholder of the input. This defaults as the string that's
 		 * passed into the label prop. In order to remove the placeholder,
@@ -183,9 +213,21 @@ export default {
 			return this.$slots.default
 		},
 
+		hasTrailingIcon() {
+			return this.success
+		},
+
 		hasPlaceholder() {
 			return this.placeholder !== '' && this.placeholder !== undefined
 		},
+
+		computedPlaceholder() {
+			if (this.labelVisible) {
+				return this.placeholder ? this.placeholder : ''
+			} else {
+				return this.hasPlaceholder ? this.placeholder : this.label
+			}
+		}
 	},
 
 	watch: {
@@ -230,6 +272,11 @@ export default {
 	border-radius: var(--border-radius-large);
 	padding-left: 16px;
 
+	&__main-wrapper {
+		height: 36px;
+		position: relative;
+	}
+
 	&__input {
 		margin: 0;
 		padding: 0 12px;
@@ -239,6 +286,7 @@ export default {
 		border: 2px solid var(--color-border-dark);
 		height: 36px !important;
 		border-radius: var(--border-radius-large);
+		text-overflow: ellipsis;
 		cursor: pointer;
 		width: 100%;
 		-webkit-appearance: textfield !important;
@@ -252,11 +300,29 @@ export default {
 		}
 
 		&--can-clear {
-			padding-right: 36px;
+			padding-right: 28px;
 		}
 
 		&--leading-icon {
-			padding-left: 32px;
+			padding-left: 28px;
+		}
+
+		&--trailing-icon {
+			padding-right: 28px;
+		}
+	}
+
+	&__label {
+		padding: 0px 4px 4px 12px;
+		display: block;
+
+		&--hidden {
+			position: absolute;
+			left: -10000px;
+			top: auto;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
 		}
 	}
 
@@ -269,12 +335,12 @@ export default {
 		justify-content: center;
 		opacity: 0.7;
 		&--leading {
-			top: 2px;
-			left: 20px;
+			bottom: 2px;
+			left: 2px;
 		}
 
 		&--trailing {
-			top: 2px;
+			bottom: 2px;
 			right: 2px;
 		}
 	}
@@ -293,13 +359,4 @@ export default {
 	width: 32px !important;
 	border-radius: var(--border-radius-large);
 }
-
-.hidden-visually {
-	position: absolute;
-	left: -10000px;
-	top: auto;
-	width: 1px;
-	height: 1px;
-	overflow: hidden;
-}
 </style>

From 56e9f8e9f33005e55b1f17da9facbe7c5476563c Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@icloud.com>
Date: Mon, 1 Aug 2022 15:14:45 +0200
Subject: [PATCH 11/21] Allow label outside

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 3f825f7200..c9a06f7dca 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -1,5 +1,5 @@
 <!--
-  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@pm.me>
+  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>
   -
   - @author Marco Ambrosini <marcoambrosini@pm.me>
   -
@@ -86,7 +86,8 @@ export default {
 
 <template>
 	<div class="text-field">
-		<label class="text-field__label"
+		<label v-if="!labelOutside"
+			class="text-field__label"
 			:class="{ 'text-field__label--hidden': !labelVisible }"
 			:for="inputName">
 			{{ label }}
@@ -162,6 +163,16 @@ export default {
 			required: true,
 		},
 
+		/**
+		 * Pass in true if you want to use an external label. This is useful
+		 * if you need a label that looks different from the one provided by
+		 * this component
+		 */
+		labelOutside: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * We normally have the lable hidden visually and use it for
 		 * accessibility only. If you want to have the label visible just above
@@ -227,7 +238,7 @@ export default {
 			} else {
 				return this.hasPlaceholder ? this.placeholder : this.label
 			}
-		}
+		},
 	},
 
 	watch: {

From 753630899987ec455f535af98c2b3fe90bd59ef0 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@icloud.com>
Date: Mon, 1 Aug 2022 17:20:45 +0200
Subject: [PATCH 12/21] Make it possible to use an external label

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 48 +++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index c9a06f7dca..4151f8d615 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -34,7 +34,7 @@ and `minlength`.
 			label="Type something here"
 			:can-clear="text1 !== ''"
 			@clear="clearText">
-			<Magnify :size="16 " />
+			<Magnify :size="16" />
 		</TextField>
 		<TextField :value.sync="text2"
 			label="Type something here"
@@ -45,8 +45,16 @@ and `minlength`.
 			label="Type something here"
 			:label-visible="true"
 			@clear="clearText">
-			<Lock :size="16 " />
+			<Lock :size="16" />
 		</TextField>
+		<div class="external-label">
+			<label for="$refs.textField.id">External label</label>
+			<TextField :value.sync="text4"
+				ref="textField"
+				:label-visible="true"
+				:labelOutside= "true"
+				@clear="clearText" />
+		</div>
 	</div>
 </template>
 <script>
@@ -59,6 +67,7 @@ export default {
 			text1: '',
 			text2: '',
 			text3: '',
+			text4: '',
 		}
 	},
 
@@ -79,6 +88,12 @@ export default {
 	display: flex;
 	gap: 4px;
 	align-items: flex-end;
+	flex-wrap: wrap;
+}
+
+.external-label {
+	display: flex;
+	width: 100%;
 }
 </style>
 ```
@@ -86,7 +101,7 @@ export default {
 
 <template>
 	<div class="text-field">
-		<label v-if="!labelOutside"
+		<label v-if="!labelOutside && label !== undefined"
 			class="text-field__label"
 			:class="{ 'text-field__label--hidden': !labelVisible }"
 			:for="inputName">
@@ -108,15 +123,18 @@ export default {
 				:value="value"
 				v-on="$listeners"
 				@input="handleInput">
+
 			<!-- Leading icon -->
 			<div class="text-field__icon text-field__icon--leading">
 				<!-- Leading material design icon in the text field, set the size to 18 -->
 				<slot />
 			</div>
+
 			<!-- Success icon -->
 			<div v-if="success" class="text-field__icon text-field__icon--trailing">
 				<Check :size="18" />
 			</div>
+
 			<!-- clear text button -->
 			<Button v-if="canClear"
 				type="tertiary-no-background"
@@ -160,7 +178,7 @@ export default {
 		 */
 		label: {
 			type: String,
-			required: true,
+			default: undefined,
 		},
 
 		/**
@@ -247,11 +265,19 @@ export default {
 		 * at the same time
 		 */
 		success() {
-			this.validateProps()
+			this.validateTrailingIcons()
 		},
 
 		canClear() {
-			this.validateProps()
+			this.validateTrailingIcons()
+		},
+
+		label() {
+			this.validateLabel()
+		},
+
+		labelOutside() {
+			this.validateLabel()
 		},
 	},
 
@@ -265,11 +291,17 @@ export default {
 			this.$refs.input.focus()
 		},
 
-		validateProps() {
+		validateTrailingIcons() {
 			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')
+			}
+		},
 	},
 }
 
@@ -281,7 +313,6 @@ export default {
 	position: relative;
 	width: 100%;
 	border-radius: var(--border-radius-large);
-	padding-left: 16px;
 
 	&__main-wrapper {
 		height: 36px;
@@ -370,4 +401,5 @@ export default {
 	width: 32px !important;
 	border-radius: var(--border-radius-large);
 }
+
 </style>

From 694517a66e514c0e8c67225955b4d758824b73d0 Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Tue, 2 Aug 2022 08:39:46 +0200
Subject: [PATCH 13/21] Update src/components/TextField/TextField.vue

Co-authored-by: Carl Schwan <carl@carlschwan.eu>
Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 4151f8d615..4312ff3912 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -51,7 +51,6 @@ and `minlength`.
 			<label for="$refs.textField.id">External label</label>
 			<TextField :value.sync="text4"
 				ref="textField"
-				:label-visible="true"
 				:labelOutside= "true"
 				@clear="clearText" />
 		</div>

From 7ad6f5f95901ee7c9bb3d9aa881013fcb873048a Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Tue, 2 Aug 2022 08:39:56 +0200
Subject: [PATCH 14/21] Update src/components/TextField/TextField.vue

Co-authored-by: Joas Schilling <213943+nickvergessen@users.noreply.github.com>
Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 4312ff3912..a167c18afc 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -51,7 +51,7 @@ and `minlength`.
 			<label for="$refs.textField.id">External label</label>
 			<TextField :value.sync="text4"
 				ref="textField"
-				:labelOutside= "true"
+				:label-outside= "true"
 				@clear="clearText" />
 		</div>
 	</div>

From 1c70d587955a5aa687e3aae8fbb7b780ed4db6b6 Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Tue, 2 Aug 2022 08:41:48 +0200
Subject: [PATCH 15/21] Update src/components/TextField/TextField.vue

Co-authored-by: Joas Schilling <213943+nickvergessen@users.noreply.github.com>
Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index a167c18afc..1236891903 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -135,7 +135,7 @@ export default {
 			</div>
 
 			<!-- clear text button -->
-			<Button v-if="canClear"
+			<Button v-else-if="canClear"
 				type="tertiary-no-background"
 				class="text-field__clear-button"
 				@click="clearText">

From cbda4acac546fee0139a13e59fe25c9c88b9ed6b Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Tue, 2 Aug 2022 08:48:06 +0200
Subject: [PATCH 16/21] Update src/components/TextField/TextField.vue

Co-authored-by: Joas Schilling <213943+nickvergessen@users.noreply.github.com>
Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 1236891903..8162ccb4ee 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -251,7 +251,7 @@ export default {
 
 		computedPlaceholder() {
 			if (this.labelVisible) {
-				return this.placeholder ? this.placeholder : ''
+				return this.hasPlaceholder ? this.placeholder : ''
 			} else {
 				return this.hasPlaceholder ? this.placeholder : this.label
 			}

From 364688d42f89ee79c0430f7ab138adb17712d6bb Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@icloud.com>
Date: Tue, 2 Aug 2022 16:34:47 +0200
Subject: [PATCH 17/21] Add icon slot for trailing button

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 61 +++++++++++++-------------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 8162ccb4ee..ba641f1c72 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -32,33 +32,41 @@ and `minlength`.
 	<div class="wrapper">
 		<TextField :value.sync="text1"
 			label="Type something here"
-			:can-clear="text1 !== ''"
-			@clear="clearText">
+			:has-trailing-button="text1 !== ''"
+			@trailing-button-click="clearText">
 			<Magnify :size="16" />
+			<template slot="trailing-button-icon">
+				<Close  :size="20" /></template>
+			</template>
 		</TextField>
 		<TextField :value.sync="text2"
 			label="Type something here"
 			:success="true"
-			@clear="clearText">
+			@trailing-button-click="clearText">
 		</TextField>
 		<TextField :value.sync="text3"
 			label="Type something here"
 			:label-visible="true"
-			@clear="clearText">
+			:has-trailing-button="text3 !== ''"
+			@trailing-button-click="clearText">
 			<Lock :size="16" />
+			<template slot="trailing-button-icon">
+				<Close :size="20" /></template>
+			</template>
 		</TextField>
 		<div class="external-label">
 			<label for="$refs.textField.id">External label</label>
 			<TextField :value.sync="text4"
 				ref="textField"
 				:label-outside= "true"
-				@clear="clearText" />
+				@trailing-button-click="clearText" />
 		</div>
 	</div>
 </template>
 <script>
 import Magnify from 'vue-material-design-icons/Magnify'
 import Lock from 'vue-material-design-icons/Lock'
+import Close from 'vue-material-design-icons/Close'
 
 export default {
 	data() {
@@ -73,11 +81,13 @@ export default {
 	components: {
 		Magnify,
 		Lock,
+		Close,
 	},
 
 	methods: {
 		clearText() {
 			this.text1 = ''
+			this.text3 = ''
 		}
 	}
 }
@@ -115,9 +125,8 @@ export default {
 				:placeholder="computedPlaceholder"
 				aria-live="polite"
 				:class="{
-					'text-field__input--can-clear': canClear,
+					'text-field__input--trailing-icon': hasTrailingButton || hasTrailingIcon,
 					'text-field__input--leading-icon': hasLeadingIcon,
-					'text-field__input--trailing-icon': hasTrailingIcon,
 				}"
 				:value="value"
 				v-on="$listeners"
@@ -134,13 +143,16 @@ export default {
 				<Check :size="18" />
 			</div>
 
-			<!-- clear text button -->
-			<Button v-else-if="canClear"
+			<!-- trailing button -->
+			<Button v-else-if="hasTrailingButton"
 				type="tertiary-no-background"
 				class="text-field__clear-button"
-				@click="clearText">
-				<Close slot="icon"
-					:size="20" />
+				@click="handleTrailingButtonClick">
+				<!-- Populating this slot creates a trailing button within the
+				input boundaries that emits a `trailing-button-click` event -->
+				<template slot="icon">
+					<slot name="trailing-button-icon" />
+				</template>
 			</Button>
 		</div>
 	</div>
@@ -148,7 +160,6 @@ export default {
 
 <script>
 import Button from '../Button/index.js'
-import Close from 'vue-material-design-icons/Close'
 import Check from 'vue-material-design-icons/Check'
 import GenRandomId from '../../utils/GenRandomId.js'
 
@@ -157,7 +168,6 @@ export default {
 
 	components: {
 		Button,
-		Close,
 		Check,
 	},
 
@@ -211,13 +221,9 @@ export default {
 		},
 
 		/**
-		 * Controls whether to display the clear button or not. Since the
-		 * parent component will have to store the value of this text input,
-		 * once clear button is pressed, there's no change in the value of
-		 * the text input. Instead, a 'clear' event is sent to the parent
-		 * component.
+		 * Controls whether to display the trailing button.
 		 */
-		canClear: {
+		hasTrailingButton: {
 			type: Boolean,
 			default: false,
 		},
@@ -264,11 +270,11 @@ export default {
 		 * at the same time
 		 */
 		success() {
-			this.validateTrailingIcons()
+			this.validateTrailingIcon()
 		},
 
 		canClear() {
-			this.validateTrailingIcons()
+			this.validateTrailingIcon()
 		},
 
 		label() {
@@ -285,12 +291,11 @@ export default {
 			this.$emit('update:value', event.target.value)
 		},
 
-		clearText(event) {
-			this.$emit('clear', event)
-			this.$refs.input.focus()
+		handleTrailingButtonClick(event) {
+			this.$emit('trailing-button-click', event)
 		},
 
-		validateTrailingIcons() {
+		validateTrailingIcon() {
 			if (this.canClear && this.success) {
 				throw new Error('success and canClear props cannot be true at the same time')
 			}
@@ -340,10 +345,6 @@ export default {
 			cursor: text;
 		}
 
-		&--can-clear {
-			padding-right: 28px;
-		}
-
 		&--leading-icon {
 			padding-left: 28px;
 		}

From 1ced3891c3b73466c5a3cd5ec461d4579307f980 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@icloud.com>
Date: Wed, 3 Aug 2022 10:23:44 +0200
Subject: [PATCH 18/21] Create a general purpose InputField component

Abstracts some logic into a more general purpose InputVue
component and build the TextField component on top of that.

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
---
 src/components/InputField/InputField.vue | 333 +++++++++++++++++++++++
 src/components/InputField/index.js       |  25 ++
 src/components/TextField/TextField.vue   | 271 ++++--------------
 src/components/index.js                  |   1 +
 4 files changed, 415 insertions(+), 215 deletions(-)
 create mode 100644 src/components/InputField/InputField.vue
 create mode 100644 src/components/InputField/index.js

diff --git a/src/components/InputField/InputField.vue b/src/components/InputField/InputField.vue
new file mode 100644
index 0000000000..206c32ff59
--- /dev/null
+++ b/src/components/InputField/InputField.vue
@@ -0,0 +1,333 @@
+<!--
+  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="input-field">
+		<label v-if="!labelOutside && label !== undefined"
+			class="input-field__label"
+			:class="{ 'input-field__label--hidden': !labelVisible }"
+			:for="inputName">
+			{{ label }}
+		</label>
+		<div class="input-field__main-wrapper">
+			<input v-bind="$attrs"
+				ref="input"
+				:name="inputName"
+				class="input-field__input"
+				:type="type"
+				:placeholder="computedPlaceholder"
+				aria-live="polite"
+				:class="{
+					'input-field__input--trailing-icon': showTrailingButton || hasTrailingIcon,
+					'input-field__input--leading-icon': hasLeadingIcon,
+				}"
+				:value="value"
+				v-on="$listeners"
+				@input="handleInput">
+
+			<!-- Leading icon -->
+			<div class="input-field__icon input-field__icon--leading">
+				<!-- Leading material design icon in the text field, set the size to 18 -->
+				<slot />
+			</div>
+
+			<!-- Success icon -->
+			<div v-if="success" class="input-field__icon input-field__icon--trailing">
+				<Check :size="18" />
+			</div>
+
+			<!-- trailing button -->
+			<Button v-else-if="showTrailingButton"
+				type="tertiary-no-background"
+				class="input-field__clear-button"
+				@click="handleTrailingButtonClick">
+				<!-- Populating this slot creates a trailing button within the
+				input boundaries that emits a `trailing-button-click` event -->
+				<template slot="icon">
+					<slot name="trailing-button-icon" />
+				</template>
+			</Button>
+		</div>
+	</div>
+</template>
+
+<script>
+import Button from '../Button/index.js'
+import Check from 'vue-material-design-icons/Check'
+import GenRandomId from '../../utils/GenRandomId.js'
+
+export default {
+	name: 'InputField',
+
+	components: {
+		Button,
+		Check,
+	},
+
+	props: {
+		/**
+		 * The value of the input field
+		 */
+		value: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * The input element type
+		 */
+		type: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * The hidden input label for accessibility purposes. This will also
+		 * be used as a placeholder unless the placeholder prop is populated
+		 * with a different string.
+		 */
+		label: {
+			type: String,
+			default: undefined,
+		},
+
+		/**
+		 * Pass in true if you want to use an external label. This is useful
+		 * if you need a label that looks different from the one provided by
+		 * this component
+		 */
+		labelOutside: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * We normally have the lable hidden visually and use it for
+		 * accessibility only. If you want to have the label visible just above
+		 * the input field pass in true to this prop.
+		 */
+		labelVisible: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * The placeholder of the input. This defaults as the string that's
+		 * passed into the label prop. In order to remove the placeholder,
+		 * pass in an empty string.
+		 */
+		placeholder: {
+			type: String,
+			default: undefined,
+		},
+
+		/**
+		 * Controls whether to display the trailing button.
+		 */
+		showTrailingButton: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Toggles the success state of the component. Adds a checkmark icon.
+		 * this cannot be used together with canClear.
+		 */
+		success: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Toggles the error state of the component. Adds an error icon.
+		 * this cannot be used together with canClear.
+		 */
+		error: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	computed: {
+		inputName() {
+			return 'input' + GenRandomId()
+		},
+
+		hasLeadingIcon() {
+			return this.$slots.default
+		},
+
+		hasTrailingIcon() {
+			return this.success
+		},
+
+		hasPlaceholder() {
+			return this.placeholder !== '' && this.placeholder !== undefined
+		},
+
+		computedPlaceholder() {
+			if (this.labelVisible) {
+				return this.hasPlaceholder ? this.placeholder : ''
+			} else {
+				return this.hasPlaceholder ? this.placeholder : this.label
+			}
+		},
+	},
+
+	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()
+		},
+
+		labelOutside() {
+			this.validateLabel()
+		},
+	},
+
+	methods: {
+		handleInput(event) {
+			this.$emit('update:value', event.target.value)
+		},
+
+		handleTrailingButtonClick(event) {
+			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')
+			}
+		},
+	},
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.input-field {
+	position: relative;
+	width: 100%;
+	border-radius: var(--border-radius-large);
+
+	&__main-wrapper {
+		height: 36px;
+		position: relative;
+	}
+
+	&__input {
+		margin: 0;
+		padding: 0 12px;
+		font-size: var(--default-font-size);
+		background-color: var(--color-main-background);
+		color: var(--color-main-text);
+		border: 2px solid var(--color-border-dark);
+		height: 36px !important;
+		border-radius: var(--border-radius-large);
+		text-overflow: ellipsis;
+		cursor: pointer;
+		width: 100%;
+		-webkit-appearance: textfield !important;
+		-moz-appearance: textfield !important;
+
+		&:hover {
+			border-color: var(--color-primary-element);
+		}
+		&:focus {
+			cursor: text;
+		}
+
+		&--leading-icon {
+			padding-left: 28px;
+		}
+
+		&--trailing-icon {
+			padding-right: 28px;
+		}
+	}
+
+	&__label {
+		padding: 4px 0;
+		display: block;
+
+		&--hidden {
+			position: absolute;
+			left: -10000px;
+			top: auto;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+		}
+	}
+
+	&__icon {
+		position: absolute;
+		height: 32px;
+		width: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0.7;
+		&--leading {
+			bottom: 2px;
+			left: 2px;
+		}
+
+		&--trailing {
+			bottom: 2px;
+			right: 2px;
+		}
+	}
+
+	&__clear-button {
+		position: absolute;
+		top: 2px;
+		right: 1px;
+	}
+}
+
+::v-deep .button-vue {
+	min-width: unset;
+	min-height: unset;
+	height: 32px;
+	width: 32px !important;
+	border-radius: var(--border-radius-large);
+}
+
+</style>
diff --git a/src/components/InputField/index.js b/src/components/InputField/index.js
new file mode 100644
index 0000000000..93eed48da1
--- /dev/null
+++ b/src/components/InputField/index.js
@@ -0,0 +1,25 @@
+/**
+ * @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @author Marco Ambrosini <marcoambrosini@pm.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import InputField from './InputField.vue'
+
+export default InputField
diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index ba641f1c72..273970a89f 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -32,12 +32,10 @@ and `minlength`.
 	<div class="wrapper">
 		<TextField :value.sync="text1"
 			label="Type something here"
-			:has-trailing-button="text1 !== ''"
+			trailing-button-icon="close"
+			:show-trailing-button="text1 !== ''"
 			@trailing-button-click="clearText">
 			<Magnify :size="16" />
-			<template slot="trailing-button-icon">
-				<Close  :size="20" /></template>
-			</template>
 		</TextField>
 		<TextField :value.sync="text2"
 			label="Type something here"
@@ -47,12 +45,10 @@ and `minlength`.
 		<TextField :value.sync="text3"
 			label="Type something here"
 			:label-visible="true"
-			:has-trailing-button="text3 !== ''"
+			trailing-button-icon="close"
+			:show-trailing-button="text3 !== ''"
 			@trailing-button-click="clearText">
 			<Lock :size="16" />
-			<template slot="trailing-button-icon">
-				<Close :size="20" /></template>
-			</template>
 		</TextField>
 		<div class="external-label">
 			<label for="$refs.textField.id">External label</label>
@@ -109,66 +105,31 @@ export default {
 </docs>
 
 <template>
-	<div class="text-field">
-		<label v-if="!labelOutside && label !== undefined"
-			class="text-field__label"
-			:class="{ 'text-field__label--hidden': !labelVisible }"
-			:for="inputName">
-			{{ label }}
-		</label>
-		<div class="text-field__main-wrapper">
-			<input v-bind="$attrs"
-				ref="input"
-				:name="inputName"
-				class="text-field__input"
-				type="text"
-				:placeholder="computedPlaceholder"
-				aria-live="polite"
-				:class="{
-					'text-field__input--trailing-icon': hasTrailingButton || hasTrailingIcon,
-					'text-field__input--leading-icon': hasLeadingIcon,
-				}"
-				:value="value"
-				v-on="$listeners"
-				@input="handleInput">
-
-			<!-- Leading icon -->
-			<div class="text-field__icon text-field__icon--leading">
-				<!-- Leading material design icon in the text field, set the size to 18 -->
-				<slot />
-			</div>
-
-			<!-- Success icon -->
-			<div v-if="success" class="text-field__icon text-field__icon--trailing">
-				<Check :size="18" />
-			</div>
-
-			<!-- trailing button -->
-			<Button v-else-if="hasTrailingButton"
-				type="tertiary-no-background"
-				class="text-field__clear-button"
-				@click="handleTrailingButtonClick">
-				<!-- Populating this slot creates a trailing button within the
-				input boundaries that emits a `trailing-button-click` event -->
-				<template slot="icon">
-					<slot name="trailing-button-icon" />
-				</template>
-			</Button>
-		</div>
-	</div>
+	<InputField v-bind="$props"
+		v-on="$listeners"
+		@input="handleInput">
+		<!-- Default slot for the leading icon -->
+		<slot />
+		<template slot="trailing-button-icon">
+			<Close v-if="trailingButtonIcon === 'close'" :size="20" />
+			<ArrowRight v-else-if="trailingButtonIcon === 'arrowRight'" :size="20" />
+		</template>
+	</InputField>
 </template>
 
 <script>
-import Button from '../Button/index.js'
-import Check from 'vue-material-design-icons/Check'
-import GenRandomId from '../../utils/GenRandomId.js'
+
+import InputField from '../InputField/InputField.vue'
+import Close from 'vue-material-design-icons/Close'
+import ArrowRight from 'vue-material-design-icons/ArrowRight'
 
 export default {
 	name: 'TextField',
 
 	components: {
-		Button,
-		Check,
+		InputField,
+		Close,
+		ArrowRight,
 	},
 
 	props: {
@@ -180,6 +141,22 @@ export default {
 			required: true,
 		},
 
+		/**
+		 * The type of the input element, it can be `text`, `password`,
+		 * `email`, `number`, `tel` and `url`.
+		 */
+		type: {
+			type: String,
+			default: 'text',
+			validator: (value) => [
+				'text',
+				'password',
+				'email',
+				'tel',
+				'url',
+			].includes(value),
+		},
+
 		/**
 		 * The hidden input label for accessibility purposes. This will also
 		 * be used as a placeholder unless the placeholder prop is populated
@@ -223,11 +200,24 @@ export default {
 		/**
 		 * Controls whether to display the trailing button.
 		 */
-		hasTrailingButton: {
+		showTrailingButton: {
 			type: Boolean,
 			default: false,
 		},
 
+		/**
+		 * Specifies which material design icon should be used for the trailing
+		 * button. Values can be `close` anbd `arrowRight`.
+		 */
+		trailingButtonIcon: {
+			type: String,
+			default: 'close',
+			validator: (value) => [
+				'close',
+				'arrowRight',
+			].includes(value),
+		},
+
 		/**
 		 * Toggles the success state of the component. Adds a checkmark icon.
 		 * this cannot be used together with canClear.
@@ -236,53 +226,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-	},
 
-	computed: {
-		inputName() {
-			return 'input' + GenRandomId()
-		},
-
-		hasLeadingIcon() {
-			return this.$slots.default
-		},
-
-		hasTrailingIcon() {
-			return this.success
-		},
-
-		hasPlaceholder() {
-			return this.placeholder !== '' && this.placeholder !== undefined
-		},
-
-		computedPlaceholder() {
-			if (this.labelVisible) {
-				return this.hasPlaceholder ? this.placeholder : ''
-			} else {
-				return this.hasPlaceholder ? this.placeholder : this.label
-			}
-		},
-	},
-
-	watch: {
 		/**
-		 * Don't allow both trailing checkmark and clear button to be present
-		 * at the same time
+		 * Toggles the error state of the component. Adds an error icon.
+		 * this cannot be used together with canClear.
 		 */
-		success() {
-			this.validateTrailingIcon()
-		},
-
-		canClear() {
-			this.validateTrailingIcon()
-		},
-
-		label() {
-			this.validateLabel()
-		},
-
-		labelOutside() {
-			this.validateLabel()
+		error: {
+			type: Boolean,
+			default: false,
 		},
 	},
 
@@ -290,116 +241,6 @@ export default {
 		handleInput(event) {
 			this.$emit('update:value', event.target.value)
 		},
-
-		handleTrailingButtonClick(event) {
-			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')
-			}
-		},
 	},
 }
-
 </script>
-
-<style lang="scss" scoped>
-
-.text-field {
-	position: relative;
-	width: 100%;
-	border-radius: var(--border-radius-large);
-
-	&__main-wrapper {
-		height: 36px;
-		position: relative;
-	}
-
-	&__input {
-		margin: 0;
-		padding: 0 12px;
-		font-size: var(--default-font-size);
-		background-color: var(--color-main-background);
-		color: var(--color-main-text);
-		border: 2px solid var(--color-border-dark);
-		height: 36px !important;
-		border-radius: var(--border-radius-large);
-		text-overflow: ellipsis;
-		cursor: pointer;
-		width: 100%;
-		-webkit-appearance: textfield !important;
-		-moz-appearance: textfield !important;
-
-		&:hover {
-			border-color: var(--color-primary-element);
-		}
-		&:focus {
-			cursor: text;
-		}
-
-		&--leading-icon {
-			padding-left: 28px;
-		}
-
-		&--trailing-icon {
-			padding-right: 28px;
-		}
-	}
-
-	&__label {
-		padding: 0px 4px 4px 12px;
-		display: block;
-
-		&--hidden {
-			position: absolute;
-			left: -10000px;
-			top: auto;
-			width: 1px;
-			height: 1px;
-			overflow: hidden;
-		}
-	}
-
-	&__icon {
-		position: absolute;
-		height: 32px;
-		width: 32px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		opacity: 0.7;
-		&--leading {
-			bottom: 2px;
-			left: 2px;
-		}
-
-		&--trailing {
-			bottom: 2px;
-			right: 2px;
-		}
-	}
-
-	&__clear-button {
-		position: absolute;
-		top: 2px;
-		right: 1px;
-	}
-}
-
-::v-deep .button-vue {
-	min-width: unset;
-	min-height: unset;
-	height: 32px;
-	width: 32px !important;
-	border-radius: var(--border-radius-large);
-}
-
-</style>
diff --git a/src/components/index.js b/src/components/index.js
index 43dc65bdcf..86f32a121e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -71,4 +71,5 @@ export { default as RichContenteditable } from './RichContenteditable/index.js'
 export { default as SettingsSection } from './SettingsSection/index.js'
 export { default as UserBubble } from './UserBubble/index.js'
 export { default as Button } from './Button/index.js'
+export { default as InputField } from './InputField/index.js'
 export { default as TextField } from './TextField/index.js'

From 34e252c945446c439cbd9d48dbd4223babb8c32e Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@icloud.com>
Date: Wed, 3 Aug 2022 14:57:32 +0200
Subject: [PATCH 19/21] Remove InputField from docs

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
---
 styleguide.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/styleguide.config.js b/styleguide.config.js
index 4742a85f35..fa5778b26a 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -78,6 +78,7 @@ module.exports = {
 				'src/components/RichContenteditable/!(RichContenteditable).vue',
 				'src/components/Settings*/*.vue',
 				'src/components/UserBubble/UserBubbleDiv.vue',
+				'src/components/InputField/InputField.vue',
 			],
 			sections: [
 				{

From de6362d03bf368f486ecdb753344ca137582fbe1 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@icloud.com>
Date: Wed, 3 Aug 2022 14:58:03 +0200
Subject: [PATCH 20/21] Fix error and success states

Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>
---
 src/components/InputField/InputField.vue | 37 ++++++++++--------------
 src/components/TextField/TextField.vue   | 17 +++++++----
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/components/InputField/InputField.vue b/src/components/InputField/InputField.vue
index 206c32ff59..3b7fb8e314 100644
--- a/src/components/InputField/InputField.vue
+++ b/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;
 		}
diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index 273970a89f..da4d9b78cf 100644
--- a/src/components/TextField/TextField.vue
+++ b/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: '',
 		}
 	},
 

From f1be9a1d7ef7bf22eabe4ada460b588c980aad19 Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Thu, 4 Aug 2022 08:39:24 +0200
Subject: [PATCH 21/21] Update src/components/TextField/TextField.vue

Co-authored-by: Joas Schilling <213943+nickvergessen@users.noreply.github.com>
Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 src/components/TextField/TextField.vue | 5 +++--
 src/components/index.js                | 1 -
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/TextField/TextField.vue b/src/components/TextField/TextField.vue
index da4d9b78cf..cea0390c15 100644
--- a/src/components/TextField/TextField.vue
+++ b/src/components/TextField/TextField.vue
@@ -60,7 +60,7 @@ and `minlength`.
 			<label for="$refs.textField.id">External label</label>
 			<TextField :value.sync="text5"
 				ref="textField"
-				:label-outside= "true"
+				:label-outside="true"
 				@trailing-button-click="clearText" />
 		</div>
 	</div>
@@ -167,7 +167,8 @@ export default {
 		/**
 		 * The hidden input label for accessibility purposes. This will also
 		 * be used as a placeholder unless the placeholder prop is populated
-		 * with a different string.
+		 * with a different string. This is required if an external label is
+		 * not provided.
 		 */
 		label: {
 			type: String,
diff --git a/src/components/index.js b/src/components/index.js
index 86f32a121e..43dc65bdcf 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -71,5 +71,4 @@ export { default as RichContenteditable } from './RichContenteditable/index.js'
 export { default as SettingsSection } from './SettingsSection/index.js'
 export { default as UserBubble } from './UserBubble/index.js'
 export { default as Button } from './Button/index.js'
-export { default as InputField } from './InputField/index.js'
 export { default as TextField } from './TextField/index.js'