Fix overwriting message with error message and success message

SchwarzIT · Nov 18, 2024 · e77ae1f · e77ae1f
1 parent 84e377d
commit e77ae1f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 8 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.vue b/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.vue
@@ -123,10 +123,7 @@ defineSlots<{
 
     $footer-gap: var(--onyx-spacing-2xs);
 
-    &__label-tooltip,
-    &__message-tooltip,
-    &__error-tooltip,
-    &__success-tooltip {
+    &__label-tooltip {
       margin-left: $footer-gap;
     }
 
@@ -147,7 +144,7 @@ defineSlots<{
       flex-direction: column;
 
       .onyx-form-message:not(:first-of-type) {
-        display: none;
+        display: var(--message-display, block);
       }
     }
 
@@ -157,7 +154,7 @@ defineSlots<{
 
     &__error-message,
     &__error-tooltip {
-      visibility: var(--visibility, hidden);
+      display: var(--error-message-display, none);
       color: var(--onyx-color-base-danger-500);
     }
 

diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts
@@ -115,7 +115,7 @@ export const Maxlength: Story = {
 export const WithMessage = {
   args: {
     ...Default.args,
-    message: "Example message",
+    message: { shortMessage: "Example message" },
   },
 } satisfies Story;
 

diff --git a/packages/sit-onyx/src/styles/mixins/input.scss b/packages/sit-onyx/src/styles/mixins/input.scss
@@ -43,6 +43,7 @@
 
   &:has(#{$base-selector}__native--success) {
     --border-color: var(--onyx-color-base-success-500);
+    --message-display: none;
   }
 
   &:has(#{$base-selector}__native:read-write:hover) {
@@ -83,7 +84,8 @@
   }
 
   @include invalid(#{$base-selector}__native) {
-    --visibility: visible;
+    --error-message-display: inline-flex;
+    --message-display: none;
     --border-color: var(--onyx-color-base-danger-500);
     --outline-color: var(--onyx-color-base-danger-200);
     --selection-color: var(--onyx-color-base-danger-200);