Fix Tooltip status icon alignment (#2687)

jpmorganchase · Nov 10, 2023 · 1ae74f4 · 1ae74f4 · vercel · Nov 10, 2023
1 parent abeeac9
commit 1ae74f4
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/ten-humans-train.md b/.changeset/ten-humans-train.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fix Tooltip status icon alignment
diff --git a/packages/core/src/tooltip/Tooltip.css b/packages/core/src/tooltip/Tooltip.css
@@ -3,7 +3,7 @@
   --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));
   --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));
   /* apply icon margin based on the text line height so it's aligned on all densities */
-  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - 12px) / 2);
+  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-icon-size-base), 12px)) / 2);
 }
 
 .saltTooltip {

diff --git a/packages/core/stories/tooltip/tooltip.qa.stories.tsx b/packages/core/stories/tooltip/tooltip.qa.stories.tsx
@@ -27,7 +27,15 @@ export const AllExamplesGrid: StoryFn<QAContainerProps> = (props) => {
       <IconWithTooltip content="Hello, World" />
       <IconWithTooltip status="error" content="Uh oh, world" />
       <IconWithTooltip
-        content={<div style={{ background: "#ccc", width: 60, height: 20 }} />}
+        content={
+          <div
+            style={{
+              background: "var(--salt-text-secondary-foreground)",
+              width: 60,
+              height: "var(--salt-text-lineHeight)",
+            }}
+          />
+        }
       />
       <div
         style={{