Update OnyxInfoTooltip colors

SchwarzIT · Nov 19, 2024 · 4c8ebeb · 4c8ebeb
1 parent 6319b44
commit 4c8ebeb
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 7 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxFormElement/FormMessage.vue b/packages/sit-onyx/src/components/OnyxFormElement/FormMessage.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   /**
    * How the message should be colored and displayed.
    */
-  type: "error" | "success" | "info";
+  type: "danger" | "success" | "neutral";
 }>();
 </script>
 
@@ -28,6 +28,7 @@ const props = defineProps<{
       class="onyx-form-message__tooltip"
       position="bottom"
       open="hover"
+      :color="props.type"
       :text="props.messages.longMessage"
     />
   </component>

diff --git a/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.vue b/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.vue
@@ -58,7 +58,7 @@ defineSlots<{
           v-if="props.errorMessages"
           class="onyx-form-element__error-message"
           :messages="props.errorMessages"
-          type="error"
+          type="danger"
         />
         <FormMessage
           v-if="props.successMessages"
@@ -70,7 +70,7 @@ defineSlots<{
           v-if="props.message"
           class="onyx-form-element__message"
           :messages="props.message"
-          type="info"
+          type="neutral"
         />
       </span>
       <span v-if="counterText" class="onyx-form-element__counter">

diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.ct.tsx b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.ct.tsx
@@ -39,7 +39,7 @@ test.describe("Screenshot tests", () => {
         hideLabel={column === "hideLabel"}
         required={row === "required"}
         requiredMarker={row === "optional" ? "optional" : undefined}
-        message={row === "message" ? "Test message" : undefined}
+        message={row === "message" ? { shortMessage: "Test message" } : undefined}
       />
     ),
   });

diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.ct.tsx
@@ -202,7 +202,7 @@ test.describe("Screenshot tests", () => {
       <OnyxStepper
         style="width: 12rem"
         label="Test label"
-        customError={{ shortMessage: "Test error" }}
+        customError={{ shortMessage: "Test error", longMessage: "Test long message error" }}
         modelValue={10}
       />
     ),

diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
@@ -38,8 +38,10 @@ test.describe("Screenshot tests", () => {
     component: (column, row) => {
       const label =
         column === "long-text" ? "Very long label that should be truncated" : "Test label";
-      const message =
-        column === "long-text" ? "Very long message that should be truncated" : "Test message";
+      const message = {
+        shortMessage:
+          column === "long-text" ? "Very long message that should be truncated" : "Test message",
+      };
 
       return (
         <OnyxTextarea

diff --git a/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue b/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue
@@ -76,6 +76,7 @@ const type = computed(() => {
 const tooltipClasses = computed(() => {
   return {
     "onyx-tooltip--danger": props.color === "danger",
+    "onyx-tooltip--success": props.color === "success",
     "onyx-tooltip--fit-parent": props.fitParent,
     "onyx-tooltip--hidden": !isVisible.value,
     [`onyx-tooltip--${openDirection.value}`]: props.position === "auto",
@@ -188,6 +189,11 @@ $wedge-size: 0.5rem;
       --color: var(--onyx-color-text-icons-danger-bold);
     }
 
+    &--success {
+      --background-color: var(--onyx-color-base-success-200);
+      --color: var(--onyx-color-text-icons-success-bold);
+    }
+
     &::after {
       content: " ";
       position: absolute;