fix(tooltip): opac color in tooltip to match chart

elastic · Jun 8, 2020 · 58cf176 · 58cf176
1 parent 0a91351
commit 58cf176
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 13 deletions.
diff --git a/.playground/playground.tsx b/.playground/playground.tsx
@@ -19,7 +19,7 @@
 
 import React from 'react';
 
-import { Example } from '../stories/treemap/6_custom_style';
+import { Example } from '../stories/stylings/20_partition_background';
 
 export class Playground extends React.Component {
   render() {

diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
@@ -19,10 +19,28 @@
 
   &__item {
     display: flex;
-    padding: 3px;
-    box-sizing: border-box;
-    border-left: $euiSizeXS solid transparent;
     min-width: 1px;
+
+    &--container {
+      display: flex;
+      padding: 3px;
+      padding-left: 0;
+      min-width: 1px;
+    }
+
+    &--backgroundColor {
+      position: relative;
+      width: $euiSizeXS;
+      margin-right: 3px;
+    }
+
+    &--color {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
 
   &__label {

diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
@@ -26,6 +26,7 @@ import { TooltipValueFormatter, TooltipSettings, TooltipValue } from '../../spec
 import { onPointerMove } from '../../state/actions/mouse';
 import { GlobalChartState, BackwardRef } from '../../state/chart_state';
 import { getChartRotationSelector } from '../../state/selectors/get_chart_rotation';
+import { getChartThemeSelector } from '../../state/selectors/get_chart_theme';
 import { getInternalIsInitializedSelector } from '../../state/selectors/get_internal_is_intialized';
 import { getInternalIsTooltipVisibleSelector } from '../../state/selectors/get_internal_is_tooltip_visible';
 import { getInternalTooltipAnchorPositionSelector } from '../../state/selectors/get_internal_tooltip_anchor_position';
@@ -48,6 +49,7 @@ interface TooltipStateProps {
   settings: TooltipSettings;
   rotation: Rotation;
   chartId: string;
+  backgroundColor: string;
 }
 
 interface TooltipOwnProps {
@@ -66,6 +68,7 @@ const TooltipComponent = ({
   rotation,
   chartId,
   onPointerMove,
+  backgroundColor,
 }: TooltipProps) => {
   const chartRef = getChartContainerRef();
 
@@ -109,15 +112,24 @@ const TooltipComponent = ({
                 borderLeftColor: color,
               }}
             >
-              <span className="echTooltip__label">{label}</span>
-              <span className="echTooltip__value">{value}</span>
-              {markValue && (
-                <span className="echTooltip__markValue">
-                  &nbsp;(
-                  {markValue}
-                  )
-                </span>
-              )}
+              <div className="echTooltip__item--backgroundColor" style={{ backgroundColor }}>
+                <div
+                  className="echTooltip__item--color"
+                  style={{ backgroundColor: color }}
+                />
+              </div>
+
+              <div className="echTooltip__item--container">
+                <span className="echTooltip__label">{label}</span>
+                <span className="echTooltip__value">{value}</span>
+                {markValue && (
+                  <span className="echTooltip__markValue">
+                    &nbsp;(
+                    {markValue}
+                    )
+                  </span>
+                )}
+              </div>
             </div>
           );
         },
@@ -204,6 +216,7 @@ const HIDDEN_TOOLTIP_PROPS = {
   settings: {},
   rotation: 0 as Rotation,
   chartId: '',
+  backgroundColor: 'transparent',
 };
 
 const mapDispatchToProps = (dispatch: Dispatch): TooltipDispatchProps =>
@@ -221,6 +234,7 @@ const mapStateToProps = (state: GlobalChartState): TooltipStateProps => {
     settings: getSettingsSpecSelector(state).tooltip,
     rotation: getChartRotationSelector(state),
     chartId: state.chartId,
+    backgroundColor: getChartThemeSelector(state).background.color,
   };
 };