From 62b293715492522c3bec64350fee829a7d4263c2 Mon Sep 17 00:00:00 2001
From: Lan Nguyen Thuy <lnt@umbraco.dk>
Date: Mon, 31 Mar 2025 14:52:25 +0700
Subject: [PATCH 1/3] Fix bug text character length validation should be more
 helpful

---
 packages/uui-input/lib/uui-input.element.ts   | 24 +++++++++++++++---
 .../uui-textarea/lib/uui-textarea.element.ts  | 25 +++++++++++++++----
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts
index bd9cd3b9a..47ba66155 100644
--- a/packages/uui-input/lib/uui-input.element.ts
+++ b/packages/uui-input/lib/uui-input.element.ts
@@ -85,7 +85,7 @@ export class UUIInputElement extends UUIFormControlMixin(
    * @default
    */
   @property({ type: String, attribute: 'minlength-message' })
-  minlengthMessage = 'This field need more characters';
+  minlengthMessage = '{0} characters left';
 
   /**
    * Sets the max value of the input.
@@ -112,7 +112,7 @@ export class UUIInputElement extends UUIFormControlMixin(
    * @default
    */
   @property({ type: String, attribute: 'maxlength-message' })
-  maxlengthMessage = 'This field exceeds the allowed amount of characters';
+  maxlengthMessage = 'Maximum {0} characters, {1} too many.';
 
   /**
    * Specifies the interval between legal numbers of the input
@@ -216,12 +216,21 @@ export class UUIInputElement extends UUIFormControlMixin(
 
     this.addValidator(
       'tooShort',
-      () => this.minlengthMessage,
+      () =>
+        this.formatString(
+          this.minlengthMessage,
+          this.minlength ? this.minlength - String(this.value).length : '',
+        ),
       () => !!this.minlength && String(this.value).length < this.minlength,
     );
     this.addValidator(
       'tooLong',
-      () => this.maxlengthMessage,
+      () =>
+        this.formatString(
+          this.maxlengthMessage,
+          this.maxlength ?? '',
+          this.maxlength ? String(this.value).length - this.maxlength : '',
+        ),
       () => !!this.maxlength && String(this.value).length > this.maxlength,
     );
 
@@ -230,6 +239,13 @@ export class UUIInputElement extends UUIFormControlMixin(
     });
   }
 
+  formatString(str: string, ...values: (string | number)[]): string {
+    return str.replace(
+      /{(\d+)}/g,
+      (_, index) => values[index]?.toString() ?? '',
+    );
+  }
+
   #onKeyDown(e: KeyboardEvent): void {
     if (this.type !== 'color' && e.key == 'Enter') {
       this.submit();
diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts
index b457fe9f1..61491a0ac 100644
--- a/packages/uui-textarea/lib/uui-textarea.element.ts
+++ b/packages/uui-textarea/lib/uui-textarea.element.ts
@@ -86,8 +86,7 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
    * @default
    */
   @property({ type: String, attribute: 'minlength-message' })
-  minlengthMessage = 'This field need more characters';
-
+  minlengthMessage = '{0} characters left';
   /**
    * This is a maximum value of the input.
    * @type {number}
@@ -104,7 +103,7 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
    * @default
    */
   @property({ type: String, attribute: 'maxlength-message' })
-  maxlengthMessage = 'This field exceeds the allowed amount of characters';
+  maxlengthMessage = 'Maximum {0} characters, {1} too many.';
 
   @query('#textarea')
   protected _textarea!: HTMLInputElement;
@@ -163,12 +162,21 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
 
     this.addValidator(
       'tooShort',
-      () => this.minlengthMessage,
+      () =>
+        this.formatString(
+          this.minlengthMessage,
+          this.minlength ? this.minlength - String(this.value).length : '',
+        ),
       () => !!this.minlength && (this.value as string).length < this.minlength,
     );
     this.addValidator(
       'tooLong',
-      () => this.maxlengthMessage,
+      () =>
+        this.formatString(
+          this.maxlengthMessage,
+          this.maxlength ?? '',
+          this.maxlength ? String(this.value).length - this.maxlength : '',
+        ),
       () => !!this.maxlength && (this.value as string).length > this.maxlength,
     );
   }
@@ -186,6 +194,13 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
     }
   }
 
+  formatString(str: string, ...values: (string | number)[]): string {
+    return str.replace(
+      /{(\d+)}/g,
+      (_, index) => values[index]?.toString() ?? '',
+    );
+  }
+
   /**
    * This method enables <label for="..."> to focus the select
    */

From a1552d34c00517b100af0f14c7f0f7bc1fb628ef Mon Sep 17 00:00:00 2001
From: Lan Nguyen Thuy <lnt@umbraco.dk>
Date: Mon, 14 Apr 2025 15:41:08 +0700
Subject: [PATCH 2/3] add variables to the message string validation

---
 packages/uui-input/lib/uui-input.element.ts   | 39 +++++++++++-------
 .../uui-textarea/lib/uui-textarea.element.ts  | 41 +++++++++++--------
 2 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts
index 1018d4734..fcc5149d5 100644
--- a/packages/uui-input/lib/uui-input.element.ts
+++ b/packages/uui-input/lib/uui-input.element.ts
@@ -84,8 +84,9 @@ export class UUIInputElement extends UUIFormControlMixin(
    * @attr minlength-message
    * @default
    */
-  @property({ type: String, attribute: 'minlength-message' })
-  minlengthMessage = '{0} characters left';
+  @property({ attribute: 'minlength-message' })
+  minlengthMessage: string | ((charsLeft: number) => string) = charsLeft =>
+    `${charsLeft} characters left`;
 
   /**
    * Sets the max value of the input.
@@ -111,8 +112,11 @@ export class UUIInputElement extends UUIFormControlMixin(
    * @attr maxlength-message
    * @default
    */
-  @property({ type: String, attribute: 'maxlength-message' })
-  maxlengthMessage = 'Maximum {0} characters, {1} too many.';
+  @property({ attribute: 'maxlength-message' })
+  maxlengthMessage: string | ((max: number, current: number) => string) = (
+    max,
+    current,
+  ) => `Maximum ${max} characters, ${current} too many.`;
 
   /**
    * Specifies the interval between legal numbers of the input
@@ -216,21 +220,26 @@ export class UUIInputElement extends UUIFormControlMixin(
 
     this.addValidator(
       'tooShort',
-      () =>
-        this.formatString(
-          this.minlengthMessage,
-          this.minlength ? this.minlength - String(this.value).length : '',
-        ),
+      () => {
+        const label = this.minlengthMessage;
+        if (typeof label === 'function') {
+          return label(
+            this.minlength ? this.minlength - String(this.value).length : 0,
+          );
+        }
+        return label;
+      },
       () => !!this.minlength && String(this.value).length < this.minlength,
     );
     this.addValidator(
       'tooLong',
-      () =>
-        this.formatString(
-          this.maxlengthMessage,
-          this.maxlength ?? '',
-          this.maxlength ? String(this.value).length - this.maxlength : '',
-        ),
+      () => {
+        const label = this.maxlengthMessage;
+        if (typeof label === 'function') {
+          return label(this.maxlength ?? 0, String(this.value).length);
+        }
+        return label;
+      },
       () => !!this.maxlength && String(this.value).length > this.maxlength,
     );
 
diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts
index 61491a0ac..2c56b3b08 100644
--- a/packages/uui-textarea/lib/uui-textarea.element.ts
+++ b/packages/uui-textarea/lib/uui-textarea.element.ts
@@ -81,12 +81,12 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
 
   /**
    * Minlength validation message.
-   * @type {boolean}
    * @attr
    * @default
    */
-  @property({ type: String, attribute: 'minlength-message' })
-  minlengthMessage = '{0} characters left';
+  @property({ attribute: 'minlength-message' })
+  minlengthMessage: string | ((charsLeft: number) => string) = charsLeft =>
+    `${charsLeft} characters left`;
   /**
    * This is a maximum value of the input.
    * @type {number}
@@ -98,12 +98,14 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
 
   /**
    * Maxlength validation message.
-   * @type {boolean}
    * @attr
    * @default
    */
-  @property({ type: String, attribute: 'maxlength-message' })
-  maxlengthMessage = 'Maximum {0} characters, {1} too many.';
+  @property({ attribute: 'maxlength-message' })
+  maxlengthMessage: string | ((max: number, current: number) => string) = (
+    max,
+    current,
+  ) => `Maximum ${max} characters, ${current} too many.`;
 
   @query('#textarea')
   protected _textarea!: HTMLInputElement;
@@ -162,21 +164,26 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
 
     this.addValidator(
       'tooShort',
-      () =>
-        this.formatString(
-          this.minlengthMessage,
-          this.minlength ? this.minlength - String(this.value).length : '',
-        ),
+      () => {
+        const label = this.minlengthMessage;
+        if (typeof label === 'function') {
+          return label(
+            this.minlength ? this.minlength - String(this.value).length : 0,
+          );
+        }
+        return label;
+      },
       () => !!this.minlength && (this.value as string).length < this.minlength,
     );
     this.addValidator(
       'tooLong',
-      () =>
-        this.formatString(
-          this.maxlengthMessage,
-          this.maxlength ?? '',
-          this.maxlength ? String(this.value).length - this.maxlength : '',
-        ),
+      () => {
+        const label = this.maxlengthMessage;
+        if (typeof label === 'function') {
+          return label(this.maxlength ?? 0, String(this.value).length);
+        }
+        return label;
+      },
       () => !!this.maxlength && (this.value as string).length > this.maxlength,
     );
   }

From f7420e2f30452dae1dfc6bceb6a97ef64e9efe22 Mon Sep 17 00:00:00 2001
From: Lan Nguyen Thuy <lnt@umbraco.dk>
Date: Mon, 14 Apr 2025 15:42:59 +0700
Subject: [PATCH 3/3] remove formatstring

---
 packages/uui-input/lib/uui-input.element.ts       | 7 -------
 packages/uui-textarea/lib/uui-textarea.element.ts | 7 -------
 2 files changed, 14 deletions(-)

diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts
index fcc5149d5..acbf8cad8 100644
--- a/packages/uui-input/lib/uui-input.element.ts
+++ b/packages/uui-input/lib/uui-input.element.ts
@@ -248,13 +248,6 @@ export class UUIInputElement extends UUIFormControlMixin(
     });
   }
 
-  formatString(str: string, ...values: (string | number)[]): string {
-    return str.replace(
-      /{(\d+)}/g,
-      (_, index) => values[index]?.toString() ?? '',
-    );
-  }
-
   #onKeyDown(e: KeyboardEvent): void {
     if (this.type !== 'color' && e.key == 'Enter') {
       this.submit();
diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts
index 2c56b3b08..9f11a7825 100644
--- a/packages/uui-textarea/lib/uui-textarea.element.ts
+++ b/packages/uui-textarea/lib/uui-textarea.element.ts
@@ -201,13 +201,6 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
     }
   }
 
-  formatString(str: string, ...values: (string | number)[]): string {
-    return str.replace(
-      /{(\d+)}/g,
-      (_, index) => values[index]?.toString() ?? '',
-    );
-  }
-
   /**
    * This method enables <label for="..."> to focus the select
    */