From f421bd732648a89ad5aa8f196d63550882f1e55b Mon Sep 17 00:00:00 2001
From: Oleksii Kadurin <ovkadurin@gmail.com>
Date: Tue, 7 Nov 2023 11:21:41 +0100
Subject: [PATCH] fix: update documentation and unit tests for validation

---
 docs/fundamentals/systems/form/validate.md    | 18 ++++++++++++-
 .../test-suites/ValidateMixin.suite.js        | 27 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/docs/fundamentals/systems/form/validate.md b/docs/fundamentals/systems/form/validate.md
index 66b0249f4..225887398 100644
--- a/docs/fundamentals/systems/form/validate.md
+++ b/docs/fundamentals/systems/form/validate.md
@@ -346,7 +346,7 @@ export const emailValidator = () => html`
 `;
 ```
 
-### Override Default Messages
+### Override default messages with custom text
 
 To get default validation messages you need to import and call the `loadDefaultFeedbackMessages` function once in your application.
 
@@ -374,6 +374,22 @@ export const defaultMessages = () => html`
 `;
 ```
 
+### Override default messages with custom HTML
+
+Similarly to overriding the default messages with a custom text it is possible to override the messages with a custom HTML.
+
+```js preview-story
+export const defaultMessagesWithCustomHtml = () => html`
+  <lion-input
+    .validators="${[
+      new EqualsLength(4, { getMessage: () => html`<div><b>Note</b> 4 chars please...</div>` }),
+    ]}"
+    .modelValue="${'123'}"
+    label="Custom message for validator instance"
+  ></lion-input>
+`;
+```
+
 ### Override fieldName
 
 In the scenario that the default messages are correct, but you only want to change the `fieldName`, this can both be done for a single specific validator or for all at once.
diff --git a/packages/ui/components/form-core/test-suites/ValidateMixin.suite.js b/packages/ui/components/form-core/test-suites/ValidateMixin.suite.js
index 54bec85b1..461a3fd20 100644
--- a/packages/ui/components/form-core/test-suites/ValidateMixin.suite.js
+++ b/packages/ui/components/form-core/test-suites/ValidateMixin.suite.js
@@ -9,6 +9,7 @@ import {
 } from '@lion/ui/form-core-test-helpers.js';
 import sinon from 'sinon';
 import {
+  EqualsLength,
   MaxLength,
   MinLength,
   Required,
@@ -779,6 +780,32 @@ export function runValidateMixinSuite(customConfig) {
       });
     });
 
+    describe('getMessages with custom HTML', () => {
+      it('will render HTML for lion-validation-feedback', async () => {
+        const messageHtmlId = 'test123';
+        const messageHtml = `<div id="test123">test</div>`;
+        const el = /** @type {ValidateElement} */ (
+          await fixture(html`
+          <${tag}
+            .validators="${[
+              new EqualsLength(4, { getMessage: () => html`<div id="test123">test</div>` }),
+            ]}" })]}"
+            .modelValue="${'123'}"            
+            label="Custom message for validator instance"
+          ></${tag}>
+        `)
+        );
+        expect(el.validationStates.error.EqualsLength).to.be.true;
+        expect(el.hasFeedbackFor).to.deep.equal(['error']);
+        const { _feedbackNode } = getFormControlMembers(el);
+        await el.updateComplete;
+        await el.updateComplete;
+        const messageHtmlNode = _feedbackNode.shadowRoot?.querySelector(`#${messageHtmlId}`);
+        expect(messageHtmlNode?.outerHTML).to.equal(messageHtml);
+        expect(messageHtmlNode?.tagName).to.equal('DIV');
+      });
+    });
+
     describe('Required Validator integration', () => {
       it('will result in erroneous state when form control is empty', async () => {
         const el = /** @type {ValidateElement} */ (