Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(jsx-email): add link href to vml for outlook buttons #274

Merged

Conversation

osdiab
Copy link
Contributor

@osdiab osdiab commented Dec 25, 2024

Component / Package Name:

This PR contains:

  • bugfix
  • feature
  • refactor
  • documentation
  • other

Are tests included?

  • yes (bugfixes and features will not be merged without tests)
  • no

Breaking Changes?

  • yes (breaking changes will not be merged unless absolutely necessary)
  • no

If yes, please include "BREAKING CHANGES:" in the first commit message body, followed by a description of what is breaking.

List any relevant issue numbers:

resolves #272

Description

Something like this should fix that issue. based off of what I found from this random tutorial online. https://www.nobledesktop.com/learn/html-email/bulletproof-buttons-in-outlook

Copy link
Contributor Author

@osdiab osdiab left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know how to actually run this locally to send a real email out to see how it turns out but based on my manual experiments messing around with the output on my existing codebase that does have email sending hooked up, something like this should work.

packages/jsx-email/src/components/button.tsx Outdated Show resolved Hide resolved
packages/jsx-email/src/components/button.tsx Outdated Show resolved Hide resolved
packages/jsx-email/src/components/button.tsx Outdated Show resolved Hide resolved
packages/jsx-email/src/components/button.tsx Outdated Show resolved Hide resolved
@lordelogos
Copy link
Collaborator

Hi @osdiab,

Thank you for this PR—it helped me identify an oversight related to the href prop in the VML button implementation.

The current VML button is based on the bullet proof email button by Stigm
Upon reviewing your code and investigating the issue in the existing component, I discovered that the v:roundrect element is missing the href prop, which is the root cause of the problem.

  <v:roundrect href={href} ...>

Would you like to address this in your PR, or should I go ahead and make the necessary changes?

Looking forward to your thoughts!

@lordelogos lordelogos self-assigned this Jan 1, 2025
@lordelogos lordelogos changed the title add link to vml for outlook buttons fix(jsx-email): add link href to vml for outlook buttons Jan 7, 2025
@shellscape shellscape merged commit 0062fc0 into shellscape:main Jan 8, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Outlook classic: Buttons are not actually clickable
3 participants