fix: theme in locator

[asanehisa]

See global styles editor: https://www.yext.com/s/4412098/yextsites/162218/branches/133374/theme#themeId=development-test&pageSetId=test-locator&locale=en&entityId=2044535783

See live site: https://jovially-similar-mongrel.pgsdemo.com/locator-slug-162218-133374-test

Can't seem to get translations in Locator to work without a ridiculously long delay for everything, so gave up (not a new problem).

[github-actions]

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.

[pkg-pr-new]

• pages-visual-editor-starter

  npm i https://pkg.pr.new/yext/visual-editor/@yext/visual-editor@1017
  

commit: 2f63b6d

[coderabbitai]

Walkthrough

Tests were updated to run migration, call resolveAllData(data, puckConfig, { streamDocument: document }), and await injectTranslations(document); translations are passed into VisualEditorProvider via templateProps alongside document. A new "version 24 with filters" test exercises locator pageset filters and resultCard layout. Locator UI text nodes were wrapped with a Body component and typography-related font classes were added; no changes to business logic, event handling, or state flow were made.

Sequence Diagram(s)

sequenceDiagram
    participant Test as Locator.test.tsx
    participant Fixture as Document (fixture)
    participant Migrate as migrate()
    participant Resolver as resolveAllData()
    participant Injector as injectTranslations()
    participant Provider as VisualEditorProvider
    participant Locator as Locator UI

    Test->>Fixture: load fixture document
    Test->>Migrate: migrate(fixture)
    Migrate-->>Test: migrated data
    Test->>Resolver: resolveAllData(data, puckConfig, { streamDocument: document })
    Resolver-->>Test: resolved data
    Test->>Injector: injectTranslations(document)
    Injector-->>Test: translations
    Test->>Provider: render with templateProps { document, translations }
    Provider->>Locator: mount Locator with props
    Locator-->>Provider: render UI (uses translations & typography wrappers)

Loading

Possibly related PRs

• fix: call migrate in locator template #904: Adds migrate and resolveAllData usage and adjusts locator migration/test wiring — directly overlaps with test data resolution changes.
• fix: slots qa part 3 #863: Modifies Locator component and tests; overlaps with the Locator UI/test updates and i18n integration.

Suggested reviewers

• mkilpatrick
• briantstephan
• jwartofsky-yext
• mkouzel-yext

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: theme in locator' directly corresponds to the main changes in the PR, which involve adding typography/theme styling (Body components and font-related classes) to the Locator component.
Description check	✅ Passed	The description includes references to the global styles editor and live site demonstrating the theme changes, along with a screenshot showing the themed Locator UI, which is clearly related to the changeset.

_{✏️ 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 theme-locator

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/visual-editor/src/components/Locator.tsx`:
- Around line 1121-1128: The button currently nests the Body component (which
renders a <p>) inside a <button>, causing invalid HTML/accessibility issues;
update these buttons in Locator.tsx to render an inline element instead—either
change the Body usage to an inline wrapper (e.g., replace Body with a span) or
modify Body to accept an as="span"/asChild prop and use that (update the button
around setShowFilterModal and the label text that uses Body), and apply the same
change for the other occurrences noted (around the FaSlidersH usage and the
locations referenced in the review).