Charts: Deprecate themeVariant prop for light / dark themes

packages/react-charts/src/components/Chart/Chart.tsx

@@ -404,7 +404,7 @@ export interface ChartProps extends VictoryChartProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -430,10 +430,11 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
   padding,
   showAxis = true,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
 
   // destructure last
-  theme = getChartTheme(themeColor, themeVariant, showAxis),
+  theme = getChartTheme(themeColor, showAxis),
   containerComponent = <ChartContainer />,
   legendOrientation = theme.legend.orientation as ChartLegendOrientation,
   height = theme.chart.height,

packages/react-charts/src/components/ChartArea/ChartArea.tsx

@@ -386,7 +386,7 @@ export interface ChartAreaProps extends VictoryAreaProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -434,10 +434,11 @@ export interface ChartAreaProps extends VictoryAreaProps {
 export const ChartArea: React.FunctionComponent<ChartAreaProps> = ({
   containerComponent = <ChartContainer />,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
 
   // destructure last
-  theme = getTheme(themeColor, themeVariant),
+  theme = getTheme(themeColor),
 
   ...rest
 }: ChartAreaProps) => {

packages/react-charts/src/components/ChartArea/examples/ChartArea.md

@@ -12,7 +12,7 @@ propComponents: [
 hideDarkMode: true
 ---
 
-import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartThemeVariant, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts';
+import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer, getResizeObserver } from '@patternfly/react-charts';
 import '@patternfly/patternfly/patternfly-charts.css';
 
 ## Introduction

packages/react-charts/src/components/ChartAxis/ChartAxis.tsx

@@ -385,7 +385,7 @@ export interface ChartAxisProps extends VictoryAxisProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -446,10 +446,11 @@ export const ChartAxis: React.FunctionComponent<ChartAxisProps> = ({
   containerComponent = <ChartContainer />,
   showGrid = false,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
 
   // destructure last
-  theme = getTheme(themeColor, themeVariant),
+  theme = getTheme(themeColor),
   ...rest
 }: ChartAxisProps) => {
   // Clone so users can override container props
@@ -459,13 +460,7 @@ export const ChartAxis: React.FunctionComponent<ChartAxisProps> = ({
   });
 
   // Note: containerComponent is required for theme
-  return (
-    <VictoryAxis
-      containerComponent={container}
-      theme={showGrid ? getAxisTheme(themeColor, themeVariant) : theme}
-      {...rest}
-    />
-  );
+  return <VictoryAxis containerComponent={container} theme={showGrid ? getAxisTheme(themeColor) : theme} {...rest} />;
 };
 ChartAxis.displayName = 'ChartAxis';
 

packages/react-charts/src/components/ChartBar/ChartBar.tsx

@@ -422,7 +422,7 @@ export interface ChartBarProps extends VictoryBarProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -470,10 +470,11 @@ export interface ChartBarProps extends VictoryBarProps {
 export const ChartBar: React.FunctionComponent<ChartBarProps> = ({
   containerComponent = <ChartContainer />,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
 
   // destructure last
-  theme = getTheme(themeColor, themeVariant),
+  theme = getTheme(themeColor),
   ...rest
 }: ChartBarProps) => {
   // Clone so users can override container props

packages/react-charts/src/components/ChartBullet/ChartBullet.tsx

@@ -445,7 +445,7 @@ export interface ChartBulletProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -518,6 +518,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
   standalone = true,
   subTitle,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
   title,
   titleComponent = <ChartBulletTitle />,
@@ -536,8 +537,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     primarySegmentedMeasureLegendData,
     qualitativeRangeData,
     qualitativeRangeLegendData,
-    themeColor,
-    themeVariant
+    themeColor
   }),
   domain = getBulletDomain({
     comparativeErrorMeasureComponent,
@@ -676,7 +676,6 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     size: getPrimaryDotMeasureSize({ height: chartSize.height, horizontal, width: chartSize.width }),
     standalone: false,
     themeColor,
-    themeVariant,
     width: chartSize.width,
     y: primaryDotMeasureDataY,
     ...primaryDotMeasureComponent.props
@@ -697,7 +696,6 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     padding,
     standalone: false,
     themeColor,
-    themeVariant,
     width: chartSize.width,
     y: primarySegmentedMeasureDataY,
     ...primarySegmentedMeasureComponent.props

packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx

@@ -147,7 +147,7 @@ export interface ChartBulletComparativeErrorMeasureProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -185,11 +185,12 @@ export const ChartBulletComparativeErrorMeasure: React.FunctionComponent<ChartBu
   padding,
   standalone = true,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
   y,
 
   // destructure last
-  theme = getBulletComparativeErrorMeasureTheme(themeColor, themeVariant),
+  theme = getBulletComparativeErrorMeasureTheme(themeColor),
   height = theme.bar.height,
   width = theme.bar.width
 }: ChartBulletComparativeErrorMeasureProps) => {

packages/react-charts/src/components/ChartBullet/ChartBulletComparativeMeasure.tsx

@@ -149,7 +149,7 @@ export interface ChartBulletComparativeMeasureProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -186,11 +186,12 @@ export const ChartBulletComparativeMeasure: React.FunctionComponent<ChartBulletC
   padding,
   standalone = true,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
   y,
 
   // destructure last
-  theme = getBulletComparativeMeasureTheme(themeColor, themeVariant),
+  theme = getBulletComparativeMeasureTheme(themeColor),
   height = theme.bar.height,
   width = theme.bar.width,
   labelComponent = <ChartTooltip />

packages/react-charts/src/components/ChartBullet/ChartBulletComparativeWarningMeasure.tsx

@@ -147,7 +147,7 @@ export interface ChartBulletComparativeWarningMeasureProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -185,11 +185,12 @@ export const ChartBulletComparativeWarningMeasure: React.FunctionComponent<Chart
   padding,
   standalone = true,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
   y,
 
   // destructure last
-  theme = getBulletComparativeWarningMeasureTheme(themeColor, themeVariant),
+  theme = getBulletComparativeWarningMeasureTheme(themeColor),
   height = theme.bar.height,
   width = theme.bar.width
 }: ChartBulletComparativeWarningMeasureProps) => {

packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx

@@ -97,7 +97,7 @@ export interface ChartBulletGroupTitleProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -126,12 +126,13 @@ export const ChartBulletGroupTitle: React.FunctionComponent<ChartBulletGroupTitl
   standalone = true,
   subTitle,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
   title,
   titleComponent = <ChartLabel />,
 
   // destructure last
-  theme = getBulletGroupTitleTheme(themeColor, themeVariant),
+  theme = getBulletGroupTitleTheme(themeColor),
   height = theme.chart.height,
   width = theme.chart.width
 }: ChartBulletGroupTitleProps) => {

packages/react-charts/src/components/ChartBullet/ChartBulletPrimaryDotMeasure.tsx

@@ -147,7 +147,7 @@ export interface ChartBulletPrimaryDotMeasureProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -194,12 +194,13 @@ export const ChartBulletPrimaryDotMeasure: React.FunctionComponent<ChartBulletPr
   size = ChartBulletStyles.primaryDotMeasureSize,
   standalone = true,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
   y,
   y0,
 
   // destructure last
-  theme = getBulletPrimaryDotMeasureTheme(themeColor, themeVariant),
+  theme = getBulletPrimaryDotMeasureTheme(themeColor),
   labelComponent = <ChartTooltip />,
   height = theme.group.height,
   width = theme.group.width

packages/react-charts/src/components/ChartBullet/ChartBulletPrimarySegmentedMeasure.tsx

@@ -163,7 +163,7 @@ export interface ChartBulletPrimarySegmentedMeasureProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -210,13 +210,14 @@ export const ChartBulletPrimarySegmentedMeasure: React.FunctionComponent<ChartBu
   padding,
   standalone = true,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
   y,
   y0,
 
   // destructure last
-  theme = getBulletPrimarySegmentedMeasureTheme(themeColor, themeVariant),
-  negativeMeasureTheme = getBulletPrimaryNegativeMeasureTheme(themeColor, themeVariant),
+  theme = getBulletPrimarySegmentedMeasureTheme(themeColor),
+  negativeMeasureTheme = getBulletPrimaryNegativeMeasureTheme(themeColor),
   height = theme.group.height,
   width = theme.group.width,
   labelComponent = <ChartTooltip />

packages/react-charts/src/components/ChartBullet/ChartBulletQualitativeRange.tsx

@@ -153,7 +153,7 @@ export interface ChartBulletQualitativeRangeProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -200,12 +200,13 @@ export const ChartBulletQualitativeRange: React.FunctionComponent<ChartBulletQua
   padding,
   standalone = true,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
   y,
   y0,
 
   // destructure last
-  theme = getBulletQualitativeRangeTheme(themeColor, themeVariant),
+  theme = getBulletQualitativeRangeTheme(themeColor),
   height = theme.group.height,
   width = theme.group.width,
   labelComponent = <ChartTooltip />

packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx

@@ -99,7 +99,7 @@ export interface ChartBulletTitleProps {
    *
    * Note: Not compatible with theme prop
    *
-   * @example themeVariant={ChartThemeVariant.light}
+   * @deprecated Use PatternFly's pf-theme-dark CSS selector
    */
   themeVariant?: string;
   /**
@@ -135,13 +135,14 @@ export const ChartBulletTitle: React.FunctionComponent<ChartBulletTitleProps> =
   standalone = true,
   subTitle,
   themeColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   themeVariant,
   title,
   titleComponent = <ChartLabel />,
   titlePosition,
 
   // destructure last
-  theme = getBulletTheme(themeColor, themeVariant),
+  theme = getBulletTheme(themeColor),
   height = horizontal ? theme.chart.height : theme.chart.width,
   width = horizontal ? theme.chart.width : theme.chart.height
 }: ChartBulletTitleProps) => {