fix alignment with span

primer · May 10, 2022 · 3bd3382 · 3bd3382
1 parent 393c440
commit 3bd3382
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/src/Tooltip/index.tsx b/src/Tooltip/index.tsx
@@ -79,7 +79,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
     <Box
       as="span"
       sx={{
-        ':hover, :focus-within': {'[data-component=tooltip]': {visibility: 'visible', opacity: 1}}
+        ':hover, :focus-within': {'[data-component=tooltip]': {visibility: 'visible', opacity: 1}},
+        lineHeight: 1 // we don't want the span wrapper to cause misalignment
       }}
     >
       <TooltipContext.Provider value={{tooltipId}}>{child}</TooltipContext.Provider>

diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1250,6 +1250,10 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   margin: 4px;
 }
 
+.c3 {
+  line-height: 1;
+}
+
 .c3:hover [data-component=tooltip],
 .c3:focus-within [data-component=tooltip] {
   visibility: visible;
@@ -1846,6 +1850,10 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   margin: 4px;
 }
 
+.c3 {
+  line-height: 1;
+}
+
 .c3:hover [data-component=tooltip],
 .c3:focus-within [data-component=tooltip] {
   visibility: visible;

diff --git a/src/__tests__/__snapshots__/Tooltip.test.tsx.snap b/src/__tests__/__snapshots__/Tooltip.test.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tooltip renders consistently 1`] = `
+.c0 {
+  line-height: 1;
+}
+
 .c0:hover [data-component=tooltip],
 .c0:focus-within [data-component=tooltip] {
   visibility: visible;

diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx
@@ -269,6 +269,7 @@ export function MemexTableMenu(): JSX.Element {
           width: 200,
           display: 'flex',
           justifyContent: 'space-between',
+          alignItems: 'center',
           p: 2,
           border: '1px solid',
           borderColor: 'border.default'