Match tooltip styles to VS Code (#2353)

* add border to experiments table tooltips

* push border into global style

* remove arrow from tooltips

* remove extra padding and global style

* reduce padding by 5px in info tooltip

* remove unused styles file

Author: mattseddon

webview/src/experiments/components/table/Indicators.tsx

@@ -13,7 +13,6 @@ import {
 } from '../../../shared/components/icons'
 import { sendMessage } from '../../../shared/vscode'
 import Tooltip from '../../../shared/components/tooltip/Tooltip'
-import tooltipStyles from '../../../shared/components/tooltip/styles.module.scss'
 import { pluralize } from '../../../util/strings'
 import { ExperimentsState } from '../../store'
 
@@ -31,7 +30,6 @@ export const IndicatorTooltip: React.FC<IndicatorTooltipProps> = ({
       placement="bottom-start"
       disabled={!tooltipContent}
       content={tooltipContent}
-      className={tooltipStyles.padded}
       ref={wrapperRef}
     >
       {children}

webview/src/experiments/components/table/styles.module.scss

@@ -651,7 +651,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
   white-space: pre-wrap;
   display: flex;
   gap: 4px;
-  font-size: 0.8125rem;
 
   svg {
     min-width: 16px;

webview/src/experiments/util/buildDynamicColumns.tsx

@@ -97,7 +97,6 @@ const Cell: React.FC<Cell<Experiment, CellValue>> = cell => {
     <Tooltip
       content={<CellTooltip stringValue={stringValue} />}
       placement="bottom-end"
-      arrow={true}
       delay={[CELL_TOOLTIP_DELAY, 0]}
       interactive={true}
     >

webview/src/plots/components/styles.module.scss

@@ -365,7 +365,7 @@ $gap: 20px;
 
 .infoTooltip {
   max-width: 220px;
-  padding: 12px 8px;
+  padding: 7px 3px;
   white-space: normal;
   display: flex;
   gap: 4px;

webview/src/shared/components/contextMenu/ContextMenu.tsx

@@ -52,11 +52,11 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
   trigger = 'contextmenu'
 }) => (
   <Tooltip
-    arrow
     trigger={trigger}
     delay={[100, 200]}
     placement={'bottom'}
     interactive
+    isContextMenu={true}
     onTrigger={positionContextMenuAndDisableEvents}
     content={content}
     onShow={onShow}

webview/src/shared/components/iconMenu/IconMenu.tsx

@@ -3,7 +3,6 @@ import { useSingleton } from '@tippyjs/react'
 import { IconMenuItem, IconMenuItemProps } from './IconMenuItem'
 import styles from './styles.module.scss'
 import Tooltip from '../tooltip/Tooltip'
-import tooltipStyles from '../tooltip/styles.module.scss'
 
 interface IconMenuProps {
   items: IconMenuItemProps[]
@@ -29,7 +28,6 @@ export const IconMenu: React.FC<IconMenuProps> = ({ items }) => {
 
   return (
     <Tooltip
-      className={tooltipStyles.padded}
       singleton={tooltipSource}
       placement="bottom-end"
       popperOptions={popperOptions}

webview/src/shared/components/tooltip/Tooltip.tsx

@@ -8,7 +8,7 @@ export const CELL_TOOLTIP_DELAY = 1000
 
 const TooltipRenderFunction: React.ForwardRefRenderFunction<
   unknown,
-  TippyProps
+  TippyProps & { isContextMenu?: boolean }
 > = (
   {
     children,
@@ -27,19 +27,23 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
     hideOnClick,
     onTrigger,
     appendTo,
-    animation = false,
-    className = typeof content === 'string' ? styles.padded : undefined,
-    arrow = false
+    isContextMenu = false,
+    animation = false
   },
   ref
 ) => (
   <Tippy
+    arrow={false}
     animation={animation}
     appendTo={appendTo}
-    content={content}
-    className={className}
+    content={
+      isContextMenu ? (
+        content
+      ) : (
+        <div className={styles.tooltipContent}>{content}</div>
+      )
+    }
     placement={placement}
-    arrow={arrow}
     delay={delay}
     disabled={disabled}
     popperOptions={popperOptions}

webview/src/shared/components/tooltip/styles.module.scss

@@ -1,13 +1,9 @@
+$tooltip-border: var(--vscode-editorHoverWidget-border);
 $vscode-drop-shadow: drop-shadow(0 0 4px var(--vscode-widget-shadow));
 $foreground: var(--vscode-quickInput-foreground);
 $background: var(--vscode-quickInput-background);
 $font: var(--vscode-font-family);
 
-:global(.tippy-box).padded {
-  & > :global(.tippy-content) {
-    padding: 2px 6px;
-  }
-}
 :global(.tippy-box) {
   filter: $vscode-drop-shadow;
   font-family: $font;
@@ -30,3 +26,17 @@ $font: var(--vscode-font-family);
     z-index: 2;
   }
 }
+
+.tooltipContent {
+  border: 1px solid $tooltip-border;
+  white-space: pre-wrap;
+  padding: 5px;
+  display: flex;
+  gap: 4px;
+  font-size: 0.8125rem;
+
+  svg {
+    min-width: 16px;
+    min-height: 16px;
+  }
+}

webview/src/shared/variables.scss

@@ -20,6 +20,7 @@ $header-bg-color: $bg-color;
 $header-border-color: $border-color;
 $meta-cell-color: var(--vscode-descriptionForeground);
 $header-resizer-color: var(--vscode-sash-hoverBorder);
+$tooltip-border: var(--vscode-editorHoverWidget-border);
 
 $hover-background-color: var(--vscode-list-hoverBackground);
 $row-hover-background-color: var(--vscode-list-hoverBackground);