refactor: add shared arrow styles on range tooltip

mgadewoll · mgadewoll · commit f5eecac9c3ea · 2024-12-13T09:53:10.000+01:00
diff --git a/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap b/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`EuiRange allows value prop to accept a number 1`] = `
       class="euiRangeTooltip emotion-euiRangeTooltip"
     >
       <output
-        class="euiRangeTooltip__value emotion-euiRangeTooltip__value-right"
+        class="euiRangeTooltip__value emotion-euiRangeTooltip__value-right-right"
         style="inset-inline-start: 8%;"
       >
         8
@@ -619,7 +619,7 @@ exports[`EuiRange props value should render 1`] = `
       class="euiRangeTooltip emotion-euiRangeTooltip"
     >
       <output
-        class="euiRangeTooltip__value emotion-euiRangeTooltip__value-left"
+        class="euiRangeTooltip__value emotion-euiRangeTooltip__value-left-left"
         style="inset-inline-end: 0%;"
       >
         before
diff --git a/packages/eui/src/components/form/range/range_tooltip.styles.ts b/packages/eui/src/components/form/range/range_tooltip.styles.ts
@@ -8,8 +8,9 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../../services';
-import { euiRangeVariables } from './range.styles';
 import { euiFontSize, mathWithUnits } from '../../../global_styling';
+import { _popoverArrowStyles } from '../../../services/popover';
+import { euiRangeVariables } from './range.styles';
 
 export const euiRangeTooltipStyles = (euiThemeContext: UseEuiTheme) => {
   const range = euiRangeVariables(euiThemeContext);
@@ -32,13 +33,15 @@ export const euiRangeTooltipStyles = (euiThemeContext: UseEuiTheme) => {
 
 export const euiRangeTooltipValueStyles = (euiThemeContext: UseEuiTheme) => {
   const range = euiRangeVariables(euiThemeContext);
-  const { euiTheme } = euiThemeContext;
-
-  const arrowSize = euiTheme.size.m;
-  const arrowSizeInt = parseInt(arrowSize, 10);
-  const arrowMinusSize = `${(arrowSizeInt / 2 - 1) * -1}px`; // Shift arrow 1px more than half its size to account for border radius
+  const { euiTheme, colorMode } = euiThemeContext;
 
   const toolTipBackgroundColor = euiTheme.components.tooltipBackground;
+  const borderColor =
+    colorMode === 'DARK' ? toolTipBackgroundColor : 'transparent';
+
+  const arrowSize = euiTheme.size.m;
+  const arrowOffset = euiTheme.size.l;
+  const arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);
 
   return {
     euiRangeTooltip__value: css`
@@ -47,42 +50,39 @@ export const euiRangeTooltipValueStyles = (euiThemeContext: UseEuiTheme) => {
       max-inline-size: ${mathWithUnits(euiTheme.size.base, (x) => x * 16)};
       padding-block: ${euiTheme.size.xxs};
       padding-inline: ${euiTheme.size.s};
-      transform: translateX(0) translateY(-50%);
+      transform: translateY(-50%);
 
       ${euiFontSize(euiThemeContext, 's')}
       line-height: ${euiFontSize(euiThemeContext, 's').lineHeight};
       color: ${euiTheme.colors.ghost};
       background-color: ${toolTipBackgroundColor};
       border: ${euiTheme.border.width.thin} solid ${toolTipBackgroundColor};
+      border: ${euiTheme.border.width.thin} solid ${borderColor};
       border-radius: ${euiTheme.border.radius.small};
 
       &::before {
         content: '';
-        position: absolute;
-        inset-block-end: 50%;
-        inline-size: ${arrowSize};
-        block-size: ${arrowSize};
-        transform-origin: center;
-        transform: translateY(50%) rotateZ(45deg);
-        background-color: ${toolTipBackgroundColor};
-        border-radius: ${mathWithUnits(
-          euiTheme.border.radius.small,
-          (x) => x / 2
-        )};
+        ${arrowStyles._arrowStyles}
+        inset-block-start: 50%;
+        margin-block-start: ${mathWithUnits(arrowSize, (x) => x / -2)};
+        background-color: inherit;
+        border: inherit;
       }
     `,
     left: css`
-      margin-inline-end: ${euiTheme.size.l};
+      margin-inline-end: ${arrowOffset};
 
       &::before {
-        inset-inline-end: ${arrowMinusSize};
+        ${arrowStyles.positions.left}
+        inset-inline-start: 100%;
       }
     `,
     right: css`
-      margin-inline-start: ${euiTheme.size.l};
+      margin-inline-start: ${arrowOffset};
 
       &::before {
-        inset-inline-start: ${arrowMinusSize};
+        ${arrowStyles.positions.right}
+        inset-inline-end: 100%;
       }
     `,
     hasTicks: css`

Original file line number	Diff line number	Diff line change
@@ -22,7 +22,7 @@ exports[`EuiRange allows value prop to accept a number 1`] = `
`22`	`22`	`class="euiRangeTooltip emotion-euiRangeTooltip"`
`23`	`23`	`>`
`24`	`24`	`<output`
`25`		`- class="euiRangeTooltip__value emotion-euiRangeTooltip__value-right"`
	`25`	`+ class="euiRangeTooltip__value emotion-euiRangeTooltip__value-right-right"`
`26`	`26`	`style="inset-inline-start: 8%;"`
`27`	`27`	`>`
`28`	`28`	`8`
@@ -619,7 +619,7 @@ exports[`EuiRange props value should render 1`] = `
`619`	`619`	`class="euiRangeTooltip emotion-euiRangeTooltip"`
`620`	`620`	`>`
`621`	`621`	`<output`
`622`		`- class="euiRangeTooltip__value emotion-euiRangeTooltip__value-left"`
	`622`	`+ class="euiRangeTooltip__value emotion-euiRangeTooltip__value-left-left"`
`623`	`623`	`style="inset-inline-end: 0%;"`
`624`	`624`	`>`
`625`	`625`	`before`