Skip to content

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

Open
Abhishek-B-R wants to merge 1 commit into
resend:canaryfrom
Abhishek-B-R:fix/button-zero-padding-longhand
Open

Abhishek-B-R wants to merge 1 commit into
resend:canaryfrom
Abhishek-B-R:fix/button-zero-padding-longhand

Conversation

@Abhishek-B-R

@Abhishek-B-R Abhishek-B-R commented Oct 18, 2026 •

Copy link
Copy Markdown

Fixes #3792

Intent

Bug fix. <Button style={{ padding: '12px 20px', paddingTop: 0 }}> rendered with 12px of top padding, because the explicit 0 was dropped and the shorthand took over.

What was going on

parsePadding turned each side into px with a truthiness check:

paddingTop: paddingTop ? convertToPx(paddingTop) : undefined,

so the number 0 came back as undefined. Button spreads the user's style (which still contains padding: '12px 20px') and then the parsed longhands on top. React omits undefined style values, so the rendered <a> had

padding:12px 20px;padding-right:20px;padding-left:20px

with no padding-top at all. The Outlook spacer is computed from the parsed values with ?? 0, so it already treated the top as 0, which means Outlook and every other client disagreed about the button height. paddingTop: '0px' was fine because the string is truthy.

Changes

parsePadding now only skips undefined and the empty string, so 0 is converted like any other value. The empty string case keeps its existing behaviour (there is a test for it).

Verification

Two tests, both written before the fix and both failing on canary:

  • parsePadding({ padding: '12px 20px', paddingTop: 0 }) returned paddingTop: undefined, now 0.
  • Rendering the Button above now contains padding-top:0; and padding-bottom:0;.

vitest run in packages/react-email: 304 passed. The one failing test and two failing suites (cli/commands/testing/export*.spec.ts) fail the same way on a clean canary checkout in my environment, so they are unrelated. tsc --noEmit and biome check are clean.

Added a patch changeset for react-email.


Summary by cubic

Fixes <Button> dropping an explicit longhand padding of 0, so style={{ padding: '12px 20px', paddingTop: 0 }} now renders with no top padding instead of falling back to the shorthand's 12px.

parsePadding skipped falsy values, so 0 became undefined and React omitted it from the style, letting the shorthand win. It now only skips undefined and empty strings. Tests cover the parsing and the rendered output, and a patch changeset for react-email is included.

Written for commit 537ac04. Summary will update on new commits.

View guided diff

parsePadding returned undefined for a longhand set to the number 0
because it used a truthiness check before converting to px. Button
spreads the original style first and then the parsed longhands, so an
undefined paddingTop is omitted and the padding shorthand wins: with
{ padding: '12px 20px', paddingTop: 0 } the button rendered 12px of top
padding in every client, while the Outlook spacer was computed as if it
were 0.

Only skip undefined and empty strings, so 0 is passed through.
@changeset-bot

changeset-bot Bot commented Oct 18, 2026

Copy link
Copy Markdown

馃 Changeset detected

Latest commit: 537ac04

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
react-email Patch
@react-email/editor Patch
@react-email/ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Oct 18, 2026

Copy link
Copy Markdown
Contributor

@Abhishek-B-R is attempting to deploy a commit to the resend Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added the linear-synced PR has been synced to Linear label Oct 18, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

linear-synced PR has been synced to Linear

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Button: a longhand padding of 0 is ignored when the padding shorthand is set

1 participant