From 1ae74f4910f56bffb716781e21c74f7346144eb8 Mon Sep 17 00:00:00 2001
From: Zhihao Cui <davidcui2@me.com>
Date: Fri, 10 Nov 2023 10:29:09 +0000
Subject: [PATCH] Fix Tooltip status icon alignment (#2687)

---
 .changeset/ten-humans-train.md                       |  5 +++++
 packages/core/src/tooltip/Tooltip.css                |  2 +-
 packages/core/stories/tooltip/tooltip.qa.stories.tsx | 10 +++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/ten-humans-train.md

diff --git a/.changeset/ten-humans-train.md b/.changeset/ten-humans-train.md
new file mode 100644
index 00000000000..d8c2e67b250
--- /dev/null
+++ 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
index e73e0b102e0..735e5f77697 100644
--- 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
index 76fecf48209..e4dd25d903d 100644
--- 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={{