Improve lineheight calc in measureDimensions (#2615)

* Improve lineheight calc in measureDimensions

* format

* Add changeset

Author: EthanRutherford

.changeset/short-countries-serve.md

@@ -0,0 +1,5 @@
+---
+"victory-core": patch
+---
+
+Fix text size regression when using line-height

packages/victory-core/src/victory-util/textsize.ts

@@ -267,6 +267,9 @@ const _approximateDimensionsInternal = (
 const _getMeasurementContainer = memoize(() => {
   const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   element.setAttribute("xlink", "http://www.w3.org/1999/xlink");
+  element.setAttribute("width", "300");
+  element.setAttribute("height", "300");
+  element.setAttribute("viewBox", "0 0 300 300");
 
   const containerElement = document.createElementNS(
     "http://www.w3.org/2000/svg",
@@ -304,24 +307,31 @@ const _measureDimensionsInternal = memoize(
       );
       const params = _prepareParams(style, i);
       textElement.style.fontFamily = params.fontFamily;
-      textElement.style.transform = `rotate(${params.angle})`;
       textElement.style.fontSize = `${params.fontSize}px`;
       textElement.style.lineHeight = params.lineHeight;
       textElement.style.fontFamily = params.fontFamily;
       textElement.style.letterSpacing = params.letterSpacing;
       textElement.textContent = line;
       textElement.setAttribute("x", "0");
       textElement.setAttribute("y", `${heightAcc}`);
-      heightAcc += params.lineHeight * params.fontSize;
-
       containerElement.appendChild(textElement);
+
+      heightAcc +=
+        params.lineHeight * textElement.getBoundingClientRect().height;
     }
 
-    const { width, height } = containerElement.getBoundingClientRect();
+    const { width } = containerElement.getBoundingClientRect();
 
     containerElement.innerHTML = "";
 
-    return { width, height };
+    return {
+      width: style?.angle
+        ? _getSizeWithRotate(width, heightAcc, style?.angle)
+        : width,
+      height: style?.angle
+        ? _getSizeWithRotate(heightAcc, width, style?.angle)
+        : heightAcc,
+    };
   },
   (text, style) => {
     const totalText = Array.isArray(text) ? text.join() : text;

stories/victory-legend.stories.js

@@ -70,6 +70,33 @@ export const DefaultRendering = () => {
   );
 };
 
+export const LineHeight = () => {
+  return (
+    <div style={containerStyle}>
+      <Wrapper>
+        <VictoryLegend
+          orientation="vertical"
+          rowGutter={0}
+          style={{
+            labels: { lineHeight: 0.275 },
+          }}
+          data={[{ name: "One" }, { name: "Two" }, { name: "Three" }]}
+        />
+      </Wrapper>
+      <Wrapper>
+        <VictoryLegend
+          orientation="vertical"
+          rowGutter={0}
+          style={{
+            labels: { lineHeight: 0.75 },
+          }}
+          data={[{ name: "One" }, { name: "Two" }, { name: "Three" }]}
+        />
+      </Wrapper>
+    </div>
+  );
+};
+
 export const Title = () => {
   return (
     <div style={containerStyle}>