Revert className in text measurement

Author: bernardobelchior

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

@@ -37,7 +37,6 @@ type LabelExtraData = { width: number; height: number; skipLabel?: boolean };
 function addLabelDimension(
   xTicks: TickItemType[],
   {
-    tickLabelClassName: className,
     tickLabelStyle: style,
     tickLabelInterval,
     // FIXME: Define the default value in the correct place
@@ -46,7 +45,6 @@ function addLabelDimension(
     isMounted,
   }: Pick<ChartsXAxisProps, 'tickLabelInterval' | 'tickLabelStyle'> &
     Pick<AxisDefaultized<ScaleName, any, ChartsXAxisProps>, 'reverse' | 'minTickLabelGap'> & {
-      tickLabelClassName?: string;
       isMounted: boolean;
     },
 ): (TickItemType & LabelExtraData)[] {
@@ -55,7 +53,6 @@ function addLabelDimension(
       return { ...tick, width: 0, height: 0 };
     }
     const tickSizes = getWordsByLines({
-      className,
       style,
       needsComputation: true,
       text: tick.formattedValue,
@@ -189,7 +186,6 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
   });
 
   const xTicksWithDimension = addLabelDimension(xTicks, {
-    tickLabelClassName: axisTickLabelProps.className,
     tickLabelStyle: axisTickLabelProps.style,
     tickLabelInterval,
     reverse,

packages/x-charts/src/internals/domUtils.ts

@@ -104,10 +104,7 @@ let domCleanTimeout: NodeJS.Timeout | undefined;
  * @param style The style applied
  * @returns width and height of the text
  */
-export const getStringSize = (
-  text: string | number,
-  { className = '', style = {} }: { className?: string; style?: React.CSSProperties },
-) => {
+export const getStringSize = (text: string | number, style: React.CSSProperties = {}) => {
   if (text === undefined || text === null || isSsr()) {
     return { width: 0, height: 0 };
   }
@@ -134,7 +131,6 @@ export const getStringSize = (
     // https://en.wikipedia.org/wiki/Content_Security_Policy
     const measurementSpanStyle: Record<string, any> = { ...SPAN_STYLE, ...style };
 
-    measurementSpan.className = className;
     Object.keys(measurementSpanStyle).map((styleKey) => {
       (measurementSpan!.style as Record<string, any>)[camelToMiddleLine(styleKey)] =
         autoCompleteStyle(styleKey, measurementSpanStyle[styleKey]);

packages/x-charts/src/internals/getWordsByLines.ts

@@ -12,10 +12,6 @@ export interface ChartsTextStyle extends React.CSSProperties {
 }
 
 export interface GetWordsByLinesParams {
-  /**
-   * CSS class applied to text elements.
-   */
-  className?: string;
   /**
    * Text displayed.
    */
@@ -31,14 +27,9 @@ export interface GetWordsByLinesParams {
   needsComputation?: boolean;
 }
 
-export function getWordsByLines({
-  className,
-  style,
-  needsComputation,
-  text,
-}: GetWordsByLinesParams) {
+export function getWordsByLines({ style, needsComputation, text }: GetWordsByLinesParams) {
   return text.split('\n').map((subText) => ({
     text: subText,
-    ...(needsComputation ? getStringSize(subText, { className, style }) : { width: 0, height: 0 }),
+    ...(needsComputation ? getStringSize(subText, style) : { width: 0, height: 0 }),
   }));
 }