Fix Tooltip height (#3433)

Co-authored-by: origami-z <[email protected]> Co-authored-by: Josh Wooding <[email protected]>
jpmorganchase · Jul 4, 2024 · 7fa6e22 · 7fa6e22
1 parent 888d615
commit 7fa6e22
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/unlucky-cats-add.md b/.changeset/unlucky-cats-add.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed `Tooltip` not having correct height.
diff --git a/packages/core/src/tooltip/Tooltip.css b/packages/core/src/tooltip/Tooltip.css
@@ -5,9 +5,12 @@
   /* apply icon margin based on the text line height so it's aligned on all densities */
   --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-icon-size-base), 12px)) / 2);
   --tooltip-status-borderColor: var(--salt-container-primary-borderColor);
+  /* Single line height should be size-base */
+  --tooltip-padding: calc(var(--salt-spacing-75) - var(--salt-size-border)) var(--salt-spacing-100);
 }
 
 .saltTooltip {
+  box-sizing: border-box;
   background: var(--tooltip-background);
   border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));
   border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
@@ -20,7 +23,7 @@
   font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));
   line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));
   max-width: var(--saltTooltip-maxWidth, 230px);
-  padding: var(--saltTooltip-padding, var(--salt-spacing-100));
+  padding: var(--saltTooltip-padding, var(--tooltip-padding));
   position: relative;
   text-align: var(--saltTooltip-textAlign, left);
   z-index: var(--tooltip-zIndex);