Built Welcome Emails design customization modal by cmraible · Pull Request #26802 · TryGhost/Ghost

cmraible · 2026-03-12T15:33:15Z

Summary

Implemented new Welcome Emails design customization modal with preview on left, settings sidebar on right
Added shared email design modal layout component () for future newsletter customization reuse
Created email preview component with simplified welcome email layout showing title, body text, button, and footer
Built design settings form with color picker, font selector, and style toggle controls
Extracted color resolution logic into reusable utilities for semantic color handling
Exported ColorPicker from shade design system for use in admin-x-settings
Fixed ColorPicker gradient click bug and initial state color handling in shade component

coderabbitai · 2026-03-12T15:35:58Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 170ddf19-86e1-4e06-a64c-c8bcbefec7f4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch cmraible/welcome-email-modal

📝 Coding Plan

Generate coding plan for human review comments

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

ErisDS · 2026-03-12T15:50:26Z

🤖 Velo CI Failure Analysis

Classification: 🟠 SOFT FAIL

Workflow: CI
Failed Step: Run yarn nx affected -t lint --base=54cb356ad875063fddb58522e5d89ad2ed3e4c76
Run: View failed run
What failed: Lint errors in code
Why: The failure is caused by a code issue that needs to be fixed in this PR.
Action:
Check the error message and fix the issue in your code.

cmraible · 2026-03-12T19:03:39Z

    const selectedColor = Color(value);
    const defaultColor = Color(defaultValue);

-    const [hue, setHue] = useState(


There are some bugs in the color picker component. I'm going to pull this fix out into a separate PR and add tests for the color-picker component. For now I'll leave this here so it's functional for demos, but this diff will drop off before merging.

cmraible · 2026-03-12T19:05:41Z

@@ -0,0 +1,13 @@
+import ColorPickerField from '../color-picker-field';


This and all the other files in this directory are mostly just thin wrappers around Shade components, with the addition of the useEmailDesign() hooks for managing state and changes.

ErisDS · 2026-03-12T19:11:33Z

🤖 Velo CI Failure Analysis

Classification: 🟠 SOFT FAIL

Workflow: CI
Failed Step: Build TS packages
Run: View failed run
What failed: CI failure - likely code issue
Why: The failure appears to be related to code changes. Check the error output for details.
Action:
Review the error logs and fix the issue in your code.

cmraible · 2026-03-12T19:35:31Z

@@ -0,0 +1,217 @@
+import React from 'react';


This file is pretty gnarly

ErisDS · 2026-03-12T19:39:20Z

🤖 Velo CI Failure Analysis

Classification: 🟠 SOFT FAIL

Workflow: CI
Failed Step: Build assets for affected unit tests
Run: View failed run
What failed: CI failure - likely code issue
Why: The failure appears to be related to code changes. Check the error output for details.
Action:
Review the error logs and fix the issue in your code.

ErisDS · 2026-03-15T20:59:08Z

🤖 Velo CI Failure Analysis

Classification: 🟠 SOFT FAIL

Workflow: CI
Failed Step: Build assets for affected unit tests
Run: View failed run
What failed: CI failure - likely code issue
Why: The failure appears to be related to code changes. Check the error output for details.
Action:
Review the error logs and fix the issue in your code.

…rom shade Foundation for the welcome email design customization modal: - Export ColorPicker component from shade's index - Create EmailDesignSettings type and DEFAULT_EMAIL_DESIGN defaults - Extract color resolution logic into reusable design-utils

Reusable preview+sidebar modal layout built with shade Dialog. Left pane shows email preview, right sidebar (400px) holds design controls with title and save/close buttons.

- EmailPreview: simplified welcome email preview with real-time styling for colors, fonts, buttons, links, and dividers - DesignSettingsForm: design controls using shade ColorPicker, Select, ToggleGroup with font weight mapping logic

Replaced placeholder modal with full design customization UI: preview pane on left, design controls on right. Uses shared email-design components built with the shade design system. Currently frontend-only (no backend persistence yet).

Removed unused Button import and added explicit type annotations to callback parameters.

… preview - Extracted design fields into composable zero-prop components using React context - Added email envelope header (From, To, Subject) to preview - Wired General tab settings (publication title, header image, footer) to preview - Simplified reply-to email to text input - Removed publication icon, post title color, and title alignment fields - Matched border styling between sender header and email body

Split monolithic design-fields.tsx into a design-fields/ directory with one file per component for better maintainability and code navigation.

Welcome emails don't have a post title concept, so this section was misleading in the preview.

The welcome email modal now composes field components directly, making this wrapper unnecessary.

Broke sidebar into GeneralTab, DesignTab, and Sidebar components. Deleted unused post-title-color-field and title-alignment-field.

The email preview was a single large component with deeply nested inline conditionals and styles, making it hard to read and maintain. Extracted EnvelopeHeader, PublicationHeader, Divider, BodyContent, ActionButton, and Footer as discrete components. Replaced inline styles with Tailwind classes where possible. Removed unused publication icon prop and site icon reference.

The buttonTextColor from resolveAllColors can be undefined, so the ActionButton prop needed to be optional. The config.emailDomain returns a broad JSON type that needed a string cast.

Added eslint-disable comments for unfixable tailwindcss/classnames-order violations caused by complex arbitrary variants and border utilities.

The eslint-plugin-tailwindcss resolves the config path relative to the process CWD, not relative to the .eslintrc.cjs file. Using ${__dirname} makes the path absolute so it resolves correctly regardless of whether lint runs from the package dir or repo root. Same fix as applied to Shade in #26821.

cmraible · 2026-03-18T18:12:21Z

Split this into multiple smaller PRs that have merged separately.

cmraible commented Mar 12, 2026

View reviewed changes

cmraible added 13 commits March 16, 2026 11:04

Added shared email design modal layout component

9c895d2

Reusable preview+sidebar modal layout built with shade Dialog. Left pane shows email preview, right sidebar (400px) holds design controls with title and save/close buttons.

Fixed lint issues in design settings form

2d43465

Removed unused Button import and added explicit type annotations to callback parameters.

Fixed Tailwind CSS classnames order in email design components

d98eabd

Reverted unrelated ghost/admin lint fixes

e912a7d

Refactored design-fields into individual component files

d75b627

Split monolithic design-fields.tsx into a design-fields/ directory with one file per component for better maintainability and code navigation.

Removed post title from welcome email preview

9eb9566

Welcome emails don't have a post title concept, so this section was misleading in the preview.

Removed unused DesignSettingsForm component

b5a7ce5

The welcome email modal now composes field components directly, making this wrapper unnecessary.

Extracted sidebar tab components and removed unused design fields

a958811

Broke sidebar into GeneralTab, DesignTab, and Sidebar components. Deleted unused post-title-color-field and title-alignment-field.

cmraible force-pushed the cmraible/welcome-email-modal branch from dec7da9 to 93f0665 Compare March 16, 2026 18:08

cmraible added 3 commits March 16, 2026 15:17

Fixed TypeScript errors in email preview and welcome email modal

d4a42b6

The buttonTextColor from resolveAllColors can be undefined, so the ActionButton prop needed to be optional. The config.emailDomain returns a broad JSON type that needed a string cast.

Fixed Tailwind CSS classnames order lint errors

5f2ddd4

Added eslint-disable comments for unfixable tailwindcss/classnames-order violations caused by complex arbitrary variants and border utilities.

cmraible closed this Mar 18, 2026

cmraible deleted the cmraible/welcome-email-modal branch March 24, 2026 17:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Built Welcome Emails design customization modal#26802

Built Welcome Emails design customization modal#26802
cmraible wants to merge 16 commits intomainfrom
cmraible/welcome-email-modal

cmraible commented Mar 12, 2026

Uh oh!

coderabbitai Bot commented Mar 12, 2026 •

edited

Loading

Review skipped

Uh oh!

ErisDS commented Mar 12, 2026

Uh oh!

cmraible Mar 12, 2026 •

edited

Loading

Uh oh!

cmraible Mar 12, 2026

Uh oh!

ErisDS commented Mar 12, 2026

Uh oh!

cmraible Mar 12, 2026

Uh oh!

ErisDS commented Mar 12, 2026

Uh oh!

ErisDS commented Mar 15, 2026

Uh oh!

cmraible commented Mar 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1,13 @@
		import ColorPickerField from '../color-picker-field';

Uh oh!

Conversation

cmraible commented Mar 12, 2026

Summary

Uh oh!

coderabbitai Bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

ErisDS commented Mar 12, 2026

🤖 Velo CI Failure Analysis

Uh oh!

cmraible Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cmraible Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

ErisDS commented Mar 12, 2026

🤖 Velo CI Failure Analysis

Uh oh!

cmraible Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

ErisDS commented Mar 12, 2026

🤖 Velo CI Failure Analysis

Uh oh!

ErisDS commented Mar 15, 2026

🤖 Velo CI Failure Analysis

Uh oh!

cmraible commented Mar 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai Bot commented Mar 12, 2026 •

edited

Loading

cmraible Mar 12, 2026 •

edited

Loading