diff --git a/.playground/playground.tsx b/.playground/playground.tsx index d123c98912..0fa64ff4c0 100644 --- 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/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png index 701b6310e2..c9b3252258 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png index b72819ff07..9e9f844424 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png differ diff --git a/lint-staged.config.js b/lint-staged.config.js index 3f937a0b7d..90eaa8d7d6 100644 --- 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 index ce7d734e4a..c7633158a2 100644 --- 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 index 8b776b6dbd..f66c6a4968 100644 --- 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, }} > - {label} - {value} - {markValue && ( - - ( - {markValue} - ) - - )} +