fix(button): NaN values on the button (#1650)

gabrielmfern · gabrielmfern · commit 918e62c05b6d · 2024-10-14T11:58:23.000-03:00
diff --git a/.changeset/soft-timers-roll.md b/.changeset/soft-timers-roll.md
@@ -0,0 +1,5 @@
+---
+"@react-email/button": patch
+---
+
+Fix NaN values on rendered Button HTML
diff --git a/packages/button/src/__snapshots__/button.spec.tsx.snap b/packages/button/src/__snapshots__/button.spec.tsx.snap
@@ -2,6 +2,6 @@
 
 exports[`<Button> component > renders correctly  with padding values from style prop 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a href="https://example.com" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px"></span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a><!--/$-->"`;
 
-exports[`<Button> component > renders the <Button> component with no padding value 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a href="https://example.com" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:0px 0px 0px 0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:NaN%;mso-text-raise:0" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0"></span><span><!--[if mso]><i style="mso-font-width:NaN%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`;
+exports[`<Button> component > renders the <Button> component with no padding value 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a href="https://example.com" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:0px 0px 0px 0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:0" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0"></span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`;
 
-exports[`<Button> component > should allow users to overwrite style props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a style="line-height:150%;text-decoration:underline red;display:block;max-width:50%;mso-padding-alt:0px;padding:0px 0px 0px 0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:NaN%;mso-text-raise:0" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0"></span><span><!--[if mso]><i style="mso-font-width:NaN%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`;
+exports[`<Button> component > should allow users to overwrite style props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a style="line-height:150%;text-decoration:underline red;display:block;max-width:50%;mso-padding-alt:0px;padding:0px 0px 0px 0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:0" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0"></span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`;
diff --git a/packages/button/src/button.tsx b/packages/button/src/button.tsx
@@ -4,14 +4,30 @@ import { pxToPt } from "./utils/px-to-pt";
 
 export type ButtonProps = Readonly<React.ComponentPropsWithoutRef<"a">>;
 
+const maxFontWidth = 5;
+
+/**
+ * Computes a msoFontWidth \<= 5 and a count of space characters that,
+ * when applied, end up being as close to `expectedWidth` as possible.
+ */
 function computeFontWidthAndSpaceCount(expectedWidth: number) {
+  if (expectedWidth === 0) return [0, 0];
+
   let smallestSpaceCount = 0;
 
-  while (expectedWidth / smallestSpaceCount / 2 > 5) {
+  const computeRequiredFontWidth = () => {
+    if (smallestSpaceCount > 0) {
+      return expectedWidth / smallestSpaceCount / 2;
+    }
+
+    return Infinity;
+  };
+
+  while (computeRequiredFontWidth() > maxFontWidth) {
     smallestSpaceCount++;
   }
 
-  return [expectedWidth / smallestSpaceCount / 2, smallestSpaceCount];
+  return [computeRequiredFontWidth(), smallestSpaceCount];
 }
 
 export const Button = React.forwardRef<HTMLAnchorElement, ButtonProps>(
