feat: locator's page title is editable and set to h1, color selection added to locator's page title, locator cards and nearby locations cards by rkeerthient · Pull Request #1015 · yext/visual-editor

rkeerthient · 2026-02-02T09:15:27Z

JIRA - OPAQF-92, OPAQF-93

Locator:

Page title is editable, defaults to H1, and supports color customization.
Heading in Location result cards support color customization.
Added a migration file to set a default page title. When I tried setting this in the component using resolveFields, on-load, it applied changes and showed a Discard changes option enabled. Clicking discard cleared the title prop.

Nearby Locations:

Title in Nearby Location cards support color customization.

Updated test cases and locales.

Known Issue:

Unsure why the latitude is updated in Nearby location cards.
For locator result cards, the serial number now uses the same color as the title.

Screen.Recording.2026-02-02.at.2.27.58.PM.mov

…r results card, locator title and neary locations

…s-new

coderabbitai · 2026-02-02T09:17:30Z

Walkthrough

This PR adds a configurable, translatable page heading to the Locator component (title + optional SITE_COLOR), updates LocatorResultCard and NearbyLocations wrappers to accept heading colors, adds translations for the new key across platform locales, introduces a migration to inject a default locator title, updates tests to cover color variants, and documents the new pageHeading prop.

Sequence Diagram(s)

sequenceDiagram
    participant Editor as Visual Editor
    participant Migration as Migration System
    participant LocatorComp as Locator Component
    participant i18n as Translation System
    participant UI as Rendered Output

    Editor->>Migration: Provide component props (may omit pageHeading)
    activate Migration
    Migration->>LocatorComp: apply addDefaultLocatorPageTitle migration
    LocatorComp->>LocatorComp: ensure pageHeading.title.en exists (inject default if missing)
    deactivate Migration

    LocatorComp->>i18n: resolveComponentData(pageHeading.title, language, document)
    activate i18n
    i18n-->>LocatorComp: localized heading string
    deactivate i18n

    LocatorComp->>LocatorComp: determine heading color (optional SITE_COLOR)
    LocatorComp->>UI: render heading with localized text and color
    activate UI
    UI-->>UI: display translated, colored page heading
    deactivate UI

Possibly related PRs

feat: add facets to locator component filter modal #833: Modifies the Locator component and localization surface; overlaps with adding pageHeading translations and Locator changes.
fix: call migrate in locator template #904: Adjusts locator migration/templating and migration invocation; related to the new migration and registry entry.
feat: added color options to heading text #963: Adds heading color support and related locale/type changes; directly overlaps with color props and translations added here.

Suggested Labels

create-dev-release

Suggested Reviewers

benlife5
asanehisa
mkilpatrick
briantstephan

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title comprehensively describes all major changes: locator page title editing, h1 semantic markup, and color selection for locator/nearby location components.
Description check	✅ Passed	The description provides detailed context for the changeset, including specific objectives (page title editability, color customization, migration logic), affected components, test updates, and known issues.

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

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch links-nearby-locations-new

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.}

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

packages/visual-editor/src/components/pageSections/NearbyLocations/NearbyLocations.test.tsx (1)
610-618: ⚠️ Potential issue | 🟠 Major

Remove version 57 suppression of accessibility assertions.

Logging violations with console.warn masks potential accessibility regressions during heading and color work. Either enforce assertions for all versions or explicitly allowlist known violations with a tracked TODO.
Suggested fix (restore enforcement)
      const results = await axe(container);
-     if (version === 57) {
-       console.warn(results);
-     } else {
-       expect(results).toHaveNoViolations();
-     }
+     expect(results).toHaveNoViolations();
        const results = await axe(container);
-       if (version === 57) {
-         console.warn(results);
-       } else {
-         expect(results).toHaveNoViolations();
-       }
+       expect(results).toHaveNoViolations();
Also applies to: 624-629
packages/visual-editor/src/components/Locator.tsx (1)
1107-1121: ⚠️ Potential issue | 🟡 Minor

Fix localization fallback for missing heading translations.

When pageHeading.title lacks a translation for the current locale, resolveComponentData returns an empty string. The ?? operator does not trigger on empty strings, so the heading will render blank instead of falling back to DEFAULT_TITLE. Use t("findALocation", DEFAULT_TITLE) to ensure non-English users see a localized heading with proper fallback.
Suggested fix
  const resolvedHeading =
    resolveComponentData(pageHeading?.title, i18n.language, streamDocument) ??
-    DEFAULT_TITLE;
+    t("findALocation", DEFAULT_TITLE);

🤖 Fix all issues with AI agents

In `@packages/visual-editor/src/components/Locator.tsx`:
- Around line 450-453: The new required pageHeading prop in the Locator
component type makes a breaking change; make it optional by changing the
declaration of pageHeading to pageHeading?: { title: TranslatableString; color?:
BackgroundStyle; } and update any places that destructure or assume its presence
(e.g., Locator props usage, render helpers) to handle undefined safely (use
existing defaults or optional chaining/null coalescing) so runtime
defaults/migrations remain sufficient.

packages/visual-editor/src/components/Locator.tsx

asanehisa · 2026-02-02T15:24:29Z

packages/visual-editor/src/components/Locator.tsx

+    label: msg("fields.pageHeading", "Page Heading"),
+    type: "object",
+    objectFields: {
+      title: TranslatableStringField<TranslatableString>(


Any reason this isn't using Yext Field?

Didn't use YextField as the ticket says it should be a static text. Plz advice if I still need to go ahead with YextField.

This can be YextField as well with type: "text" rather than "entityField"

YextField doesn't automatically mean it won't be static, just our wrapper on puck fields to enable more functionality we want

asanehisa · 2026-02-02T15:24:38Z

packages/visual-editor/src/components/Locator.tsx

      },
    }
  ),
+  pageHeading: {


this can also use YextField!

Didn't use YextField as the ticket says it should be a static text.

For PageHeading u can do

YextField(msg("fields.pageHeading", "Page Heading"), { type: "object", objectFields: { ... }, }),

packages/visual-editor/src/components/LocatorResultCard.tsx

benlife5 · 2026-02-04T14:31:33Z

packages/visual-editor/src/components/Locator.tsx

+  const resolvedHeading =
+    (pageHeading?.title &&
+      resolveComponentData(pageHeading.title, i18n.language, streamDocument)) ||
+    t(DEFAULT_TITLE);


Sorry, this is my bad but I think it needs to be t("findALocation", "Find a Location") since t(DEFAULT_TITLE/"Find a Location") won't match to a translation. You can check with the Set Components Locale button when running locally

rkeerthient and others added 3 commits January 30, 2026 00:51

editable locator page title, ability to choose colors for both locato…

c96c539

…r results card, locator title and neary locations

Merge remote-tracking branch 'origin/main' into links-nearby-location…

fbb355e

…s-new

docs: auto-generate component documentation

c746954

github-actions bot added 2 commits February 2, 2026 09:21

Update component screenshots for visual-editor

2864f46

Update component screenshots for visual-editor

0c03671

coderabbitai bot reviewed Feb 2, 2026

View reviewed changes

packages/visual-editor/src/components/Locator.tsx Outdated Show resolved Hide resolved

cr fix

d2cda3e

rkeerthient requested review from asanehisa and benlife5 February 2, 2026 13:00

benlife5 reviewed Feb 2, 2026

View reviewed changes

packages/visual-editor/src/components/Locator.tsx Outdated Show resolved Hide resolved

asanehisa reviewed Feb 2, 2026

View reviewed changes

rkeerthient and others added 3 commits February 3, 2026 13:06

updated js docs and fixed resolvedHeading

8d6a7b4

docs: auto-generate component documentation

62d123a

Merge branch 'main' into links-nearby-locations-new

f48e968

rkeerthient requested review from asanehisa and benlife5 February 3, 2026 17:50

benlife5 reviewed Feb 4, 2026

View reviewed changes

benlife5 mentioned this pull request Feb 4, 2026

feat: add custom button functionality to cta #1023

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: locator's page title is editable and set to h1, color selection added to locator's page title, locator cards and nearby locations cards#1015

feat: locator's page title is editable and set to h1, color selection added to locator's page title, locator cards and nearby locations cards#1015
rkeerthient wants to merge 9 commits intomainfrom
links-nearby-locations-new

rkeerthient commented Feb 2, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Feb 2, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

asanehisa Feb 2, 2026

Uh oh!

rkeerthient Feb 2, 2026 •

edited

Loading

Uh oh!

asanehisa Feb 3, 2026

Uh oh!

asanehisa Feb 3, 2026

Uh oh!

asanehisa Feb 2, 2026

Uh oh!

rkeerthient Feb 2, 2026

Uh oh!

asanehisa Feb 3, 2026

Uh oh!

Uh oh!

benlife5 Feb 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

rkeerthient commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Sequence Diagram(s)

Possibly related PRs

Suggested Labels

Suggested Reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

asanehisa Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

rkeerthient Feb 2, 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!

asanehisa Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

asanehisa Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

asanehisa Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

rkeerthient Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

asanehisa Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

benlife5 Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rkeerthient commented Feb 2, 2026 •

edited

Loading

coderabbitai bot commented Feb 2, 2026 •

edited

Loading

rkeerthient Feb 2, 2026 •

edited

Loading