refactor: adjust promo content layout

[benlife5]

Mocks

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

[coderabbitai]

Walkthrough

The PromoContent component in the PromoSection was updated to refine spacing and margin properties. The outer container's gap-y spacing was removed while preserving width and text-handling classes. The HeadingSlot, DescriptionSlot, and CTASlot elements now have customized margin classes: HeadingSlot includes a conditional margin-bottom (mb-4, or sm:mb-8 for classic variants), DescriptionSlot uses fixed margins (mb-6 and sm:mb-8), and CTASlot remains structurally unchanged. The component's public signature and exports remain unaffected.

Suggested reviewers

• briantstephan
• colton-demetriou
• mkilpatrick

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'refactor: adjust promo content layout' accurately describes the main changes, which involve adjusting spacing and layout structure in the PromoContent component.
Description check	✅ Passed	The description references Figma mocks that document the design changes for the promo content layout adjustments, providing context for the refactoring.

✨ Finishing touches

• 📝 Generate docstrings

---

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

🧹 Nitpick comments (1)

packages/visual-editor/src/components/pageSections/PromoSection/PromoContent.tsx (1)

14-14: Reconsider the justify-center class.

Adding justify-center to a flex-col container centers children along the vertical axis. This could cause unexpected behavior if the container has extra height, as content will be vertically centered rather than starting at the top.

For content that should flow naturally from top to bottom, justify-center is typically unnecessary. Consider removing it unless vertical centering within a defined container height is explicitly required by the design.

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e82dc4a and cea9a6b.

📒 Files selected for processing (1)

• packages/visual-editor/src/components/pageSections/PromoSection/PromoContent.tsx

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: benlife5
Repo: yext/visual-editor PR: 958
File: packages/visual-editor/src/components/pageSections/heroVariants/CompactHero.tsx:38-41
Timestamp: 2025-12-23T16:30:55.497Z
Learning: In CompactHero and CompactPromo components, the 2xl breakpoint applies unconditional left padding because once the container reaches max-width (1440px), the design requires centering with consistent left padding regardless of desktopImagePosition.

Learnt from: benlife5
Repo: yext/visual-editor PR: 958
File: packages/visual-editor/src/components/pageSections/heroVariants/CompactHero.tsx:38-41
Timestamp: 2025-12-23T16:30:55.497Z
Learning: In CompactHero and CompactPromo components, duplicate IDs on image elements are intentional: conditional visibility classes (hidden/sm:block/sm:hidden) ensure only one image renders at a time based on responsive breakpoints and desktopImagePosition/mobileImagePosition settings.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: call_unit_test / unit_tests (24.x)
• GitHub Check: call_unit_test / unit_tests (22.x)
• GitHub Check: call_unit_test / unit_tests (20.x)
• GitHub Check: semgrep/ci

🔇 Additional comments (2)

packages/visual-editor/src/components/pageSections/PromoSection/PromoContent.tsx (2)

16-25: LGTM! Spacing refinements align with design mocks.

The transition from gap-y to individual margin classes provides more granular control over spacing between specific slots. The conditional margin for HeadingSlot based on the variant and the fixed margins for DescriptionSlot appear intentional to match the Figma design requirements referenced in the PR description.

The addition of style={{ height: "auto" }} ensures slots only take the space they need, and allow={[]} appropriately restricts nesting.

---

5-7: Verify consistency with promoContentParentCn or update the helper.

The promoContentParentCn function still includes gap-y-8 sm:gap-y-10, but the component itself (line 14) now uses individual margin classes instead of gap-y. If this function is used elsewhere for similar containers, there may be a visual inconsistency in spacing.

Run the following script to check where promoContentParentCn is used:

#!/bin/bash
# Description: Find all usages of promoContentParentCn to verify if the gap-y spacing is still needed

rg -n "promoContentParentCn" --type=ts --type=tsx -C 3

[benlife5]

@asanehisa I think we're ready for an artifact after this merges

[asanehisa]

appreciate the link to mocks!