Apply button visuals to the clickable surface across email targets

packages/email-renderer/test/button-surface.test.ts

@@ -0,0 +1,16 @@
+import { expect, test } from "bun:test";
+import { buttonBlock, ampLayoutCss } from "../src/blocks.ts";
+
+test("button visuals target the clickable surface rather than the full-width wrapper", async () => {
+  const node = {id:"cta",type:"content.button",version:1,props:{label:"Act",href:"https://example.com"},styles:{backgroundColor:{base:"#123456"},padding:{base:"8px 32px"},borderRadius:{base:"20px"}},slots:{}};
+  const context = {node,context:{},slots:{}} as never;
+  const html = String(await buttonBlock.renderers!.emailHtml!(context));
+  const wrapper = html.match(/<td data-block-id="cta"[^>]*>/)![0];
+  expect(wrapper).not.toContain("#123456");
+  expect(wrapper).not.toContain("20px");
+  expect(wrapper).not.toContain("32px");
+  expect(html).toContain('bgcolor="#123456"');
+  expect(html.match(/<a [^>]*>/)![0]).toContain("padding:8px 32px");
+  expect(ampLayoutCss(node)).toContain("padding:8px 32px");
+  expect(String(await buttonBlock.renderers!.mjml!(context))).toContain('inner-padding="8px 32px"');
+});