fix(button): clean up code, add href to roundrect for outlook clients

shellscape · Jan 7, 2025 · 99727d4 · 99727d4
1 parent 1c8a81a
commit 99727d4
Showing 1 changed file with 2 additions and 20 deletions.
diff --git a/packages/jsx-email/src/components/button.tsx b/packages/jsx-email/src/components/button.tsx
@@ -32,7 +32,6 @@ export const Button: JsxEmailComponent<ButtonProps> = ({
   fontSize = 16,
   align = 'left',
   withBackground = false,
-  rel,
   ...props
 }) => {
   // Logic for arcsize
@@ -72,7 +71,6 @@ export const Button: JsxEmailComponent<ButtonProps> = ({
 
   const baseButton = (
     <a
-      rel={rel}
       href={href}
       style={{
         ...baseStyles,
@@ -85,20 +83,6 @@ export const Button: JsxEmailComponent<ButtonProps> = ({
       {children}
     </a>
   );
-  const vmlFallbackLinkContents = (
-    <a
-      rel={rel}
-      href={href}
-      style={{
-        color: textColor,
-        ...baseStyles,
-        ...style
-      }}
-      {...props}
-    >
-      {children}
-    </a>
-  );
 
   return (
     <table
@@ -117,16 +101,14 @@ export const Button: JsxEmailComponent<ButtonProps> = ({
             <span
               dangerouslySetInnerHTML={{
                 __html: `<!--[if mso]>
-            <v:roundrect ${
-              rel ? `rel="${rel}" ` : ''
-            }href="${href}" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:${height}px;v-text-anchor:middle;width:${width}px;" arcsize="${arcsize}%" ${
+            <v:roundrect href="${href}" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:${height}px;v-text-anchor:middle;width:${width}px;" arcsize="${arcsize}%" ${
                   borderColor ? `strokecolor=${borderColor}` : ''
                 } ${borderSize ? `strokeweight="${borderSize}px"` : `stroke="false"`} ${
                   backgroundColor ? `fillcolor=${backgroundColor}` : `fill="false"`
                 }>
             <w:anchorlock/>
             <center style="font-size:${fontSize}px;${textColor ? `color:${textColor};` : ''}">
-            ${vmlFallbackLinkContents}
+            ${children}
             </center></v:roundrect>
             <![endif]-->`
               }}