ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(validation-feedback): do not display type of the validation feedback message, if there is no message

Browse source
This commit is contained in:
gerjanvangeest 2024-10-29 17:53:54 +01:00 committed by GitHub
parent 16681c85e3
commit 7c2b4692d3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/odd-ears-rule.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[validation-feedback] do not display type of the validation feedback message, if there is no message

6
packages/ui/components/form-core/src/validate/LionValidationFeedback.js
View file

@ -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 })}
`,

12
packages/ui/components/form-core/test/validate/lion-validation-feedback.test.js
View file

@ -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} */ (