Skip to content

feat: add comprehensive CTA#1221

Open
benlife5 wants to merge 5 commits into
2026-custom-components-templatesfrom
comprehensive-cta
Open

feat: add comprehensive CTA#1221
benlife5 wants to merge 5 commits into
2026-custom-components-templatesfrom
comprehensive-cta

Conversation

@benlife5
Copy link
Copy Markdown
Contributor

Our CTA props, resolution, and rendering are split across many components and slots. This attempts to create a single field type and React component with all the major CTA behavior. This should simplify it for the skill while leaving the existing complex OOTB behavior unaffected.

Screen.Recording.2026-05-26.at.2.47.24.PM.mov

@github-actions
Copy link
Copy Markdown
Contributor

Warning: Component files have been updated but no migrations have been added. See https://github.com/yext/visual-editor/blob/main/packages/visual-editor/src/components/migrations/README.md for more information.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 26, 2026

Review Change Stack

Warning

Review limit reached

@benlife5, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 15 minutes and 30 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d9caa505-c79d-411b-bfc4-a8d8ea32bac2

📥 Commits

Reviewing files that changed from the base of the PR and between 8cd886a and 49bf598.

📒 Files selected for processing (1)
  • packages/visual-editor/locales/platform/nb/visual-editor.json

Walkthrough

This PR introduces a comprehensive CTA (Call-to-Action) system for the visual editor. It extends the base CTA component with an optional inline style prop, adds a new ComprehensiveCTA render component that normalizes configuration and handles localization, creates a ComprehensiveCTAField editor with dual data/styles schema support for controlling button vs link rendering and styling, and registers the field in the visual editor's field mapping system. The implementation includes full test coverage and preserves composed value structures through independent data and styles editors.

Sequence Diagram: ComprehensiveCTA Data Flow

sequenceDiagram
  participant User as Editor User
  participant Field as ComprehensiveCTAField
  participant Schema1 as YextAutoField (Data)
  participant Schema2 as YextAutoField (Styles)
  participant Component as ComprehensiveCTA
  participant CTA as CTA Atom

  User->>Field: open/edit Comprehensive CTA field
  Field->>Schema1: render Data schema
  Field->>Schema2: render Styles schema
  User->>Schema1: modify actionType/customId
  Schema1->>Field: onChange updates data subtree
  User->>Schema2: change variant/color
  Schema2->>Field: onChange updates styles subtree
  Field->>Component: pass normalized ComprehensiveCTAValue
  Component->>Component: resolveComponentData (localize) & compute styles
  Component->>CTA: render with merged props (including style)
  CTA->>CTA: spread style prop into Button/Link
Loading

Possibly related PRs

  • yext/visual-editor#1023: Both PRs modify the shared CTA rendering at packages/visual-editor/src/components/atoms/cta.tsx (type/prop-driven Button vs Link rendering branches), so the main PR’s added CTAProps.style threading is directly tied to the retrieved PR’s custom button/actionType work.

Suggested labels

create-dev-release

Suggested reviewers

  • briantstephan
  • asanehisa
  • mkilpatrick
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat: add comprehensive CTA' accurately reflects the main changeset focus: introducing a new ComprehensiveCTA component and associated field type.
Description check ✅ Passed The description is related to the changeset, explaining the consolidation of CTA behavior into a single component to simplify usage while preserving existing OOTB behavior.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch comprehensive-cta

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.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/visual-editor/src/fields/styledFields/ComprehensiveCTAField.tsx`:
- Around line 17-39: The data shape declared in ComprehensiveCTAValue is missing
the normalizeLink property that defaultComprehensiveCTAValue includes, causing a
type mismatch; update the ComprehensiveCTAValue.data type to include a
normalizeLink field (with the same type used in
defaultComprehensiveCTAValue.data.normalizeLink) so the declared type matches
the default value (and apply the same addition where else the data type is
declared/used).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c6f27204-a958-48df-bae5-8ac02adfd31a

📥 Commits

Reviewing files that changed from the base of the PR and between 10ca4e0 and 5c51924.

📒 Files selected for processing (8)
  • packages/visual-editor/src/components/atoms/cta.tsx
  • packages/visual-editor/src/components/contentBlocks/ComprehensiveCTA.tsx
  • packages/visual-editor/src/components/contentBlocks/index.ts
  • packages/visual-editor/src/fields/fieldOverrides.ts
  • packages/visual-editor/src/fields/fields.ts
  • packages/visual-editor/src/fields/styledFields/ComprehensiveCTAField.test.tsx
  • packages/visual-editor/src/fields/styledFields/ComprehensiveCTAField.tsx
  • packages/visual-editor/src/fields/styledFields/index.ts

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/visual-editor/locales/platform/nb/visual-editor.json`:
- Line 284: fields.linkStyles currently uses "Koble stiler", which is
inconsistent with the repository’s "Lenke/Lenker" terminology; update the
translation value for fields.linkStyles to use the link-consistent wording (for
example "Lenkestiler" or "Lenke-stiler") so it matches other keys using
"Lenke"/"Lenker" in the same locale file.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 2fd779dd-7099-40e3-8e32-75113fb25a7f

📥 Commits

Reviewing files that changed from the base of the PR and between 5c51924 and 8cd886a.

⛔ Files ignored due to path filters (1)
  • packages/visual-editor/src/components/testing/screenshots/Locator/[tablet] latest version default props.png is excluded by !**/*.png, !packages/visual-editor/src/components/testing/screenshots/**
📒 Files selected for processing (28)
  • packages/visual-editor/locales/platform/cs/visual-editor.json
  • packages/visual-editor/locales/platform/da/visual-editor.json
  • packages/visual-editor/locales/platform/de/visual-editor.json
  • packages/visual-editor/locales/platform/en-GB/visual-editor.json
  • packages/visual-editor/locales/platform/en/visual-editor.json
  • packages/visual-editor/locales/platform/es/visual-editor.json
  • packages/visual-editor/locales/platform/et/visual-editor.json
  • packages/visual-editor/locales/platform/fi/visual-editor.json
  • packages/visual-editor/locales/platform/fr/visual-editor.json
  • packages/visual-editor/locales/platform/hr/visual-editor.json
  • packages/visual-editor/locales/platform/hu/visual-editor.json
  • packages/visual-editor/locales/platform/it/visual-editor.json
  • packages/visual-editor/locales/platform/ja/visual-editor.json
  • packages/visual-editor/locales/platform/lt/visual-editor.json
  • packages/visual-editor/locales/platform/lv/visual-editor.json
  • packages/visual-editor/locales/platform/nb/visual-editor.json
  • packages/visual-editor/locales/platform/nl/visual-editor.json
  • packages/visual-editor/locales/platform/pl/visual-editor.json
  • packages/visual-editor/locales/platform/pt/visual-editor.json
  • packages/visual-editor/locales/platform/ro/visual-editor.json
  • packages/visual-editor/locales/platform/sk/visual-editor.json
  • packages/visual-editor/locales/platform/sv/visual-editor.json
  • packages/visual-editor/locales/platform/tr/visual-editor.json
  • packages/visual-editor/locales/platform/zh-TW/visual-editor.json
  • packages/visual-editor/locales/platform/zh/visual-editor.json
  • packages/visual-editor/src/components/atoms/cta.tsx
  • packages/visual-editor/src/components/contentBlocks/ComprehensiveCTA.tsx
  • packages/visual-editor/src/fields/styledFields/ComprehensiveCTAField.test.tsx
💤 Files with no reviewable changes (2)
  • packages/visual-editor/src/components/contentBlocks/ComprehensiveCTA.tsx
  • packages/visual-editor/src/fields/styledFields/ComprehensiveCTAField.test.tsx
✅ Files skipped from review due to trivial changes (19)
  • packages/visual-editor/locales/platform/da/visual-editor.json
  • packages/visual-editor/locales/platform/en-GB/visual-editor.json
  • packages/visual-editor/locales/platform/sv/visual-editor.json
  • packages/visual-editor/locales/platform/fi/visual-editor.json
  • packages/visual-editor/locales/platform/sk/visual-editor.json
  • packages/visual-editor/locales/platform/hr/visual-editor.json
  • packages/visual-editor/locales/platform/pl/visual-editor.json
  • packages/visual-editor/locales/platform/ja/visual-editor.json
  • packages/visual-editor/locales/platform/ro/visual-editor.json
  • packages/visual-editor/locales/platform/pt/visual-editor.json
  • packages/visual-editor/locales/platform/de/visual-editor.json
  • packages/visual-editor/locales/platform/zh-TW/visual-editor.json
  • packages/visual-editor/locales/platform/it/visual-editor.json
  • packages/visual-editor/locales/platform/nl/visual-editor.json
  • packages/visual-editor/locales/platform/en/visual-editor.json
  • packages/visual-editor/locales/platform/lv/visual-editor.json
  • packages/visual-editor/locales/platform/es/visual-editor.json
  • packages/visual-editor/locales/platform/lt/visual-editor.json
  • packages/visual-editor/locales/platform/hu/visual-editor.json

Comment thread packages/visual-editor/locales/platform/nb/visual-editor.json Outdated
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.

1 participant