Merge pull request #5822 from nextcloud-libraries/fix/input-field-hel…

…per-text fix(NcInputField): Make helper text aligned and maxcontrast color
nextcloud-libraries · Jul 18, 2024 · 29922ce · 29922ce
2 parents d4428f9 + 3aa253b
commit 29922ce
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
@@ -502,8 +502,10 @@ export default {
 
 	&__helper-text-message {
 		padding-block: 4px;
+		padding-inline: var(--border-radius-large);
 		display: flex;
 		align-items: center;
+		color: var(--color-text-maxcontrast);
 
 		&__icon {
 			margin-inline-end: 8px;

diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
@@ -33,6 +33,11 @@ and `minlength`.
 			@trailing-button-click="clearText">
 			<Lock :size="20" />
 		</NcTextField>
+		<NcTextField :value.sync="text2"
+			label="With helper text"
+			helper-text="This is an optional message to show e.g. validation errors."
+			@trailing-button-click="clearText">
+		</NcTextField>
 		<NcTextField :value.sync="text2"
 			label="Success state"
 			placeholder="Placeholders are possible"