Add some theme augmentation

mui · Feb 15, 2024 · 28e4c7b · 28e4c7b
1 parent e2f8137
commit 28e4c7b
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 6 deletions.
diff --git a/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx b/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx
@@ -4,10 +4,9 @@ import { ChartsXReferenceLine, ChartsXReferenceLineProps } from './ChartsXRefere
 import { ChartsYReferenceLine, ChartsYReferenceLineProps } from './ChartsYReferenceLine';
 import { XOR } from '../internals/utils';
 
-type ChartsReferenceLineProps<TValue extends string | number | Date = string | number | Date> = XOR<
-  ChartsXReferenceLineProps<TValue>,
-  ChartsYReferenceLineProps<TValue>
->;
+export type ChartsReferenceLineProps<
+  TValue extends string | number | Date = string | number | Date,
+> = XOR<ChartsXReferenceLineProps<TValue>, ChartsYReferenceLineProps<TValue>>;
 
 function ChartsReferenceLine(props: ChartsReferenceLineProps) {
   const { x, y } = props;

diff --git a/packages/x-charts/src/themeAugmentation/components.d.ts b/packages/x-charts/src/themeAugmentation/components.d.ts
@@ -57,6 +57,22 @@ export interface ChartsComponents {
   MuiScatter?: {
     defaultProps?: ComponentsProps['MuiScatter'];
   };
+  MuiPieArc?: {
+    defaultProps?: ComponentsProps['MuiPieArc'];
+    styleOverrides?: ComponentsOverrides['MuiPieArc'];
+  };
+  MuiPieArcLabel?: {
+    defaultProps?: ComponentsProps['MuiPieArcLabel'];
+    styleOverrides?: ComponentsOverrides['MuiPieArcLabel'];
+  };
+  MuiChartsReferenceLine?: {
+    defaultProps?: ComponentsProps['MuiChartsReferenceLine'];
+    styleOverrides?: ComponentsOverrides['MuiChartsReferenceLine'];
+  };
+  MuiChartsGrid?: {
+    defaultProps?: ComponentsProps['MuiChartsGrid'];
+    styleOverrides?: ComponentsOverrides['MuiChartsGrid'];
+  };
 }
 
 declare module '@mui/material/styles' {

diff --git a/packages/x-charts/src/themeAugmentation/overrides.d.ts b/packages/x-charts/src/themeAugmentation/overrides.d.ts
@@ -1,9 +1,12 @@
 import { BarElementClassKey } from '../BarChart/BarElement';
 import { ChartsAxisClassKey } from '../ChartsAxis';
 import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight';
+import { ChartsGridClassKey } from '../ChartsGrid';
 import { ChartsLegendClassKey } from '../ChartsLegend';
+import { ChartsReferenceLineClassKey } from '../ChartsReferenceLine';
 import { ChartsTooltipClassKey } from '../ChartsTooltip';
 import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart';
+import { PieArcClassKey, PieArcLabelClassKey } from '../PieChart';
 
 // prettier-ignore
 export interface PickersComponentNameToClassKey {
@@ -14,13 +17,24 @@ export interface PickersComponentNameToClassKey {
 
   // BarChart components
   MuiBarElement: BarElementClassKey;
+
   // LineChart components
-
   MuiAreaElement: AreaElementClassKey;
   MuiLineElement: LineElementClassKey;
   MuiMarkElement: MarkElementClassKey;
-  // ScatterChart components
 
+  // ScatterChart components
+
+
+  // PieChart components
+  MuiPieArc: PieArcClassKey;
+  MuiPieArcLabel: PieArcLabelClassKey;
+
+  // Reference line
+  MuiChartsReferenceLine: ChartsReferenceLineClassKey;
+
+  // Grid
+  MuiChartsGrid: ChartsGridClassKey;
 }
 
 declare module '@mui/material/styles' {

diff --git a/packages/x-charts/src/themeAugmentation/props.d.ts b/packages/x-charts/src/themeAugmentation/props.d.ts
@@ -3,11 +3,14 @@ import { BarElementProps } from '../BarChart/BarElement';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsClipPathProps } from '../ChartsClipPath';
+import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsReferenceLineProps } from '../ChartsReferenceLine';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 import { ChartsTooltipProps } from '../ChartsTooltip';
 import { AreaElementProps, LineElementProps, MarkElementProps } from '../LineChart';
 import { LineChartProps } from '../LineChart/LineChart';
+import { PieArcLabelProps, PieArcProps } from '../PieChart';
 import { ScatterProps } from '../ScatterChart/Scatter';
 import { ScatterChartProps } from '../ScatterChart/ScatterChart';
 import { ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
@@ -25,14 +28,26 @@ export interface ChartsComponentsPropsList {
   // BarChart components
   MuiBarChart: BarChartProps;
   MuiBarElement: BarElementProps;
+
   // LineChart components
   MuiLineChart: LineChartProps;
   MuiAreaElement: AreaElementProps;
   MuiLineElement: LineElementProps;
   MuiMarkElement: MarkElementProps;
+
   // ScatterChart components
   MuiScatterChart: ScatterChartProps;
   MuiScatter: ScatterProps;
+
+  // PieChart components
+  MuiPieArc: PieArcProps;
+  MuiPieArcLabel: PieArcLabelProps;
+
+  // Reference line
+  MuiChartsReferenceLine: ChartsReferenceLineProps;
+
+  // Grid
+  MuiChartsGrid: ChartsGridProps;
 }
 
 declare module '@mui/material/styles' {

diff --git a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts
@@ -188,5 +188,53 @@ createTheme({
       //   constent: { color: 'red' },
       // },
     },
+    MuiPieArc: {
+      defaultProps: {
+        id: 'toto',
+        // @ts-expect-error invalid MuiMarkElement prop
+        someRandomProp: true,
+      },
+      styleOverrides: {
+        root: { backgroundColor: 'red' },
+        // @ts-expect-error invalid MuiMarkElement class key
+        constent: { color: 'red' },
+      },
+    },
+    MuiPieArcLabel: {
+      defaultProps: {
+        id: 'toto',
+        // @ts-expect-error invalid MuiMarkElement prop
+        someRandomProp: true,
+      },
+      styleOverrides: {
+        root: { backgroundColor: 'red' },
+        // @ts-expect-error invalid MuiMarkElement class key
+        constent: { color: 'red' },
+      },
+    },
+    MuiChartsReferenceLine: {
+      defaultProps: {
+        x: 5,
+        // @ts-expect-error invalid MuiMarkElement prop
+        someRandomProp: true,
+      },
+      styleOverrides: {
+        root: { backgroundColor: 'red' },
+        // @ts-expect-error invalid MuiMarkElement class key
+        constent: { color: 'red' },
+      },
+    },
+    MuiChartsGrid: {
+      defaultProps: {
+        vertical: true,
+        // @ts-expect-error invalid MuiMarkElement prop
+        someRandomProp: true,
+      },
+      styleOverrides: {
+        root: { backgroundColor: 'red' },
+        // @ts-expect-error invalid MuiMarkElement class key
+        constent: { color: 'red' },
+      },
+    },
   },
 });
diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json
@@ -81,6 +81,7 @@
   { "name": "ChartsReferenceLine", "kind": "Function" },
   { "name": "ChartsReferenceLineClasses", "kind": "Interface" },
   { "name": "ChartsReferenceLineClassKey", "kind": "TypeAlias" },
+  { "name": "ChartsReferenceLineProps", "kind": "TypeAlias" },
   { "name": "ChartsSurface", "kind": "Variable" },
   { "name": "ChartsSurfaceProps", "kind": "Interface" },
   { "name": "ChartsText", "kind": "Function" },