Fix Tooltip status override (#4367)

Co-authored-by: Josh Wooding <[email protected]>
jpmorganchase · Nov 1, 2024 · 26bf747 · 26bf747
1 parent b36b905
commit 26bf747
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/.changeset/slow-bags-give.md b/.changeset/slow-bags-give.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed Tooltip to prioritize its `status` prop over the status inherited from a parent FormField.
diff --git a/packages/core/src/__tests__/__e2e__/tooltip/Tooltip.cy.tsx b/packages/core/src/__tests__/__e2e__/tooltip/Tooltip.cy.tsx
@@ -257,4 +257,28 @@ describe("GIVEN a Tooltip", () => {
       cy.findByTestId(FLOATING_TEST_ID).should("exist");
     });
   });
+
+  describe("WHEN used in a FormField", () => {
+    it("AND status is undefined, THEN should inherit status", () => {
+      cy.mount(
+        <FormField validationStatus="error">
+          <Tooltip open content="tooltip">
+            <InfoIcon />
+          </Tooltip>
+        </FormField>,
+      );
+      cy.findByRole("tooltip").should("have.class", "saltTooltip-error");
+    });
+
+    it("AND status is defined, THEN should not inherit status", () => {
+      cy.mount(
+        <FormField validationStatus="error">
+          <Tooltip open content="tooltip" status="info">
+            <InfoIcon />
+          </Tooltip>
+        </FormField>,
+      );
+      cy.findByRole("tooltip").should("have.class", "saltTooltip-info");
+    });
+  });
 });
diff --git a/packages/core/src/tooltip/Tooltip.tsx b/packages/core/src/tooltip/Tooltip.tsx
@@ -96,10 +96,11 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     const disabled = disabledProp || formFieldDisabled;
     const status =
-      formFieldValidationStatus !== undefined &&
+      statusProp ??
+      (formFieldValidationStatus !== undefined &&
       VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)
         ? formFieldValidationStatus
-        : statusProp;
+        : undefined);
     const { Component: FloatingComponent } = useFloatingComponent();
 
     const hookProps: UseTooltipProps = {