fix(tooltip): show true opaque colors in tooltips (#629)

fixes #628
elastic · Jun 10, 2020 · 23290be · 23290be
1 parent 0a91351
commit 23290be
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 14 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/bar/23_bar_chart_2y2g';
 
 export class Playground extends React.Component {
   render() {

diff --git a/...ons-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png b/...ons-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png
diff --git a/...ctions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png b/...ctions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -1,3 +1,6 @@
 module.exports = {
-  '*.{js,ts,tsx}': ['yarn lint:fix'],
+  // TODO: make this `lint:fix` if ever added to `pre-commit`
+  // using in `commit-msg` doesn't save fixed changes so
+  // in the meantime should error on bad linting when committing
+  '*.{js,ts,tsx}': ['yarn lint'],
 };
diff --git a/src/components/tooltip/_tooltip.scss b/src/components/tooltip/_tooltip.scss
@@ -19,10 +19,29 @@
 
   &__item {
     display: flex;
-    padding: 3px;
-    box-sizing: border-box;
-    border-left: $euiSizeXS solid transparent;
     min-width: 1px;
+
+    &--container {
+      display: flex;
+      flex: 1 1 auto;
+      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,
   };
 };