[charts] Fix themeAugmentation

[alexfauquette]

Follow up of #14313

I was looking to add describeConformance but those test make assumptions that are not respected by charts. For example it expects ChartsXAxis to propagate its props to the root element. Whereas the component take the needed value from its props and render the axis.

In this PR I took care of the general components. Each component has its dedicated commit

[alexfauquette]

Looks like a bit of overwork to style a component already styled. But it improve consistency.

I'm considering removing the AxisRoot for v8. WHat do you think?

[JCQuintas]

What do you mean by removing it? Move the styles to each of the axis?

[mui-bot]

Deploy preview: https://deploy-preview-14372--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 690f1be

[alexfauquette]

Not sure it's supper clear. I'm trying to explain that the defaultProps of this components would have no impact on single component charts if grid is not defined, because of this line

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

Line 133 in 97afd65

{props.grid && <ChartsGrid {...gridProps} />}

[JCQuintas]

Maybe keep it very simple, like:

Suggested change

	/**
	* Warning, does not work with LineChart, BarChart and ScatterChart.
	* Those components skip the grid rendering if it seems unnecessary according to there props.
	* This `defaultProps` only work if you call `<ChartsGrid />` in a composed chart.
	*/
	defaultProps?: ComponentsProps['MuiChartsGrid'];
	/**
	* The `MuiChartsGrid.defaultProps` only work when using [composition](/x/react-charts/composition/).
	*/
	defaultProps?: ComponentsProps['MuiChartsGrid'];

An alternative is to have the charts always call <ChartsGrid /> and chart grid resolves the theme props and decides if it needs to render or not.

[alexfauquette]

An alternative is to have the charts always call and chart grid resolves the theme props and decides if it needs to render or not.

Rendering the grid is not free. Removing it saves 10ms on rendering. Would need to verify if it's the hooks computation, or the rendering which is responsible

[JCQuintas]

Yeah, but we could try to create a proxy renderer eg:

function Proxy(inProps) {
  const props = useThemeProps({ props: inProps, name: 'MuiChartsGrid' });
  if (!props.checkExistanceSomehow) return null
  return <ChartsGrid {...props} />

[alexfauquette]

I went the other way by creating sub-components for vertical and horizontal. Such that useTick is called only if the result will be render.

[alexfauquette]

Before that change, the PopperComponent has the styleOverride.root, but the classes.root was on the ChartsTooltipPaper

With that modification both styleOverrides.root and classes.root are on the same component

[codspeed-hq]

CodSpeed Performance Report

Merging #14372 will not alter performance

_{Comparing alexfauquette:continue-yhemeOverride (690f1be) with master (70b6cb7)}

Summary

✅ 3 untouched benchmarks

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.