Merge branch 'main' into sharp-country-symbol-css

jpmorganchase · May 8, 2024 · 5b3dc85 · 5b3dc85
2 parents 705e565 + d972d20
commit 5b3dc85
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/violet-dingos-hammer.md b/.changeset/violet-dingos-hammer.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed `Tooltip` not displaying when the `content` prop value is falsy e.g. 0
diff --git a/packages/core/src/__tests__/__e2e__/tooltip/Tooltip.cy.tsx b/packages/core/src/__tests__/__e2e__/tooltip/Tooltip.cy.tsx
@@ -213,6 +213,20 @@ describe("GIVEN a Tooltip", () => {
     });
   });
 
+  describe("WHEN content is undefined", () => {
+    it("then tooltip doesn't display", () => {
+      cy.mount(<Open content={undefined} />);
+      cy.findByRole("tooltip").should("not.exist");
+    });
+  });
+
+  describe("WHEN content is falsy", () => {
+    it("then tooltip should still display", () => {
+      cy.mount(<Open content={0} />);
+      cy.findByRole("tooltip").should("exist");
+    });
+  });
+
   describe("WHEN used in header tag", () => {
     it("then tooltip displays default font weight and size", () => {
       cy.mount(

diff --git a/packages/core/src/tooltip/Tooltip.tsx b/packages/core/src/tooltip/Tooltip.tsx
@@ -124,7 +124,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     );
 
     const floatingRef = useForkRef<HTMLDivElement>(floating, ref);
-    const hasContent = !!content;
+    const hasContent = content != undefined && content !== "";
 
     return (
       <>

diff --git a/packages/core/stories/tooltip/tooltip.qa.stories.tsx b/packages/core/stories/tooltip/tooltip.qa.stories.tsx
@@ -34,6 +34,7 @@ export const AllExamplesGrid: StoryFn<QAContainerProps> = (props) => {
       <IconWithTooltip status="error" content="Error" />
       <IconWithTooltip status="success" content="Success" />
       <IconWithTooltip status="warning" content="Warning" />
+      <IconWithTooltip content={0} />
       <div
         style={{
           width: 10,