From 0c30a6f35a7e21035d0245661d98bbfb8bad5037 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert <77863078+lhilgert9@users.noreply.github.com> Date: Tue, 27 Aug 2024 14:48:51 +0200 Subject: [PATCH] [charts] Add missing `themeAugmentation` in pro plan (#14313) Co-authored-by: Jose Quintas Co-authored-by: alex --- .../charts/getting-started/getting-started.md | 27 ++++++++ docs/pages/x/api/charts/bar-chart.json | 2 +- docs/pages/x/api/charts/line-chart.json | 2 +- docs/pages/x/api/charts/pie-chart.json | 2 +- docs/pages/x/api/charts/scatter-chart.json | 2 +- .../src/BarChartPro/BarChartPro.tsx | 4 +- packages/x-charts-pro/src/Heatmap/Heatmap.tsx | 6 +- .../src/LineChartPro/LineChartPro.tsx | 4 +- .../src/ScatterChartPro/ScatterChartPro.tsx | 4 +- .../src/themeAugmentation/components.d.ts | 25 +++++++ .../src/themeAugmentation/index.js | 1 + .../src/themeAugmentation/index.ts | 4 ++ .../src/themeAugmentation/overrides.d.ts | 13 ++++ .../src/themeAugmentation/props.d.ts | 22 +++++++ .../themeAugmentation.spec.ts | 39 +++++++++++ .../x-charts/src/BarChart/BarChart.test.tsx | 4 +- packages/x-charts/src/BarChart/BarChart.tsx | 4 +- .../src/BarChart/BarLabel/BarLabel.tsx | 6 +- .../x-charts/src/ChartsGrid/ChartsGrid.tsx | 8 +-- .../src/ChartsSurface/ChartsSurface.tsx | 5 +- .../x-charts/src/LineChart/LineChart.test.tsx | 4 +- packages/x-charts/src/LineChart/LineChart.tsx | 4 +- .../x-charts/src/PieChart/PieChart.test.tsx | 4 +- packages/x-charts/src/PieChart/PieChart.tsx | 4 +- .../src/ScatterChart/ScatterChart.test.tsx | 4 +- .../src/ScatterChart/ScatterChart.tsx | 4 +- .../components/AxisSharedComponents.tsx | 8 +-- .../src/themeAugmentation/components.d.ts | 14 +--- .../src/themeAugmentation/overrides.d.ts | 13 ++-- .../x-charts/src/themeAugmentation/props.d.ts | 17 +---- .../themeAugmentation.spec.ts | 66 ++----------------- 31 files changed, 199 insertions(+), 127 deletions(-) create mode 100644 packages/x-charts-pro/src/themeAugmentation/components.d.ts create mode 100644 packages/x-charts-pro/src/themeAugmentation/index.js create mode 100644 packages/x-charts-pro/src/themeAugmentation/index.ts create mode 100644 packages/x-charts-pro/src/themeAugmentation/overrides.d.ts create mode 100644 packages/x-charts-pro/src/themeAugmentation/props.d.ts create mode 100644 packages/x-charts-pro/src/themeAugmentation/themeAugmentation.spec.ts diff --git a/docs/data/charts/getting-started/getting-started.md b/docs/data/charts/getting-started/getting-started.md index c325d7940d6b..6c6057abfc00 100644 --- a/docs/data/charts/getting-started/getting-started.md +++ b/docs/data/charts/getting-started/getting-started.md @@ -118,3 +118,30 @@ Visit the [Axis page](/x/react-charts/axis/) for more details. MUI X Charts follows the Material UI styling and features all of the customization tools you'd find there, making tweaking charts as straightforward as designing buttons. Visit the [Styling page](/x/react-charts/styling/) for more details. + +## TypeScript + +In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types. +Internally, it uses module augmentation to extend the default theme structure. + +```tsx +import type {} from '@mui/x-charts/themeAugmentation'; +import type {} from '@mui/x-charts-pro/themeAugmentation'; + +const theme = createTheme({ + components: { + MuiChartsAxis: { + styleOverrides: { + tick: { + stroke: '#006BD6', + }, + }, + }, + }, +}); +``` + +:::info +You don't have to import the theme augmentation from both `@mui/x-charts` and `@mui/x-charts-pro` when using `@mui/x-charts-pro`. +Importing it from `@mui/x-charts-pro` is enough. +::: diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index 98abf0ef7ad1..4fbc846f9948 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -191,7 +191,7 @@ ], "classes": [], "spread": true, - "themeDefaultProps": false, + "themeDefaultProps": true, "muiName": "MuiBarChart", "forwardsRefTo": "SVGSVGElement", "filename": "/packages/x-charts/src/BarChart/BarChart.tsx", diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index bc272032eb1d..51e2f75d22ab 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -186,7 +186,7 @@ ], "classes": [], "spread": true, - "themeDefaultProps": false, + "themeDefaultProps": true, "muiName": "MuiLineChart", "forwardsRefTo": "SVGSVGElement", "filename": "/packages/x-charts/src/LineChart/LineChart.tsx", diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index 887c162a7a5c..cc208bd3f97c 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -170,7 +170,7 @@ ], "classes": [], "spread": true, - "themeDefaultProps": false, + "themeDefaultProps": true, "muiName": "MuiPieChart", "forwardsRefTo": "SVGSVGElement", "filename": "/packages/x-charts/src/PieChart/PieChart.tsx", diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index 352dfeeaad5b..f9daa7ae5b4b 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -176,7 +176,7 @@ ], "classes": [], "spread": true, - "themeDefaultProps": false, + "themeDefaultProps": true, "muiName": "MuiScatterChart", "forwardsRefTo": "SVGSVGElement", "filename": "/packages/x-charts/src/ScatterChart/ScatterChart.tsx", diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index 9f03659068b1..f07082ebd628 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { BarChartProps, BarPlot } from '@mui/x-charts/BarChart'; import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler'; import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; @@ -29,7 +30,8 @@ export interface BarChartProProps extends BarChartProps, ZoomProps {} * * - [BarChart API](https://mui.com/x/api/charts/bar-chart/) */ -const BarChartPro = React.forwardRef(function BarChartPro(props: BarChartProProps, ref) { +const BarChartPro = React.forwardRef(function BarChartPro(inProps: BarChartProProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiBarChartPro' }); const { zoom, onZoomChange, ...other } = props; const { chartContainerProps, diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx index 7b393a9f11a1..eac118054262 100644 --- a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx +++ b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate'; +import { useThemeProps } from '@mui/material/styles'; import useId from '@mui/utils/useId'; +import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate'; import { ChartsAxis, ChartsAxisProps } from '@mui/x-charts/ChartsAxis'; import { ChartsTooltip, @@ -104,7 +105,8 @@ const defaultColorMap = interpolateRgbBasis([ '#084081', ]); -const Heatmap = React.forwardRef(function Heatmap(props: HeatmapProps, ref) { +const Heatmap = React.forwardRef(function Heatmap(inProps: HeatmapProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiHeatmap' }); const { xAxis, yAxis, diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index 323d37fb05d5..90782a38be2d 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { AreaPlot, AreaPlotProps, @@ -36,7 +37,8 @@ export interface LineChartProProps extends LineChartProps, ZoomProps {} * * - [LineChart API](https://mui.com/x/api/charts/line-chart/) */ -const LineChartPro = React.forwardRef(function LineChartPro(props: LineChartProProps, ref) { +const LineChartPro = React.forwardRef(function LineChartPro(inProps: LineChartProProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiLineChartPro' }); const { zoom, onZoomChange, ...other } = props; const { chartContainerProps, diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx index 1ca22d2eb060..06679a1e0b2d 100644 --- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay'; import { ScatterChartProps, ScatterPlot } from '@mui/x-charts/ScatterChart'; import { ZAxisContextProvider } from '@mui/x-charts/context'; @@ -27,9 +28,10 @@ export interface ScatterChartProProps extends ScatterChartProps, ZoomProps {} * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/) */ const ScatterChartPro = React.forwardRef(function ScatterChartPro( - props: ScatterChartProProps, + inProps: ScatterChartProProps, ref, ) { + const props = useThemeProps({ props: inProps, name: 'MuiScatterChartPro' }); const { zoom, onZoomChange, ...other } = props; const { chartContainerProps, diff --git a/packages/x-charts-pro/src/themeAugmentation/components.d.ts b/packages/x-charts-pro/src/themeAugmentation/components.d.ts new file mode 100644 index 000000000000..1638a9e2a284 --- /dev/null +++ b/packages/x-charts-pro/src/themeAugmentation/components.d.ts @@ -0,0 +1,25 @@ +import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles'; + +export interface ChartsProComponents { + // BarChartPro components + MuiBarChartPro?: { + defaultProps?: ComponentsProps['MuiBarChartPro']; + }; + // LineChartPro components + MuiLineChartPro?: { + defaultProps?: ComponentsProps['MuiLineChartPro']; + }; + // Heatmap components + MuiHeatmap?: { + defaultProps?: ComponentsProps['MuiHeatmap']; + styleOverrides?: ComponentsOverrides['MuiHeatmap']; + }; + // ScatterChartPro components + MuiScatterChartPro?: { + defaultProps?: ComponentsProps['MuiScatterChartPro']; + }; +} + +declare module '@mui/material/styles' { + interface Components extends ChartsProComponents {} +} diff --git a/packages/x-charts-pro/src/themeAugmentation/index.js b/packages/x-charts-pro/src/themeAugmentation/index.js new file mode 100644 index 000000000000..6467405078b0 --- /dev/null +++ b/packages/x-charts-pro/src/themeAugmentation/index.js @@ -0,0 +1 @@ +// Prefer to use `import type {} from '@mui/x-charts-pro/themeAugmentation';` instead to avoid importing an empty file. diff --git a/packages/x-charts-pro/src/themeAugmentation/index.ts b/packages/x-charts-pro/src/themeAugmentation/index.ts new file mode 100644 index 000000000000..1a4a7fc3c80d --- /dev/null +++ b/packages/x-charts-pro/src/themeAugmentation/index.ts @@ -0,0 +1,4 @@ +export * from '@mui/x-charts/themeAugmentation'; +export * from './overrides'; +export * from './props'; +export * from './components'; diff --git a/packages/x-charts-pro/src/themeAugmentation/overrides.d.ts b/packages/x-charts-pro/src/themeAugmentation/overrides.d.ts new file mode 100644 index 000000000000..b57a5f0362d6 --- /dev/null +++ b/packages/x-charts-pro/src/themeAugmentation/overrides.d.ts @@ -0,0 +1,13 @@ +import { HeatmapClassKey } from '../Heatmap'; + +export interface ChartsProComponentNameToClassKey { + // Heatmap components + MuiHeatmap: HeatmapClassKey; +} + +declare module '@mui/material/styles' { + interface ComponentNameToClassKey extends ChartsProComponentNameToClassKey {} +} + +// disable automatic export +export {}; diff --git a/packages/x-charts-pro/src/themeAugmentation/props.d.ts b/packages/x-charts-pro/src/themeAugmentation/props.d.ts new file mode 100644 index 000000000000..501228568298 --- /dev/null +++ b/packages/x-charts-pro/src/themeAugmentation/props.d.ts @@ -0,0 +1,22 @@ +import { ScatterChartProProps } from '../ScatterChartPro'; +import { BarChartProProps } from '../BarChartPro'; +import { HeatmapProps } from '../Heatmap/Heatmap'; +import { LineChartProProps } from '../LineChartPro'; + +export interface ChartsProComponentsPropsList { + // BarChartPro components + MuiBarChartPro: BarChartProProps; + // LineChartPro components + MuiLineChartPro: LineChartProProps; + // Heatmap components + MuiHeatmap: HeatmapProps; + // ScatterChartPro components + MuiScatterChartPro: ScatterChartProProps; +} + +declare module '@mui/material/styles' { + interface ComponentsPropsList extends ChartsProComponentsPropsList {} +} + +// disable automatic export +export {}; diff --git a/packages/x-charts-pro/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-charts-pro/src/themeAugmentation/themeAugmentation.spec.ts new file mode 100644 index 000000000000..074742162da1 --- /dev/null +++ b/packages/x-charts-pro/src/themeAugmentation/themeAugmentation.spec.ts @@ -0,0 +1,39 @@ +import { createTheme } from '@mui/material/styles'; + +createTheme({ + components: { + MuiBarChartPro: { + defaultProps: { + title: 'toto', + // @ts-expect-error invalid MuiChartsAxis prop + someRandomProp: true, + }, + }, + MuiLineChartPro: { + defaultProps: { + title: 'toto', + // @ts-expect-error invalid MuiChartsAxis prop + someRandomProp: true, + }, + }, + MuiScatterChartPro: { + defaultProps: { + title: 'toto', + // @ts-expect-error invalid MuiChartsAxis prop + someRandomProp: true, + }, + }, + MuiHeatmap: { + defaultProps: { + title: 'toto', + // @ts-expect-error invalid MuiChartsAxis prop + someRandomProp: true, + }, + styleOverrides: { + highlighted: { backgroundColor: 'red' }, + // @ts-expect-error invalid MuiChartsAxis class key + constent: { color: 'red' }, + }, + }, + }, +}); diff --git a/packages/x-charts/src/BarChart/BarChart.test.tsx b/packages/x-charts/src/BarChart/BarChart.test.tsx index 7f9dffa98069..f93e1352ca78 100644 --- a/packages/x-charts/src/BarChart/BarChart.test.tsx +++ b/packages/x-charts/src/BarChart/BarChart.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { createRenderer, describeConformance } from '@mui/internal-test-utils'; +import { createRenderer } from '@mui/internal-test-utils/createRenderer'; +import { describeConformance } from 'test/utils/describeConformance'; import { BarChart } from '@mui/x-charts/BarChart'; describe('', () => { @@ -20,7 +21,6 @@ describe('', () => { 'slotPropsProp', 'slotPropsCallback', 'slotsProp', - 'themeDefaultProps', 'themeStyleOverrides', 'themeVariants', 'themeCustomPalette', diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index bba9190cabac..7aca01261877 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { BarPlot, BarPlotProps, BarPlotSlotProps, BarPlotSlots } from './BarPlot'; import { ResponsiveChartContainer, @@ -109,7 +110,8 @@ export interface BarChartProps * * - [BarChart API](https://mui.com/x/api/charts/bar-chart/) */ -const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) { +const BarChart = React.forwardRef(function BarChart(inProps: BarChartProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiBarChart' }); const { chartContainerProps, barPlotProps, diff --git a/packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx b/packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx index 7b18ddf9568a..d3c9af981dee 100644 --- a/packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx +++ b/packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx @@ -29,10 +29,10 @@ export const BarLabelComponent = styled(animated.text, { export type BarLabelProps = Omit, 'ref' | 'id'> & BarLabelOwnerState; -function BarLabel(props: BarLabelProps) { - const themeProps = useThemeProps({ props, name: 'MuiBarLabel' }); +function BarLabel(inProps: BarLabelProps) { + const props = useThemeProps({ props: inProps, name: 'MuiBarLabel' }); - const { seriesId, dataIndex, color, isFaded, isHighlighted, classes, ...otherProps } = themeProps; + const { seriesId, dataIndex, color, isFaded, isHighlighted, classes, ...otherProps } = props; return ; } diff --git a/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx b/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx index 19b880e70ed0..497d23977067 100644 --- a/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx +++ b/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx @@ -66,14 +66,14 @@ export interface ChartsGridProps { * * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/) */ -function ChartsGrid(props: ChartsGridProps) { - const themeProps = useThemeProps({ props, name: 'MuiChartsGrid' }); +function ChartsGrid(inProps: ChartsGridProps) { + const props = useThemeProps({ props: inProps, name: 'MuiChartsGrid' }); const drawingArea = useDrawingArea(); - const { vertical, horizontal, ...other } = themeProps; + const { vertical, horizontal, ...other } = props; const { xAxis, xAxisIds, yAxis, yAxisIds } = useCartesianContext(); - const classes = useUtilityClasses(themeProps); + const classes = useUtilityClasses(props); const horizontalAxisId = yAxisIds[0]; const verticalAxisId = xAxisIds[0]; diff --git a/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx b/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx index 949b93ea9774..769a65fb5835 100644 --- a/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx +++ b/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx @@ -1,4 +1,4 @@ -import { styled, SxProps, Theme } from '@mui/material/styles'; +import { styled, SxProps, Theme, useThemeProps } from '@mui/material/styles'; import PropTypes from 'prop-types'; import * as React from 'react'; import { useAxisEvents } from '../hooks/useAxisEvents'; @@ -42,9 +42,10 @@ const ChartChartsSurfaceStyles = styled('svg', { })); const ChartsSurface = React.forwardRef(function ChartsSurface( - props: ChartsSurfaceProps, + inProps: ChartsSurfaceProps, ref, ) { + const props = useThemeProps({ props: inProps, name: 'MuiChartsSurface' }); const { children, width, diff --git a/packages/x-charts/src/LineChart/LineChart.test.tsx b/packages/x-charts/src/LineChart/LineChart.test.tsx index 760dc0317e61..1ec0c3f8ac2a 100644 --- a/packages/x-charts/src/LineChart/LineChart.test.tsx +++ b/packages/x-charts/src/LineChart/LineChart.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { createRenderer, describeConformance } from '@mui/internal-test-utils'; +import { createRenderer } from '@mui/internal-test-utils/createRenderer'; +import { describeConformance } from 'test/utils/describeConformance'; import { LineChart } from '@mui/x-charts/LineChart'; describe('', () => { @@ -19,7 +20,6 @@ describe('', () => { 'slotPropsProp', 'slotPropsCallback', 'slotsProp', - 'themeDefaultProps', 'themeStyleOverrides', 'themeVariants', 'themeCustomPalette', diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index a8e65b19c18a..0bd258bfd715 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { AreaPlot, AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from './AreaPlot'; import { LinePlot, LinePlotProps, LinePlotSlotProps, LinePlotSlots } from './LinePlot'; import { @@ -135,7 +136,8 @@ export interface LineChartProps * * - [LineChart API](https://mui.com/x/api/charts/line-chart/) */ -const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref) { +const LineChart = React.forwardRef(function LineChart(inProps: LineChartProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiLineChart' }); const { chartContainerProps, axisClickHandlerProps, diff --git a/packages/x-charts/src/PieChart/PieChart.test.tsx b/packages/x-charts/src/PieChart/PieChart.test.tsx index d77fe8f25861..d1d5c3fd55ff 100644 --- a/packages/x-charts/src/PieChart/PieChart.test.tsx +++ b/packages/x-charts/src/PieChart/PieChart.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { createRenderer, describeConformance } from '@mui/internal-test-utils'; +import { createRenderer } from '@mui/internal-test-utils/createRenderer'; +import { describeConformance } from 'test/utils/describeConformance'; import { PieChart } from '@mui/x-charts/PieChart'; describe('', () => { @@ -30,7 +31,6 @@ describe('', () => { 'slotPropsProp', 'slotPropsCallback', 'slotsProp', - 'themeDefaultProps', 'themeStyleOverrides', 'themeVariants', 'themeCustomPalette', diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 769553547ee5..dca99305017f 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { ResponsiveChartContainer, ResponsiveChartContainerProps, @@ -123,7 +124,8 @@ const defaultRTLMargin = { top: 5, bottom: 5, left: 100, right: 5 }; * * - [PieChart API](https://mui.com/x/api/charts/pie-chart/) */ -const PieChart = React.forwardRef(function PieChart(props: PieChartProps, ref) { +const PieChart = React.forwardRef(function PieChart(inProps: PieChartProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiPieChart' }); const { xAxis, yAxis, diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx index e96d0e0681a1..6a0810ce8dd3 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { createRenderer, describeConformance } from '@mui/internal-test-utils'; +import { createRenderer } from '@mui/internal-test-utils/createRenderer'; +import { describeConformance } from 'test/utils/describeConformance'; import { ScatterChart } from '@mui/x-charts/ScatterChart'; describe('', () => { @@ -31,7 +32,6 @@ describe('', () => { 'slotPropsProp', 'slotPropsCallback', 'slotsProp', - 'themeDefaultProps', 'themeStyleOverrides', 'themeVariants', 'themeCustomPalette', diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 7689c17a7563..ecd3bbe6c2c3 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useThemeProps } from '@mui/material/styles'; import { ScatterPlot, ScatterPlotProps, @@ -118,7 +119,8 @@ export interface ScatterChartProps * * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/) */ -const ScatterChart = React.forwardRef(function ScatterChart(props: ScatterChartProps, ref) { +const ScatterChart = React.forwardRef(function ScatterChart(inProps: ScatterChartProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiScatterChart' }); const { chartContainerProps, zAxisProps, diff --git a/packages/x-charts/src/internals/components/AxisSharedComponents.tsx b/packages/x-charts/src/internals/components/AxisSharedComponents.tsx index ba6078ebe23b..5fb7076d5455 100644 --- a/packages/x-charts/src/internals/components/AxisSharedComponents.tsx +++ b/packages/x-charts/src/internals/components/AxisSharedComponents.tsx @@ -6,21 +6,21 @@ export const AxisRoot = styled('g', { slot: 'Root', overridesResolver: (props, styles) => styles.root, })(({ theme }) => ({ - [`& .${axisClasses.tickLabel}`]: { + [`.${axisClasses.tickLabel}`]: { ...theme.typography.caption, fill: (theme.vars || theme).palette.text.primary, }, - [`& .${axisClasses.label}`]: { + [`.${axisClasses.label}`]: { ...theme.typography.body1, fill: (theme.vars || theme).palette.text.primary, }, - [`& .${axisClasses.line}`]: { + [`.${axisClasses.line}`]: { stroke: (theme.vars || theme).palette.text.primary, shapeRendering: 'crispEdges', strokeWidth: 1, }, - [`& .${axisClasses.tick}`]: { + [`.${axisClasses.tick}`]: { stroke: (theme.vars || theme).palette.text.primary, shapeRendering: 'crispEdges', }, diff --git a/packages/x-charts/src/themeAugmentation/components.d.ts b/packages/x-charts/src/themeAugmentation/components.d.ts index f08071da49ac..fbb03f04b14a 100644 --- a/packages/x-charts/src/themeAugmentation/components.d.ts +++ b/packages/x-charts/src/themeAugmentation/components.d.ts @@ -2,7 +2,6 @@ import { ComponentsProps, ComponentsOverrides } from '@mui/material/styles'; export interface ChartsComponents { MuiChartsAxis?: { - defaultProps?: ComponentsProps['MuiChartsAxis']; styleOverrides?: ComponentsOverrides['MuiChartsAxis']; }; MuiChartsXAxis?: { @@ -12,12 +11,8 @@ export interface ChartsComponents { defaultProps?: ComponentsProps['MuiChartsYAxis']; }; MuiChartsAxisHighlight?: { - defaultProps?: ComponentsProps['MuiChartsAxisHighlight']; styleOverrides?: ComponentsOverrides['MuiChartsAxisHighlight']; }; - MuiChartsClipPath?: { - defaultProps?: ComponentsProps['MuiChartsClipPath']; - }; MuiChartsGrid?: { defaultProps?: ComponentsProps['MuiChartsGrid']; styleOverrides?: ComponentsOverrides['MuiChartsGrid']; @@ -32,12 +27,12 @@ export interface ChartsComponents { }; MuiChartsSurface?: { defaultProps?: ComponentsProps['MuiChartsSurface']; + styleOverrides?: ComponentsOverrides['MuiChartsSurface']; }; MuiBarChart?: { defaultProps?: ComponentsProps['MuiBarChart']; }; MuiBarElement?: { - defaultProps?: ComponentsProps['MuiBarElement']; styleOverrides?: ComponentsOverrides['MuiBarElement']; }; MuiBarLabel?: { @@ -48,23 +43,18 @@ export interface ChartsComponents { defaultProps?: ComponentsProps['MuiLineChart']; }; MuiAreaElement?: { - defaultProps?: ComponentsProps['MuiAreaElement']; styleOverrides?: ComponentsOverrides['MuiAreaElement']; }; MuiLineElement?: { - defaultProps?: ComponentsProps['MuiLineElement']; styleOverrides?: ComponentsOverrides['MuiLineElement']; }; MuiMarkElement?: { - defaultProps?: ComponentsProps['MuiMarkElement']; styleOverrides?: ComponentsOverrides['MuiMarkElement']; }; MuiScatterChart?: { defaultProps?: ComponentsProps['MuiScatterChart']; }; - MuiScatter?: { - defaultProps?: ComponentsProps['MuiScatter']; - }; + MuiScatter?: {}; } 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 index c2699e9f67d0..24f6ce49c23f 100644 --- a/packages/x-charts/src/themeAugmentation/overrides.d.ts +++ b/packages/x-charts/src/themeAugmentation/overrides.d.ts @@ -1,35 +1,34 @@ import { BarLabelClassKey } from '../BarChart'; import { BarElementClassKey } from '../BarChart/BarElement'; -import { ChartsAxisClassKey } from '../ChartsAxis'; import { ChartsAxisHighlightClassKey } from '../ChartsAxisHighlight'; import { ChartsGridClassKey } from '../ChartsGrid'; import { ChartsLegendClassKey } from '../ChartsLegend'; + import { ChartsTooltipClassKey } from '../ChartsTooltip'; import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '../LineChart'; -// prettier-ignore -export interface PickersComponentNameToClassKey { - MuiChartsAxis: ChartsAxisClassKey; +export interface ChartsComponentNameToClassKey { + MuiChartsAxis: 'root'; // Only the root component of axes is styled MuiChartsAxisHighlight: ChartsAxisHighlightClassKey; MuiChartsGrid: ChartsGridClassKey; MuiChartsLegend: ChartsLegendClassKey; MuiChartsTooltip: ChartsTooltipClassKey; + MuiChartsSurface: 'root'; // BarChart components MuiBarElement: BarElementClassKey; MuiBarLabel: BarLabelClassKey; // LineChart components - MuiAreaElement: AreaElementClassKey; MuiLineElement: LineElementClassKey; MuiMarkElement: MarkElementClassKey; + // ScatterChart components - } declare module '@mui/material/styles' { - interface ComponentNameToClassKey extends PickersComponentNameToClassKey {} + interface ComponentNameToClassKey extends ChartsComponentNameToClassKey {} } // disable automatic export diff --git a/packages/x-charts/src/themeAugmentation/props.d.ts b/packages/x-charts/src/themeAugmentation/props.d.ts index 7dc62f397400..0fe35a41d87d 100644 --- a/packages/x-charts/src/themeAugmentation/props.d.ts +++ b/packages/x-charts/src/themeAugmentation/props.d.ts @@ -1,26 +1,18 @@ import { BarLabelProps } from '../BarChart/BarLabel'; import { BarChartProps } from '../BarChart/BarChart'; -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 { ChartsSurfaceProps } from '../ChartsSurface'; import { ChartsTooltipProps } from '../ChartsTooltip'; -import { AreaElementProps, LineElementProps, MarkElementProps } from '../LineChart'; import { LineChartProps } from '../LineChart/LineChart'; -import { ScatterProps } from '../ScatterChart/Scatter'; import { ScatterChartProps } from '../ScatterChart/ScatterChart'; +import { PieChartProps } from '../PieChart/PieChart'; import { ChartsXAxisProps, ChartsYAxisProps } from '../models/axis'; import { ChartSeriesType } from '../models/seriesType/config'; export interface ChartsComponentsPropsList { - MuiChartsAxis: ChartsAxisProps; MuiChartsXAxis: ChartsXAxisProps; MuiChartsYAxis: ChartsYAxisProps; - MuiChartsAxisHighlight: ChartsAxisHighlightProps; - MuiChartsClipPath: ChartsClipPathProps; MuiChartsGrid: ChartsGridProps; MuiChartsLegend: ChartsLegendProps; MuiChartsTooltip: ChartsTooltipProps; @@ -28,16 +20,13 @@ export interface ChartsComponentsPropsList { // BarChart components MuiBarChart: BarChartProps; - MuiBarElement: BarElementProps; MuiBarLabel: BarLabelProps; // LineChart components MuiLineChart: LineChartProps; - MuiAreaElement: AreaElementProps; - MuiLineElement: LineElementProps; - MuiMarkElement: MarkElementProps; // ScatterChart components MuiScatterChart: ScatterChartProps; - MuiScatter: ScatterProps; + // PieChart components + MuiPieChart: PieChartProps; } 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 index 695a934ee6ed..1c71789139c7 100644 --- a/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts +++ b/packages/x-charts/src/themeAugmentation/themeAugmentation.spec.ts @@ -3,15 +3,10 @@ import { createTheme } from '@mui/material/styles'; createTheme({ components: { MuiChartsAxis: { - defaultProps: { - leftAxis: 'test', - // @ts-expect-error invalid MuiChartsAxis prop - someRandomProp: true, - }, styleOverrides: { root: { backgroundColor: 'red' }, // @ts-expect-error invalid MuiChartsAxis class key - constent: { color: 'red' }, + line: { color: 'red' }, }, }, MuiChartsXAxis: { @@ -29,29 +24,12 @@ createTheme({ }, }, MuiChartsAxisHighlight: { - defaultProps: { - x: 'line', - // @ts-expect-error invalid MuiChartsAxisHighlight prop - someRandomProp: true, - }, styleOverrides: { root: { backgroundColor: 'red' }, // @ts-expect-error invalid MuiChartsAxisHighlight class key constent: { color: 'red' }, }, }, - MuiChartsClipPath: { - defaultProps: { - id: 'test', - // @ts-expect-error invalid MuiChartsClipPath prop - someRandomProp: true, - }, - // styleOverrides: { - // root: { backgroundColor: 'red' }, - // // @ts-expect-error invalid MuiChartsClipPath class key - // constent: { color: 'red' }, - // }, - }, MuiChartsLegend: { defaultProps: { direction: 'row', @@ -82,11 +60,11 @@ createTheme({ // @ts-expect-error invalid MuiChartsSurface prop someRandomProp: true, }, - // styleOverrides: { - // root: { backgroundColor: 'red' }, - // // @ts-expect-error invalid MuiChartsSurface class key - // constent: { color: 'red' }, - // }, + styleOverrides: { + root: { backgroundColor: 'red' }, + // @ts-expect-error invalid MuiChartsSurface class key + constent: { color: 'red' }, + }, }, // BarChart components @@ -103,11 +81,6 @@ createTheme({ // }, }, MuiBarElement: { - defaultProps: { - id: 'toto', - // @ts-expect-error invalid MuiBarElement prop - someRandomProp: true, - }, styleOverrides: { root: { backgroundColor: 'red' }, // @ts-expect-error invalid MuiBarElement class key @@ -128,11 +101,6 @@ createTheme({ // }, }, MuiAreaElement: { - defaultProps: { - id: 'toto', - // @ts-expect-error invalid MuiAreaElement prop - someRandomProp: true, - }, styleOverrides: { root: { backgroundColor: 'red' }, // @ts-expect-error invalid MuiAreaElement class key @@ -140,11 +108,6 @@ createTheme({ }, }, MuiLineElement: { - defaultProps: { - id: 'toto', - // @ts-expect-error invalid MuiLineElement prop - someRandomProp: true, - }, styleOverrides: { root: { backgroundColor: 'red' }, // @ts-expect-error invalid MuiLineElement class key @@ -152,11 +115,6 @@ createTheme({ }, }, MuiMarkElement: { - defaultProps: { - id: 'toto', - // @ts-expect-error invalid MuiMarkElement prop - someRandomProp: true, - }, styleOverrides: { root: { backgroundColor: 'red' }, // @ts-expect-error invalid MuiMarkElement class key @@ -176,17 +134,5 @@ createTheme({ // constent: { color: 'red' }, // }, }, - MuiScatter: { - defaultProps: { - markerSize: 10, - // @ts-expect-error invalid MuiScatter prop - someRandomProp: true, - }, - // styleOverrides: { - // root: { backgroundColor: 'red' }, - // // @ts-expect-error invalid MuiScatter class key - // constent: { color: 'red' }, - // }, - }, }, });