fix(react-email): keep a longhand padding of 0 on Button

.changeset/button-zero-padding-longhand.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Keep a longhand padding of `0` on `<Button>`

packages/react-email/src/components/button/button.spec.tsx

@@ -28,6 +28,17 @@ describe('<Button> component', () => {
     );
   });
 
+  it('does not drop a longhand padding of 0 set after the shorthand', async () => {
+    const html = await render(
+      <Button
+        href="https://example.com"
+        style={{ padding: '12px 20px', paddingTop: 0, paddingBottom: 0 }}
+      />,
+    );
+    expect(html).toContain('padding-top:0;');
+    expect(html).toContain('padding-bottom:0;');
+  });
+
   it('renders the <Button> component with no padding value', async () => {
     const actualOutput = await render(<Button href="https://example.com" />);
     expect(actualOutput).toMatchInlineSnapshot(

packages/react-email/src/components/button/utils/parse-padding.ts

@@ -15,8 +15,8 @@ interface PaddingProperties {
 export function convertToPx(value: PaddingType) {
   let px = 0;
 
-  if (!value) {
-    return px;
+  if (value === undefined || value === '') {
+    return undefined;
   }
 
   if (typeof value === 'number') {
@@ -129,9 +129,9 @@ export function parsePadding(properties: PaddingProperties) {
   }
 
   return {
-    paddingTop: paddingTop ? convertToPx(paddingTop) : undefined,
-    paddingRight: paddingRight ? convertToPx(paddingRight) : undefined,
-    paddingBottom: paddingBottom ? convertToPx(paddingBottom) : undefined,
-    paddingLeft: paddingLeft ? convertToPx(paddingLeft) : undefined,
+    paddingTop: convertToPx(paddingTop),
+    paddingRight: convertToPx(paddingRight),
+    paddingBottom: convertToPx(paddingBottom),
+    paddingLeft: convertToPx(paddingLeft),
   };
 }

packages/react-email/src/components/button/utils/utils.spec.ts

@@ -32,8 +32,18 @@ describe('convertToPx', () => {
     expect(result).toBe(0);
   });
 
-  it('converts empaddingTopy input to 0', () => {
+  it('converts empty input to undefined', () => {
     const result = convertToPx('');
+    expect(result).toBeUndefined();
+  });
+
+  it('converts undefined input to undefined', () => {
+    const result = convertToPx(undefined);
+    expect(result).toBeUndefined();
+  });
+
+  it('keeps 0 as 0', () => {
+    const result = convertToPx(0);
     expect(result).toBe(0);
   });
 });
@@ -109,6 +119,16 @@ describe('parsePadding', () => {
     });
   });
 
+  it('keeps a specific padding value of 0 over the general padding value', () => {
+    const result = parsePadding({ padding: '12px 20px', paddingTop: 0 });
+    expect(result).toEqual({
+      paddingTop: 0,
+      paddingRight: 20,
+      paddingBottom: 12,
+      paddingLeft: 20,
+    });
+  });
+
   it('overrides general padding value with specific padding value if specified', () => {
     const result = parsePadding({ padding: 10, paddingRight: '1em' });
     expect(result).toEqual({