fix(button): Padding behaviour (#909)

lordelogos · bukinoshita · web-flow · commit 037940a4961a · 2023-10-04T15:07:33.000-03:00
Co-authored-by: Bu Kinoshita &lt;6929565+bukinoshita@users.noreply.github.com&gt;
diff --git a/docs/components/button.mdx b/docs/components/button.mdx
@@ -1,9 +1,9 @@
 ---
-title: 'Button'
-sidebarTitle: 'Button'
-description: 'A link that is styled to look like a button.'
-'og:image': 'https://react.email/static/covers/button.png'
-icon: 'b'
+title: "Button"
+sidebarTitle: "Button"
+description: "A link that is styled to look like a button."
+"og:image": "https://react.email/static/covers/button.png"
+icon: "b"
 ---
 
 <Info>
@@ -36,11 +36,14 @@ pnpm add @react-email/button -E
 Add the component to your email template. Include styles where needed.
 
 ```jsx
-import { Button } from '@react-email/button';
+import { Button } from "@react-email/button";
 
 const Email = () => {
   return (
-    <Button href="https://example.com" style={{ color: '#61dafb' }}>
+    <Button
+      href="https://example.com"
+      style={{ color: "#61dafb", padding: "10px 20px" }}
+    >
       Click me
     </Button>
   );
diff --git a/packages/button/src/button.spec.tsx b/packages/button/src/button.spec.tsx
@@ -1,20 +1,42 @@
 import { render } from "@react-email/render";
 import { Button } from "./index";
 
-describe("render", () => {
-  it("renders the <Button> component", () => {
+describe("<Button> component", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.resetModules();
+  });
+
+  it("renders children correctly", () => {
+    const testMessage = "Test message";
+    const html = render(<Button>{testMessage}</Button>);
+    expect(html).toContain(testMessage);
+  });
+
+  it("passes style and other props correctly", () => {
+    const style = { backgroundColor: "red" };
+    const html = render(
+      <Button data-testid="button-test" style={style}>
+        Test
+      </Button>,
+    );
+    expect(html).toContain("background-color:red");
+    expect(html).toContain('data-testid="button-test"');
+  });
+
+  it("renders correctly  with padding values from style prop", () => {
     const actualOutput = render(
-      <Button href="https://example.com" pX={20} pY={12} />,
+      <Button href="https://example.com" style={{ padding: "12px 20px" }} />,
     );
     expect(actualOutput).toMatchInlineSnapshot(
-      '"<!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\\" data-id=\\"react-email-button\\" style=\\"line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:12px 20px\\" target=\\"_blank\\"><span><!--[if mso]><i style=\\"letter-spacing: 20px;mso-font-width:-100%;mso-text-raise:18\\" hidden>&nbsp;</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=\\"letter-spacing: 20px;mso-font-width:-100%\\" hidden>&nbsp;</i><![endif]--></span></a>"',
+      '"<!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=\\"padding:12px 20px 12px 20px;line-height:100%;text-decoration:none;display:inline-block;max-width:100%\\" target=\\"_blank\\"><span><!--[if mso]><i style=\\"letter-spacing: 20px;mso-font-width:-100%;mso-text-raise:18\\" hidden>&nbsp;</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=\\"letter-spacing: 20px;mso-font-width:-100%\\" hidden>&nbsp;</i><![endif]--></span></a>"',
     );
   });
 
   it("renders the <Button> component with no padding value", () => {
     const actualOutput = render(<Button href="https://example.com" />);
     expect(actualOutput).toMatchInlineSnapshot(
-      '"<!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\\" data-id=\\"react-email-button\\" style=\\"line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px\\" target=\\"_blank\\"><span><!--[if mso]><i style=\\"letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0\\" hidden>&nbsp;</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=\\"letter-spacing: 0px;mso-font-width:-100%\\" hidden>&nbsp;</i><![endif]--></span></a>"',
+      '"<!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%;padding:0px 0px 0px 0px\\" target=\\"_blank\\"><span><!--[if mso]><i style=\\"letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0\\" hidden>&nbsp;</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=\\"letter-spacing: 0px;mso-font-width:-100%\\" hidden>&nbsp;</i><![endif]--></span></a>"',
     );
   });
 });
diff --git a/packages/button/src/button.tsx b/packages/button/src/button.tsx
@@ -1,69 +1,72 @@
 import * as React from "react";
-import { pxToPt } from "./utils";
+import { parsePadding, pxToPt } from "./utils";
 
-type RootProps = React.ComponentPropsWithoutRef<"a">;
-
-export interface ButtonProps extends RootProps {
-  pX?: number;
-  pY?: number;
-}
+type ButtonProps = React.ComponentPropsWithoutRef<"a">;
 
 export const Button: React.FC<Readonly<ButtonProps>> = ({
   children,
   style,
-  pX = 0,
-  pY = 0,
   target = "_blank",
   ...props
 }) => {
-  const y = (pY || 0) * 2;
-  const textRaise = pxToPt(y.toString());
+  const { pt, pr, pb, pl } = parsePadding({
+    padding: style?.padding,
+    paddingLeft: style?.paddingLeft,
+    paddingRight: style?.paddingRight,
+    paddingTop: style?.paddingTop,
+    paddingBottom: style?.paddingBottom,
+  });
+
+  const y = pt + pb;
+  const textRaise = pxToPt(y);
 
   return (
     <a
       {...props}
-      data-id="react-email-button"
-      style={buttonStyle({ ...style, pX, pY })}
+      style={buttonStyle({ ...style, pt, pr, pb, pl })}
       target={target}
     >
       <span
         dangerouslySetInnerHTML={{
-          __html: `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`,
+          __html: `<!--[if mso]><i style="letter-spacing: ${pl}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`,
         }}
       />
-      <span style={buttonTextStyle(pY)}>{children}</span>
+      <span style={buttonTextStyle(pb)}>{children}</span>
       <span
         dangerouslySetInnerHTML={{
-          __html: `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`,
+          __html: `<!--[if mso]><i style="letter-spacing: ${pr}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`,
         }}
       />
     </a>
   );
 };
 
 const buttonStyle = (
-  style?: React.CSSProperties & { pY: number; pX: number },
+  style?: React.CSSProperties & {
+    pt: number;
+    pr: number;
+    pb: number;
+    pl: number;
+  },
 ) => {
-  const { pY, pX, ...rest } = style || {};
+  const { pt, pr, pb, pl, ...rest } = style || {};
 
   return {
     ...rest,
     lineHeight: "100%",
     textDecoration: "none",
     display: "inline-block",
     maxWidth: "100%",
-    padding: `${pY}px ${pX}px`,
+    padding: `${pt}px ${pr}px ${pb}px ${pl}px`,
   };
 };
 
-const buttonTextStyle = (pY?: number) => {
-  const paddingY = pY || 0;
-
+const buttonTextStyle = (pb?: number) => {
   return {
     maxWidth: "100%",
     display: "inline-block",
     lineHeight: "120%",
     msoPaddingAlt: "0px",
-    msoTextRaise: pxToPt(paddingY.toString()),
+    msoTextRaise: pxToPt(pb || 0),
   };
 };
diff --git a/packages/button/src/utils/index.ts b/packages/button/src/utils/index.ts
@@ -1 +1,2 @@
 export * from "./px-to-pt";
+export * from "./parse-padding";
diff --git a/packages/button/src/utils/parse-padding.ts b/packages/button/src/utils/parse-padding.ts
@@ -0,0 +1,110 @@
+type PaddingType = string | number | undefined;
+
+interface PaddingProperties {
+  padding: PaddingType;
+  paddingTop?: PaddingType;
+  paddingRight?: PaddingType;
+  paddingBottom?: PaddingType;
+  paddingLeft?: PaddingType;
+}
+
+/**
+ * converts padding value to `px` equivalent.
+ * @example "1em" =\> 16
+ */
+export function convertToPx(value: PaddingType) {
+  let px = 0;
+
+  if (!value) {
+    return px;
+  }
+
+  if (typeof value === "number") {
+    return value;
+  }
+
+  const matches = value.match(/^([\d.]+)(px|em|rem|%)$/);
+
+  if (matches && matches.length === 3) {
+    const numValue = parseFloat(matches[1]);
+    const unit = matches[2];
+
+    switch (unit) {
+      case "px":
+        return numValue;
+      case "em":
+      case "rem":
+        px = numValue * 16;
+        return px;
+      case "%":
+        px = (numValue / 100) * 600;
+        return px;
+      default:
+        return numValue;
+    }
+  } else {
+    return 0;
+  }
+}
+
+/**
+ * Parses all the values out of a padding string to get the value for all padding props in `px`
+ * @example e.g. "10px" =\> pt: 10, pr: 10, pb: 10, pl: 10
+ */
+export function parsePadding({
+  padding = "",
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+}: PaddingProperties) {
+  let pt = 0;
+  let pr = 0;
+  let pb = 0;
+  let pl = 0;
+
+  if (typeof padding === "number") {
+    pt = padding;
+    pr = padding;
+    pb = padding;
+    pl = padding;
+  } else {
+    const values = padding.split(/\s+/);
+
+    switch (values.length) {
+      case 1:
+        pt = convertToPx(values[0]);
+        pr = convertToPx(values[0]);
+        pb = convertToPx(values[0]);
+        pl = convertToPx(values[0]);
+        break;
+      case 2:
+        pt = convertToPx(values[0]);
+        pb = convertToPx(values[0]);
+        pr = convertToPx(values[1]);
+        pl = convertToPx(values[1]);
+        break;
+      case 3:
+        pt = convertToPx(values[0]);
+        pr = convertToPx(values[1]);
+        pl = convertToPx(values[1]);
+        pb = convertToPx(values[2]);
+        break;
+      case 4:
+        pt = convertToPx(values[0]);
+        pr = convertToPx(values[1]);
+        pb = convertToPx(values[2]);
+        pl = convertToPx(values[3]);
+        break;
+      default:
+        break;
+    }
+  }
+
+  return {
+    pt: paddingTop ? convertToPx(paddingTop) : pt,
+    pr: paddingRight ? convertToPx(paddingRight) : pr,
+    pb: paddingBottom ? convertToPx(paddingBottom) : pb,
+    pl: paddingLeft ? convertToPx(paddingLeft) : pl,
+  };
+}
diff --git a/packages/button/src/utils/px-to-pt.ts b/packages/button/src/utils/px-to-pt.ts
@@ -1,2 +1,2 @@
-export const pxToPt = (px: string): number | null =>
-  isNaN(Number(px)) ? null : (parseInt(px, 10) * 3) / 4;
+export const pxToPt = (px: number): number | null =>
+  typeof px === "number" && !isNaN(Number(px)) ? (px * 3) / 4 : null;
diff --git a/packages/button/src/utils/utils.spec.ts b/packages/button/src/utils/utils.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from "./px-to-pt";`
	`2`	`+export * from "./parse-padding";`