[charts] Fix charts not passing className to root element

[JCQuintas]

• Fix conformance for all charts in 'mergeClassName', 'propsSpread', 'refForwarding', 'reactTestRenderer', 'rootClass'
• Refs passed to ResponsiveChartContainer go to wrapper div instead of svg element. Breaking? ⚠️
• Forward ref from Gauge and PieChart components
• Prevent MediaQueryList error on jsdom

fixes #13292

[mui-bot]

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

Generated by 🚫 dangerJS against 067f8f7

[alexfauquette]

Refs passed to ResponsiveChartContainer go to wrapper div instead of svg element. Breaking? ⚠️

Yes, this seems to be breaking change. Even if it's not the standard, their is some consistency by always passing the ref to the SVG component.

[JCQuintas]

Yes, this seems to be breaking change.

I don't remember if we decided to do V8 or not 😅, should we wait to merge this?

Even if it's not the standard, their is some consistency by always passing the ref to the SVG component.

I think if it is necessary to have it always on the SVG we could have a proper svgRef that can be passed in? 🤔 Conformance tests don't properly work without the ref there 😅

[alexfauquette]

I don't remember if we decided to do V8 or not 😅, should we wait to merge this?

The v8 should be in 6 months

I think if it is necessary to have it always on the SVG we could have a proper svgRef that can be passed in?

This would not fix the breaking change aspect. Someone using the ref to access the SVG will get access to a wrapping div after this modification

Conformance tests don't properly work without the ref there

Is it the main reason to do the modification?

[JCQuintas]

This would not fix the breaking change aspect. Someone using the ref to access the SVG will get access to a wrapping div after this modification

I didn't mean it as a solution, but rather as a feature. If we want the user to always have access to the SVG directly, we can have a prop that does exactly that. Otherwise I think the ref should probably go to the topmost element. Though I don't know how we handle it in the main lib.

My point of view is that if I have the topmost ref I can get any of the children elements I need, though I also see it being useful to have a ref directly to the SVG element.