[charts] Fix axis highlight in dark mode (mui#10820)

louise-davies · Oct 27, 2023 · 569a9c4 · 569a9c4
1 parent 5505a59
commit 569a9c4
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 23 deletions.
diff --git a/docs/pages/x/api/charts/charts-axis-highlight.json b/docs/pages/x/api/charts/charts-axis-highlight.json
@@ -6,7 +6,7 @@
     "import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';",
     "import { ChartsAxisHighlight } from '@mui/x-charts';"
   ],
-  "styles": { "classes": [], "globalClasses": {}, "name": "MuiChartsAxisHighlight" },
+  "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiChartsAxisHighlight" },
   "filename": "/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx",
   "demos": "<ul></ul>"
 }
diff --git a/docs/translations/api-docs/charts/charts-axis-highlight.json b/docs/translations/api-docs/charts/charts-axis-highlight.json
@@ -1,6 +1,6 @@
 {
   "componentDescription": "",
   "propDescriptions": {},
-  "classDescriptions": {},
+  "classDescriptions": { "root": { "description": "Styles applied to the root element." } },
   "slotDescriptions": {}
 }
diff --git a/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx b/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx
@@ -1,10 +1,54 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { styled } from '@mui/material/styles';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { isBandScale } from '../internals/isBandScale';
 
+export interface ChartsAxisHighlightClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+
+export type ChartsAxisHighlightClassKey = keyof ChartsAxisHighlightClasses;
+
+export function getAxisHighlightUtilityClass(slot: string) {
+  return generateUtilityClass('MuiChartsAxisHighlight', slot);
+}
+
+export const chartsAxisHighlightClasses: ChartsAxisHighlightClasses = generateUtilityClasses(
+  'MuiChartsAxisHighlight',
+  ['root'],
+);
+
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, getAxisHighlightUtilityClass);
+};
+
+export const ChartsAxisHighlightPath = styled('path', {
+  name: 'MuiChartsAxisHighlight',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root,
+})<{ ownerState: { axisHighlight: AxisHighlight } }>(({ ownerState, theme }) => ({
+  pointerEvents: 'none',
+  ...(ownerState.axisHighlight === 'band' && {
+    fill: theme.palette.mode === 'light' ? 'gray' : 'white',
+    fillOpacity: 0.1,
+  }),
+  ...(ownerState.axisHighlight === 'line' && {
+    strokeDasharray: '5 2',
+    stroke: theme.palette.mode === 'light' ? '#000000' : '#ffffff',
+  }),
+}));
+
 type AxisHighlight = 'none' | 'line' | 'band';
 
 export type ChartsAxisHighlightProps = {
@@ -15,6 +59,7 @@ export type ChartsAxisHighlightProps = {
 function ChartsAxisHighlight(props: ChartsAxisHighlightProps) {
   const { x: xAxisHighlight, y: yAxisHighlight } = props;
   const { xAxisIds, xAxis, yAxisIds, yAxis } = React.useContext(CartesianContext);
+  const classes = useUtilityClasses();
 
   const USED_X_AXIS_ID = xAxisIds[0];
   const USED_Y_AXIS_ID = yAxisIds[0];
@@ -29,50 +74,46 @@ function ChartsAxisHighlight(props: ChartsAxisHighlightProps) {
   return (
     <React.Fragment>
       {xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && (
-        <path
+        <ChartsAxisHighlightPath
           d={`M ${xScale(axis.x.value)! - (xScale.step() - xScale.bandwidth()) / 2} ${
             yScale.range()[0]
           } l ${xScale.step()} 0 l 0 ${
             yScale.range()[1] - yScale.range()[0]
           } l ${-xScale.step()} 0 Z`}
-          fill="gray"
-          fillOpacity={0.1}
-          style={{ pointerEvents: 'none' }}
+          className={classes.root}
+          ownerState={{ axisHighlight: 'band' }}
         />
       )}
 
       {yAxisHighlight === 'band' && axis.y !== null && isBandScale(yScale) && (
-        <path
+        <ChartsAxisHighlightPath
           d={`M ${xScale.range()[0]} ${
             yScale(axis.y.value)! - (yScale.step() - yScale.bandwidth()) / 2
           } l 0 ${yScale.step()} l ${
             xScale.range()[1] - xScale.range()[0]
           } 0 l 0 ${-yScale.step()} Z`}
-          fill="gray"
-          fillOpacity={0.1}
-          style={{ pointerEvents: 'none' }}
+          className={classes.root}
+          ownerState={{ axisHighlight: 'band' }}
         />
       )}
 
       {xAxisHighlight === 'line' && axis.x !== null && (
-        <path
+        <ChartsAxisHighlightPath
           d={`M ${getXPosition(axis.x.value)} ${yScale.range()[0]} L ${getXPosition(
             axis.x.value,
           )} ${yScale.range()[1]}`}
-          stroke="black"
-          strokeDasharray="5 2"
-          style={{ pointerEvents: 'none' }}
+          className={classes.root}
+          ownerState={{ axisHighlight: 'line' }}
         />
       )}
 
       {yAxisHighlight === 'line' && axis.y !== null && (
-        <path
+        <ChartsAxisHighlightPath
           d={`M ${xScale.range()[0]} ${getYPosition(axis.y.value)} L ${
             xScale.range()[1]
           } ${getYPosition(axis.y.value)}`}
-          stroke="black"
-          strokeDasharray="5 2"
-          style={{ pointerEvents: 'none' }}
+          className={classes.root}
+          ownerState={{ axisHighlight: 'line' }}
         />
       )}
     </React.Fragment>

diff --git a/packages/x-charts/src/themeAugmentation/components.d.ts b/packages/x-charts/src/themeAugmentation/components.d.ts
@@ -13,6 +13,7 @@ export interface ChartsComponents {
   };
   MuiChartsAxisHighlight?: {
     defaultProps?: ComponentsProps['MuiChartsAxisHighlight'];
+    styleOverrides?: ComponentsOverrides['MuiChartsAxisHighlight'];
   };
   MuiChartsClipPath?: {
     defaultProps?: ComponentsProps['MuiChartsClipPath'];

diff --git a/packages/x-charts/src/themeAugmentation/overrides.d.ts b/packages/x-charts/src/themeAugmentation/overrides.d.ts
@@ -1,11 +1,13 @@
 import { BarElementClassKey } from '../BarChart/BarElement';
 import { ChartsAxisClassKey } from '../ChartsAxis';
+import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight';
 import { ChartsLegendClassKey } from '../ChartsLegend';
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';
 
 // prettier-ignore
 export interface PickersComponentNameToClassKey {
   MuiChartsAxis: ChartsAxisClassKey;
+  MuiChartsAxisHighlight: ChartsAxisHighlightClassKey;
   MuiChartsLegend: ChartsLegendClassKey;
 
   // BarChart components

diff --git a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts
@@ -34,11 +34,11 @@ createTheme({
         // @ts-expect-error invalid MuiChartsAxisHighlight prop
         someRandomProp: true,
       },
-      // styleOverrides: {
-      //   root: { backgroundColor: 'red' },
-      //   // @ts-expect-error invalid MuiChartsAxisHighlight class key
-      //   constent: { color: 'red' },
-      // },
+      styleOverrides: {
+        root: { backgroundColor: 'red' },
+        // @ts-expect-error invalid MuiChartsAxisHighlight class key
+        constent: { color: 'red' },
+      },
     },
     MuiChartsClipPath: {
       defaultProps: {

diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json
@@ -25,6 +25,10 @@
   { "name": "ChartsAxisClasses", "kind": "Interface" },
   { "name": "ChartsAxisClassKey", "kind": "TypeAlias" },
   { "name": "ChartsAxisHighlight", "kind": "Function" },
+  { "name": "chartsAxisHighlightClasses", "kind": "Variable" },
+  { "name": "ChartsAxisHighlightClasses", "kind": "Interface" },
+  { "name": "ChartsAxisHighlightClassKey", "kind": "TypeAlias" },
+  { "name": "ChartsAxisHighlightPath", "kind": "Variable" },
   { "name": "ChartsAxisHighlightProps", "kind": "TypeAlias" },
   { "name": "ChartsAxisProps", "kind": "Interface" },
   { "name": "ChartsClipPath", "kind": "Function" },
@@ -58,6 +62,7 @@
   { "name": "DrawingProvider", "kind": "Function" },
   { "name": "FadeOptions", "kind": "TypeAlias" },
   { "name": "getAreaElementUtilityClass", "kind": "Function" },
+  { "name": "getAxisHighlightUtilityClass", "kind": "Function" },
   { "name": "getAxisUtilityClass", "kind": "Function" },
   { "name": "getHighlightElementUtilityClass", "kind": "Function" },
   { "name": "getLineElementUtilityClass", "kind": "Function" },