fix(OnyxFormElement): hide message while error is shown + prevent error overflow

SchwarzIT / onyx

🚀 A design system and Vue.js component library created by Schwarz IT

https://onyx.schwarz

Apache License 2.0

40 stars 4 forks source link

fix(OnyxFormElement): hide message while error is shown + prevent error overflow #1368

Closed BoppLi closed 1 week ago

BoppLi commented 1 week ago

Closes #1355

hide a standard message below form elements when an error is shown
fix german translations for error previews
add component tests

Checklist

[x] The added / edited code has been documented with JSDoc
[x] If a new component is added, at least one Playwright screenshot test is added
[x] A changeset is added with npx changeset add if your changes should be released as npm package (because they affect the library usage)

changeset-bot[bot] commented 1 week ago

🦋 Changeset detected

Latest commit: aba09cb457a9c24e9992c6041e22328fffc90032

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

| Name | Type | | ------------------------- | ----- | | sit-onyx | Patch | | alpha-test-app | Patch | | playground | Patch | | @sit-onyx/chartjs-plugin | Patch | | @sit-onyx/nuxt | Patch | | @sit-onyx/storybook-utils | Patch | | @sit-onyx/vitepress-theme | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

BoppLi commented 1 week ago

I think I can still reproduce the bug

yes, the core component does not hide the error message, this can only be done in the "real" components which have access to an actual input/textarea where :user-invalid exists

unfortunately we can't use v-if/-else because :user-invalid exists only in CSS

try it out in OnyxInput or OnyxTextarea :)