push border into global style

iterative · Sep 8, 2022 · d29e216 · d29e216
1 parent 302df83
commit d29e216
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 6 deletions.
diff --git a/webview/src/experiments/components/overflowHoverTooltip/OverflowHoverTooltip.tsx b/webview/src/experiments/components/overflowHoverTooltip/OverflowHoverTooltip.tsx
@@ -1,6 +1,5 @@
 import { TippyProps } from '@tippyjs/react'
 import React, { useRef } from 'react'
-import styles from './styles.module.scss'
 import { useIsFullyContained } from './useIsFullyContained'
 import Tooltip, {
   HEADER_TOOLTIP_DELAY
@@ -13,7 +12,7 @@ export const OverflowHoverTooltip: React.FC<
   const isDisabled = useIsFullyContained(wrapperRef)
   return (
     <Tooltip
-      content={<div className={styles.overflowTooltip}>{content}</div>}
+      content={content}
       placement="bottom-start"
       disabled={isDisabled}
       delay={HEADER_TOOLTIP_DELAY}

diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
@@ -648,11 +648,9 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
 }
 
 .errorTooltip {
-  border: 1px solid $tooltip-border;
   white-space: pre-wrap;
   display: flex;
   gap: 4px;
-  font-size: 0.8125rem;
 
   svg {
     min-width: 16px;

diff --git a/webview/src/shared/components/contextMenu/ContextMenu.tsx b/webview/src/shared/components/contextMenu/ContextMenu.tsx
@@ -57,6 +57,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
     delay={[100, 200]}
     placement={'bottom'}
     interactive
+    isContextMenu={true}
     onTrigger={positionContextMenuAndDisableEvents}
     content={content}
     onShow={onShow}

diff --git a/webview/src/shared/components/tooltip/Tooltip.tsx b/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,6 +27,7 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
     hideOnClick,
     onTrigger,
     appendTo,
+    isContextMenu = false,
     animation = false,
     className = typeof content === 'string' ? styles.padded : undefined,
     arrow = false
@@ -36,7 +37,13 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
   <Tippy
     animation={animation}
     appendTo={appendTo}
-    content={content}
+    content={
+      isContextMenu ? (
+        content
+      ) : (
+        <div className={styles.tooltipContent}>{content}</div>
+      )
+    }
     className={className}
     placement={placement}
     arrow={arrow}

diff --git a/webview/src/shared/components/tooltip/styles.module.scss b/webview/src/shared/components/tooltip/styles.module.scss
@@ -1,3 +1,4 @@
+$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);
@@ -30,3 +31,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;
+  }
+}