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`
- ${this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)} + ${message && type + ? this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`) + : nothing}
${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``) + ); + + 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} */ (