Added support for outline button style in emails #1520
Conversation
|
""" WalkthroughThis change updates the email rendering logic for call-to-action (CTA) buttons and header nodes to support differentiated inline styles, particularly for an "outline" button style controlled by a feature flag. In the CTA renderer, the styling for the Possibly related PRs
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/kg-default-nodes/lib/nodes/call-to-action/calltoaction-renderer.jsOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser '@babel/eslint-parser' declared in 'packages/kg-default-nodes/.eslintrc.js': Cannot find module '@babel/eslint-parser'
packages/kg-default-nodes/lib/nodes/header/renderers/v2/header-renderer.jsOops! Something went wrong! :( ESLint: 8.57.1 Error: Failed to load parser '@babel/eslint-parser' declared in 'packages/kg-default-nodes/.eslintrc.js': Cannot find module '@babel/eslint-parser'
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ Context from checks skipped due to timeout of 90000ms (2)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/kg-default-nodes/lib/nodes/call-to-action/calltoaction-renderer.js(3 hunks)packages/kg-default-nodes/lib/nodes/header/renderers/v2/header-renderer.js(3 hunks)packages/kg-default-nodes/test/nodes/call-to-action.test.js(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Node 20.11.1
- GitHub Check: Node 22.13.1
🔇 Additional comments (12)
packages/kg-default-nodes/lib/nodes/call-to-action/calltoaction-renderer.js (4)
62-69: Clear documentation of button styling separation.The comments effectively explain the separation of styling between
<td>and<a>elements, preparing for the outline button style implementation. This approach creates a clean foundation for the style variants.
71-86: Well-implemented outline button style with proper feature flag control.The implementation correctly:
- Checks for both the feature flag and the specific button style option
- Excludes accent buttons as they're handled by template CSS
- Sets appropriate transparent background with border in the button color
- Uses separate styling for the button container and link elements
This matches the PR objective of adding outline button style support in emails.
139-140: Correctly applied the separated link style.The change from
buttonStyletobuttonLinkStyleproperly implements the styling separation defined earlier.
188-189: Consistent styling approach applied to immersive layout.The same styling strategy is correctly applied to the immersive layout button, ensuring consistent button rendering across layout types.
packages/kg-default-nodes/test/nodes/call-to-action.test.js (4)
8-8: Good test preparation: importing the oneline utility.The import of the
onelinetagged template function will help normalize whitespace in style string comparisons, making tests more reliable.
51-53: Proper test configuration update.Adding the empty
designobject toexportOptionsensures tests can utilize the new design-based styling options.
499-511: Thorough test for accent outline buttons.This test verifies that accent outline buttons render correctly with the expected inline styles when the feature flag is enabled.
513-531: Comprehensive test for custom color outline buttons.This test thoroughly validates that:
- The button container has border, transparent background, and text color matching the button color
- The link element has consistent styling with transparent background and correct text color
- The
onelineutility correctly normalizes whitespace for reliable style comparisonsThe test ensures the custom color outline buttons render as expected with the feature flag enabled.
packages/kg-default-nodes/lib/nodes/header/renderers/v2/header-renderer.js (4)
68-73: Function signature improved and variables properly initialized.The function now accepts a unified
optionsparameter instead of separate parameters, which improves consistency and maintainability. The button styling variables are correctly initialized based on nodeData.
77-97: Logical implementation of outline button style for header nodes.The conditional logic correctly:
- Checks for the feature flag and button style option
- Handles both accent and non-accent button colors differently
- Sets appropriate styling with transparent background and matching border/text colors
- Uses !important where needed to ensure style application
This matches the call-to-action implementation approach while accounting for header-specific styling needs.
130-130: Properly using the updated button text color variable.The anchor element now correctly uses the
buttonTextColorvariable, which reflects the adjusted color based on the outline style condition.
192-192: Correctly updated function call to match new signature.The call to
emailTemplatenow correctly passes the entireoptionsobject instead of just the feature flag, aligning with the updated function signature.
packages/kg-default-nodes/lib/nodes/header/renderers/v2/header-renderer.js
Outdated
Show resolved
Hide resolved
ref https://linear.app/ghost/issue/PROD-1717 - updated header and call-to-action cards to support an outline button style option - these cards needed specific support because they override default button styles to allow for custom button colors
kevinansfield
force-pushed
the
button-style-support
branch
from
0c61543 to
0bb65d7
Compare
1 participant
ref https://linear.app/ghost/issue/PROD-1717