From b3ca6a6574130bf2f45b0d463a9c3be5aa33ae33 Mon Sep 17 00:00:00 2001
From: Anthony Stewart <150152+a-stewart@users.noreply.github.com>
Date: Fri, 29 Aug 2025 03:56:28 +0200
Subject: [PATCH] [POC] VS Code style invalid validation for textfield

---
 .../vscode-textfield.styles.ts                | 25 +++++++-
 src/vscode-textfield/vscode-textfield.ts      | 61 +++++++++++--------
 2 files changed, 58 insertions(+), 28 deletions(-)

diff --git a/src/vscode-textfield/vscode-textfield.styles.ts b/src/vscode-textfield/vscode-textfield.styles.ts
index b84aeebf4..1dc9bb098 100644
--- a/src/vscode-textfield/vscode-textfield.styles.ts
+++ b/src/vscode-textfield/vscode-textfield.styles.ts
@@ -24,12 +24,19 @@ const styles: CSSResultGroup = [
       border-width: 1px;
       box-sizing: border-box;
       color: var(--vscode-settings-textInputForeground, #cccccc);
-      display: flex;
+      display: block;
       max-width: 100%;
       position: relative;
       width: 100%;
     }
 
+    .container {
+      display: flex;
+      width: stretch;
+      width: -webkit-fill-available;
+      width: -moz-available;
+    }
+
     :host([focused]) .root {
       border-color: var(--vscode-focusBorder, #0078d4);
     }
@@ -41,9 +48,25 @@ const styles: CSSResultGroup = [
 
     :host([invalid]) input,
     :host(:invalid) input {
+      /* background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d); */
+    }
+
+    #error-message {
+      display: none;
+      width: stretch;
+      width: -webkit-fill-available;
+      width: -moz-available;
+      padding: 5px;
+      color: var(--vscode-inputValidation-errorForeground, var(--vscode-settings-textInputForeground, #cccccc));
+      border-top: 1px solid var(--vscode-inputValidation-errorBorder, #be1100);
       background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);
     }
 
+    :host([invalid]) #error-message,
+    :host(:invalid) #error-message {
+      display: block;
+    }
+
     ::slotted([slot='content-before']) {
       display: block;
       margin-left: 2px;
diff --git a/src/vscode-textfield/vscode-textfield.ts b/src/vscode-textfield/vscode-textfield.ts
index 70b11d167..5a397c62f 100644
--- a/src/vscode-textfield/vscode-textfield.ts
+++ b/src/vscode-textfield/vscode-textfield.ts
@@ -294,6 +294,9 @@ export class VscodeTextfield
   @query('#input')
   private _inputEl!: HTMLInputElement;
 
+  @query('#error-message')
+  private _errorMessageEl!: HTMLDivElement;
+
   @state()
   private _value = '';
 
@@ -322,6 +325,7 @@ export class VscodeTextfield
         this._inputEl
       );
     }
+    this._errorMessageEl.innerText = this._inputEl.validationMessage;
   }
 
   private _onInput() {
@@ -353,34 +357,37 @@ export class VscodeTextfield
   override render(): TemplateResult {
     return html`
       <div class="root">
-        <slot name="content-before"></slot>
-        <input
-          id="input"
-          type=${this.type}
-          ?autofocus=${this.autofocus}
-          autocomplete=${ifDefined(this.autocomplete)}
-          aria-label=${this.label}
-          ?disabled=${this.disabled}
-          max=${ifDefined(this.max)}
-          maxlength=${ifDefined(this.maxLength)}
-          min=${ifDefined(this.min)}
-          minlength=${ifDefined(this.minLength)}
-          ?multiple=${this.multiple}
-          name=${ifDefined(this.name)}
-          pattern=${ifDefined(this.pattern)}
-          placeholder=${ifDefined(this.placeholder)}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          step=${ifDefined(this.step)}
-          .value=${this._value}
-          @blur=${this._onBlur}
-          @change=${this._onChange}
-          @focus=${this._onFocus}
-          @input=${this._onInput}
-          @keydown=${this._onKeyDown}
-        >
-        <slot name="content-after"></slot>
+        <div class="container">
+          <slot name="content-before"></slot>
+          <input
+            id="input"
+            type=${this.type}
+            ?autofocus=${this.autofocus}
+            autocomplete=${ifDefined(this.autocomplete)}
+            aria-label=${this.label}
+            ?disabled=${this.disabled}
+            max=${ifDefined(this.max)}
+            maxlength=${ifDefined(this.maxLength)}
+            min=${ifDefined(this.min)}
+            minlength=${ifDefined(this.minLength)}
+            ?multiple=${this.multiple}
+            name=${ifDefined(this.name)}
+            pattern=${ifDefined(this.pattern)}
+            placeholder=${ifDefined(this.placeholder)}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            step=${ifDefined(this.step)}
+            .value=${this._value}
+            @blur=${this._onBlur}
+            @change=${this._onChange}
+            @focus=${this._onFocus}
+            @input=${this._onInput}
+            @keydown=${this._onKeyDown}
+          >
+          <slot name="content-after"></slot>
+        </div>
       </div>
+      <div id="error-message">${this.validationMessage}</div>
     `;
   }
 }