From 7c2b4692d31070852d35d9a3ce16dc3e0797ce32 Mon Sep 17 00:00:00 2001
From: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
Date: Tue, 29 Oct 2024 17:53:54 +0100
Subject: [PATCH] fix(validation-feedback): do not display type of the
 validation feedback message, if there is no message

---
 .changeset/odd-ears-rule.md                          |  5 +++++
 .../form-core/src/validate/LionValidationFeedback.js |  6 ++++--
 .../test/validate/lion-validation-feedback.test.js   | 12 ++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/odd-ears-rule.md

diff --git a/.changeset/odd-ears-rule.md b/.changeset/odd-ears-rule.md
new file mode 100644
index 000000000..822383caf
--- /dev/null
+++ b/.changeset/odd-ears-rule.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[validation-feedback] do not display type of the validation feedback message, if there is no message
diff --git a/packages/ui/components/form-core/src/validate/LionValidationFeedback.js b/packages/ui/components/form-core/src/validate/LionValidationFeedback.js
index 9f6b4a4d0..f58bdeecd 100644
--- a/packages/ui/components/form-core/src/validate/LionValidationFeedback.js
+++ b/packages/ui/components/form-core/src/validate/LionValidationFeedback.js
@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { localizeNamespaceLoader } from '../localizeNamespaceLoader.js';
 
@@ -90,7 +90,9 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
       this.feedbackData.map(
         ({ message, type, validator }) => html`
           <div class="validation-feedback__type">
-            ${this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)}
+            ${message && type
+              ? this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)
+              : nothing}
           </div>
           ${this._messageTemplate({ message, type, validator })}
         `,
diff --git a/packages/ui/components/form-core/test/validate/lion-validation-feedback.test.js b/packages/ui/components/form-core/test/validate/lion-validation-feedback.test.js
index bdc19810f..f03316078 100644
--- a/packages/ui/components/form-core/test/validate/lion-validation-feedback.test.js
+++ b/packages/ui/components/form-core/test/validate/lion-validation-feedback.test.js
@@ -91,6 +91,18 @@ describe('lion-validation-feedback', () => {
     expect(validationFeedbackType?.textContent?.trim()).to.equal('Info');
   });
 
+  it('it does not share the type if there is no message', async () => {
+    const el = /** @type {LionValidationFeedback} */ (
+      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
+    );
+
+    el.feedbackData = [{ message: '', type: 'error', validator: new AlwaysInvalid() }];
+    await el.updateComplete;
+
+    const validationFeedbackType = el.shadowRoot?.querySelector('.validation-feedback__type');
+    expect(validationFeedbackType?.textContent?.trim()).to.not.equal('Error');
+  });
+
   describe('accessibility', () => {
     it('passes a11y audit when with a message', async () => {
       const el = /** @type {LionValidationFeedback} */ (