refactor: header improvements by benlife5 · Pull Request #1001 · yext/visual-editor

benlife5 · 2026-01-26T16:03:29Z

https://www.yext.com/s/4259018/yextsites/159383/pagesets

github-actions · 2026-01-26T16:03:55Z

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 · 2026-01-26T16:05:43Z

pages-visual-editor-starter

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

commit: c1bb9cc

…t layout data

coderabbitai · 2026-01-27T22:01:40Z

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

💤 Files selected but had no reviewable changes (1)

packages/visual-editor/src/vite-plugin/defaultLayoutData.ts

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

🔍 Trigger a full review

Walkthrough

Adds responsive header link overflow and collapse behavior with editor preview measurement. HeaderLinks gains a new collapsedLinks field, measurement scaffolding, overflow calculation, and an overflow dropdown; it exports resolveFields. useOverflow signature now accepts containerAdjustment. PrimaryHeaderSlot introduces a CTAContainer and editor hamburger overlay wiring via registerOverlayPortal. ExpandedHeader and default layout data are updated to include parentData, collapsedLinks, openInNewTab, and eventName fields. A migration for header link updates and a rename of removeDuplicateImageActionBars → removeDuplicateActionBars were added. Various locale files receive new keys for collapsed links and tooltip text.

Sequence Diagram(s)

sequenceDiagram
    participant Editor as Editor/Client
    participant HeaderLinks as HeaderLinks Component
    participant Measure as Measurement Scaffolding
    participant Overflow as useOverflow Hook
    participant Renderer as Link Renderer

    Editor->>HeaderLinks: Mount with data (links, collapsedLinks, parentData)
    activate HeaderLinks

    HeaderLinks->>Measure: create hidden measurement divs (containerRef, contentRef)
    Note right of Measure: hidden/absolute divs provide widths

    Measure->>Overflow: computeOverflow(containerRef, contentRef, containerAdjustment)
    activate Overflow
    Overflow->>Overflow: adjustedWidth = container.width - containerAdjustment
    Overflow->>Overflow: overflow = content.scrollWidth > adjustedWidth
    Overflow-->>Measure: return visibleItems and overflowItems
    deactivate Overflow

    alt Overflow detected
        HeaderLinks->>Renderer: render visibleItems + overflow dropdown (populate with overflowItems)
    else No overflow
        HeaderLinks->>Renderer: render all links inline
    end

    Renderer->>Editor: display links (apply collapsedLinks rules based on parentData.type)
    deactivate HeaderLinks

Possibly related PRs

chore: update screenshots batch 1 #985: Overlaps HeaderLinks changes and localization additions affecting link rendering and tooltips.
chore: merge fall-2025-slot-ify-components into main #928: Related slot refactor touching ExpandedHeader, parentData propagation, and header slot wiring.
feat: empty secondary header state #889: Modifies SecondaryHeaderSlot and header link layout relevant to overflow behavior.

Suggested reviewers

briantstephan
mkilpatrick
asanehisa

🚥 Pre-merge checks | ❌ 2

❌ Failed checks (2 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'refactor: header improvements' is vague and overly broad, using generic terms that don't convey specific meaningful information about the substantive changes in the changeset.	Consider a more specific title that captures the primary feature, such as 'feat: implement responsive header link overflow handling with collapsed links support' or similar.
Description check	❓ Inconclusive	The PR description contains only a URL link with no textual explanation of the changes, objectives, or rationale, making it impossible to assess the changeset from the description alone.	Add a detailed description explaining the changes, motivation, and impact rather than relying solely on an external link.

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

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: 4

Caution

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

⚠️ Outside diff range comments (1)

packages/visual-editor/src/internal/utils/removeDuplicateImageActionBars.ts (1)

3-38: Hide all duplicates, not just the first match.

findTargetDiv returns a single node, so only one duplicate per target gets hidden. If multiple duplicates exist for the same translatedTarget, the extras remain visible. Consider returning all matches and hiding them all.

✅ Suggested fix

-const findTargetDiv = (
-  iframe: HTMLIFrameElement,
-  translatedTarget: string
-): HTMLDivElement | null => {
+const findTargetDivs = (
+  iframe: HTMLIFrameElement,
+  translatedTarget: string
+): HTMLDivElement[] => {
   // Get all action bar divs
   const targets = iframe?.contentDocument?.querySelectorAll(
     'div[class^="_ActionBar"]'
   );

   if (!targets) {
-    return null;
+    return [];
   }

   // For each div, check the great-grandparent and grandchild for specific criteria
+  const matches: HTMLDivElement[] = [];
   for (const targetDiv of targets) {
     const greatGrandparent =
       targetDiv.parentElement?.parentElement?.parentElement;

     // The great-grandparent of the duplicate bar will have a height of 0px
     if (
       greatGrandparent &&
       greatGrandparent.tagName === "DIV" &&
       greatGrandparent.style.height === "0px"
     ) {
       const grandchild = targetDiv.querySelector(
         "div[class^='_ActionBar-label']"
       );

       // The grandchild of the duplicate bar will have the translation of "Image"
       if (grandchild && grandchild.textContent.includes(translatedTarget)) {
-        return targetDiv as HTMLDivElement;
+        matches.push(targetDiv as HTMLDivElement);
       }
     }
   }

-  return null;
+  return matches;
 };
@@
-  targets.forEach((target) => {
-    const targetDiv = findTargetDiv(iframe, target);
-
-    // Hide the duplicate action bar if found
-    if (targetDiv) {
-      targetDiv.style.display = "none";
-    }
-  });
+  targets.forEach((target) => {
+    const targetDivs = findTargetDivs(iframe, target);
+    targetDivs.forEach((div) => {
+      div.style.display = "none";
+    });
+  });

Also applies to: 63-69