From a80200ac131fec98f919d0ae57a5758206c337f3 Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Wed, 4 May 2022 19:21:14 -0400
Subject: [PATCH] fix(charts): Add style for tooltip cursor

https://github.com/patternfly/patternfly-react/issues/7360
---
 .../ChartCursorContainer/ChartCursorContainer.tsx | 15 ++++++++++++++-
 .../src/components/ChartUtils/chart-container.tsx | 11 +++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx
index 066793f0d44..a46ea8e7af5 100644
--- a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx
+++ b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx
@@ -1,6 +1,9 @@
+/* eslint-disable camelcase */
+import chart_global_label_Fill from '@patternfly/react-tokens/dist/esm/chart_global_label_Fill';
+
 import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { CallbackArgs, CoordinatesPropType, OriginType } from 'victory-core';
+import { CallbackArgs, CoordinatesPropType, LineSegment, OriginType } from 'victory-core';
 import {
   CursorCoordinatesPropType,
   VictoryCursorContainer,
@@ -201,6 +204,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps {
 
 export const ChartCursorContainer: React.FunctionComponent<ChartCursorContainerProps> = ({
   className,
+  cursorComponent = <LineSegment />,
   themeColor,
   themeVariant,
 
@@ -215,11 +219,20 @@ export const ChartCursorContainer: React.FunctionComponent<ChartCursorContainerP
     ...cursorLabelComponent.props
   });
 
+  // Clone so users can override cursor container props
+  const cursor = React.cloneElement(cursorComponent, {
+    style: {
+      strokeColor: chart_global_label_Fill.value
+    },
+    ...cursorComponent.props
+  });
+
   // Note: theme is required by voronoiContainerMixin
   return (
     // Note: className is valid, but Victory is missing a type
     <VictoryCursorContainer
       className={chartClassName}
+      cursorComponent={cursor}
       cursorLabelComponent={chartCursorLabelComponent}
       theme={theme}
       {...rest}
diff --git a/packages/react-charts/src/components/ChartUtils/chart-container.tsx b/packages/react-charts/src/components/ChartUtils/chart-container.tsx
index 56a25bf7d10..ff672df7780 100644
--- a/packages/react-charts/src/components/ChartUtils/chart-container.tsx
+++ b/packages/react-charts/src/components/ChartUtils/chart-container.tsx
@@ -1,7 +1,11 @@
+/* eslint-disable camelcase */
+import chart_global_label_Fill from '@patternfly/react-tokens/dist/esm/chart_global_label_Fill';
+
 import * as React from 'react';
 import { ContainerType, createContainer as victoryCreateContainer } from 'victory-create-container';
 import { ChartCursorTooltip } from '../ChartCursorTooltip';
 import { ChartLabel } from '../ChartLabel';
+import { LineSegment } from 'victory-core';
 
 /**
  * Makes a container component with multiple behaviors. It allows you to effectively combine any two
@@ -27,6 +31,13 @@ export const createContainer = (behaviorA: ContainerType, behaviorB: ContainerTy
 
   if (isCursor) {
     container.defaultProps.cursorLabelComponent = <ChartLabel textAnchor="start" />;
+    container.defaultProps.cursorComponent = (
+      <LineSegment
+        style={{
+          stroke: chart_global_label_Fill.value
+        }}
+      />
+    );
   }
   if (isVoronoi) {
     container.defaultProps.labelComponent = <ChartCursorTooltip />;