[charts] Rename slots and slotProps types (#10875)

docs/data/charts-component-api-pages.ts

@@ -9,6 +9,7 @@ export default [
   { pathname: '/x/api/charts/charts-axis', title: 'ChartsAxis' },
   { pathname: '/x/api/charts/charts-axis-highlight', title: 'ChartsAxisHighlight' },
   { pathname: '/x/api/charts/charts-clip-path', title: 'ChartsClipPath' },
+  { pathname: '/x/api/charts/charts-legend', title: 'ChartsLegend' },
   { pathname: '/x/api/charts/charts-reference-line', title: 'ChartsReferenceLine' },
   { pathname: '/x/api/charts/charts-tooltip', title: 'ChartsTooltip' },
   { pathname: '/x/api/charts/charts-x-axis', title: 'ChartsXAxis' },

docs/data/migration/migration-charts-v6/migration-charts-v6.md

@@ -8,7 +8,9 @@ productId: x-charts
 
 ## Introduction
 
-TBD
+This is a reference guide for upgrading `@mui/x-charts` from v6 to v7.
+The change between v6 and v7 is mostly here to match the version with other MUI X packages.
+Not big breaking changes are expected.
 
 ## Start using the new release
 
@@ -23,3 +25,12 @@ In `package.json`, change the version of the charts package to `next`.
 
 Since `v7` is a major release, it contains changes that affect the public API.
 These changes were done for consistency, improved stability and to make room for new features.
+
+### Renaming
+
+Some types got renamed for coherence
+
+| v6                              | v7                     |
+| :------------------------------ | :--------------------- |
+| ChartsTooltipSlotComponentProps | ChartsTooltipSlotProps |
+| ChartsTooltipSlotsComponent     | ChartsTooltipSlots     |

docs/pages/x/api/charts/charts-legend.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './charts-legend.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docsx/translations/api-docs/charts',
+    false,
+    /\.\/charts-legend(-[a-z]{2})?\.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/x/api/charts/charts-legend.json

@@ -0,0 +1,22 @@
+{
+  "props": {
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "direction": { "type": { "name": "enum", "description": "'column'<br>&#124;&nbsp;'row'" } },
+    "hidden": { "type": { "name": "bool" } },
+    "slotProps": { "type": { "name": "object" }, "default": "{}" },
+    "slots": { "type": { "name": "object" }, "default": "{}" }
+  },
+  "slots": [{ "class": null, "name": "legend", "description": "" }],
+  "name": "ChartsLegend",
+  "imports": [
+    "import { ChartsLegend } from '@mui/x-charts/ChartsLegend';",
+    "import { ChartsLegend } from '@mui/x-charts';"
+  ],
+  "styles": {
+    "classes": ["root", "series", "mark", "label", "column", "row"],
+    "globalClasses": {},
+    "name": "MuiChartsLegend"
+  },
+  "filename": "/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx",
+  "demos": "<ul></ul>"
+}

docs/translations/api-docs/charts/charts-legend.json

@@ -0,0 +1,45 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "classes": {
+      "description": "Override or extend the styles applied to the component.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
+    "direction": {
+      "description": "The direction of the legend layout. The default depends on the chart.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
+    "hidden": {
+      "description": "Set to true to hide the legend.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
+    "slotProps": {
+      "description": "The props used for each component slot.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
+    "slots": {
+      "description": "Overridable component slots.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    }
+  },
+  "classDescriptions": {
+    "root": { "description": "Styles applied to the root element." },
+    "series": { "description": "Styles applied to {{nodeName}}.", "nodeName": "a series element" },
+    "mark": { "description": "Styles applied to {{nodeName}}.", "nodeName": "series mark element" },
+    "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the series label" },
+    "column": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the legend with column layout"
+    },
+    "row": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the legend with row layout"
+    }
+  },
+  "slotDescriptions": { "legend": "" }
+}

packages/x-charts/src/BarChart/BarChart.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import PropTypes from 'prop-types';
-import { BarPlot, BarPlotProps, BarPlotSlotComponentProps, BarPlotSlotsComponent } from './BarPlot';
+import { BarPlot, BarPlotProps, BarPlotSlotProps, BarPlotSlots } from './BarPlot';
 import {
   ResponsiveChartContainer,
   ResponsiveChartContainerProps,
@@ -13,29 +13,29 @@ import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import {
   ChartsTooltip,
   ChartsTooltipProps,
-  ChartsTooltipSlotComponentProps,
-  ChartsTooltipSlotsComponent,
+  ChartsTooltipSlotProps,
+  ChartsTooltipSlots,
 } from '../ChartsTooltip';
 import {
   ChartsLegend,
   ChartsLegendProps,
-  ChartsLegendSlotsComponent,
-  ChartsLegendSlotComponentProps,
+  ChartsLegendSlots,
+  ChartsLegendSlotProps,
 } from '../ChartsLegend';
 import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
-import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
+import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 
-export interface BarChartSlotsComponent
-  extends ChartsAxisSlotsComponent,
-    BarPlotSlotsComponent,
-    ChartsLegendSlotsComponent,
-    ChartsTooltipSlotsComponent {}
-export interface BarChartSlotComponentProps
-  extends ChartsAxisSlotComponentProps,
-    BarPlotSlotComponentProps,
-    ChartsLegendSlotComponentProps,
-    ChartsTooltipSlotComponentProps {}
+export interface BarChartSlots
+  extends ChartsAxisSlots,
+    BarPlotSlots,
+    ChartsLegendSlots,
+    ChartsTooltipSlots {}
+export interface BarChartSlotProps
+  extends ChartsAxisSlotProps,
+    BarPlotSlotProps,
+    ChartsLegendSlotProps,
+    ChartsTooltipSlotProps {}
 
 export interface BarChartProps
   extends Omit<ResponsiveChartContainerProps, 'series'>,
@@ -59,12 +59,12 @@ export interface BarChartProps
    * Overridable component slots.
    * @default {}
    */
-  slots?: BarChartSlotsComponent;
+  slots?: BarChartSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: BarChartSlotComponentProps;
+  slotProps?: BarChartSlotProps;
   layout?: BarSeriesType['layout'];
 }
 

packages/x-charts/src/BarChart/BarPlot.tsx

@@ -41,11 +41,11 @@ function getBandSize({
   };
 }
 
-export interface BarPlotSlotsComponent {
+export interface BarPlotSlots {
   bar?: React.JSXElementConstructor<BarElementProps>;
 }
 
-export interface BarPlotSlotComponentProps {
+export interface BarPlotSlotProps {
   bar?: Partial<BarElementProps>;
 }
 

packages/x-charts/src/ChartsAxis/ChartsAxis.tsx

@@ -5,8 +5,8 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { ChartsXAxis } from '../ChartsXAxis';
 import { ChartsYAxis } from '../ChartsYAxis';
 import {
-  ChartsAxisSlotComponentProps,
-  ChartsAxisSlotsComponent,
+  ChartsAxisSlotProps,
+  ChartsAxisSlots,
   ChartsXAxisProps,
   ChartsYAxisProps,
 } from '../models/axis';
@@ -40,12 +40,12 @@ export interface ChartsAxisProps {
    * Overridable component slots.
    * @default {}
    */
-  slots?: ChartsAxisSlotsComponent;
+  slots?: ChartsAxisSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: ChartsAxisSlotComponentProps;
+  slotProps?: ChartsAxisSlotProps;
 }
 
 const getAxisId = (
@@ -62,8 +62,8 @@ const getAxisId = (
 
 const mergeProps = (
   axisConfig: undefined | null | string | ChartsXAxisProps | ChartsYAxisProps,
-  slots?: Partial<ChartsAxisSlotsComponent>,
-  slotProps?: Partial<ChartsAxisSlotComponentProps>,
+  slots?: Partial<ChartsAxisSlots>,
+  slotProps?: Partial<ChartsAxisSlotProps>,
 ) => {
   return typeof axisConfig === 'object'
     ? {