-
Notifications
You must be signed in to change notification settings - Fork 0
fix: line height in rich text and reduced event description #972
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
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. |
WalkthroughReplaces calc-based line-height rules in maybeRTF.css with fixed numeric values (1.5 for body text and 1.2 for headings/links) including responsive blocks. Adds an Sequence Diagram(s)(omitted — changes do not introduce new multi-component control flow) Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: Repository UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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)
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. Comment |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/visual-editor/src/components/layoutBlocks/Grid.test.tsx (1)
1680-1799: LGTM! Good test coverage for BodyText variants with new line-height.The three test cases effectively verify rendering of all BodyText variants (sm, base, lg) with the updated proportional line-height values. The tests will capture any visual regressions through screenshot comparison.
💡 Optional: Consider parameterizing the variant tests
The three test cases have identical structure except for the
variantproperty. You could reduce duplication by parameterizing:+ ["sm", "base", "lg"].forEach((variant) => { + tests.push({ + name: `version 49 - Body text - ${variant} variant`, document: { address: testAddress, id: "test-id", name: "Galaxy Grill", }, props: { columns: 1, slots: [ { Column: [ { type: "BodyText", props: { id: "BodyText-547941ef-1bc8-4e88-96e6-81b3b65a4f54", data: { text: { field: "", constantValue: { en: { html: rtfHtml, }, hasLocalizedValue: "true", }, constantValueEnabled: true, }, }, - styles: { variant: "sm" }, + styles: { variant }, }, }, ], }, ], backgroundColor: { bgColor: "bg-white", textColor: "text-black" }, liveVisibility: true, analytics: { scope: "gridSection" }, }, version: 49, + }); + });However, the current explicit approach is also valid and may be easier to debug.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (33)
packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 18 - atoms used to make a CoreInfoSection.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 18 - atoms used to make a HeroSection.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 19 - single grid.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 19 - various CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 19 - various atoms.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 29 - various CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 45 - CTAs with Dark background.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 45 - CTAs with different site colors.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 49 - Body text - base variant.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 49 - Body text - large variant.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[desktop] version 49 - Body text - small variant.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 18 - atoms used to make a CoreInfoSection.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 18 - atoms used to make a HeroSection.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 19 - single grid.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 19 - various CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 19 - various atoms.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 29 - various CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 45 - CTAs with Dark background.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 45 - CTAs with different site colors.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 49 - Body text - base variant.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 49 - Body text - large variant.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[mobile] version 49 - Body text - small variant.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 18 - atoms used to make a CoreInfoSection.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 18 - atoms used to make a HeroSection.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 19 - single grid.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 19 - various CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 19 - various atoms.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 29 - various CTAs.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 45 - CTAs with Dark background.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 45 - CTAs with different site colors.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 49 - Body text - base variant.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 49 - Body text - large variant.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/Grid/[tablet] version 49 - Body text - small variant.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**
📒 Files selected for processing (3)
packages/visual-editor/src/components/atoms/maybeRTF.csspackages/visual-editor/src/components/layoutBlocks/Grid.test.tsxpackages/visual-editor/src/components/pageSections/EventSection/EventCard.tsx
⏰ 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 (3)
packages/visual-editor/src/components/pageSections/EventSection/EventCard.tsx (1)
42-44: LGTM! Default description shortened appropriately.The removal of the sentence aligns with the PR objective to reduce the Event Section's description to 2 lines for the default event card text.
packages/visual-editor/src/components/atoms/maybeRTF.css (1)
1-102: LGTM! Excellent switch to proportional line-height values.The migration from
calc(var(--fontSize-...) + 4px)to unitless proportional values (1.5 for body text/links, 1.2 for headings) is a CSS best practice. Unitless line-height scales proportionally with font-size changes and is more maintainable.packages/visual-editor/src/components/layoutBlocks/Grid.test.tsx (1)
42-43: LGTM! Comprehensive RTF HTML test content added.The
rtfHtmlconstant provides comprehensive coverage of rich text elements (headings, paragraphs, lists, links, bold text) that will exercise the line-height changes introduced inmaybeRTF.css.
.../components/testing/screenshots/EventSection/[mobile] version 0 props with entity values.png
Show resolved
Hide resolved
packages/visual-editor/src/components/pageSections/EventSection/EventCard.tsx
Show resolved
Hide resolved
There was a problem hiding this 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
🤖 Fix all issues with AI agents
In @packages/visual-editor/src/vite-plugin/defaultLayoutData.ts:
- Around line 3224-3225: The first and third EventCard placeholder entries are
using the longer description; update the EventCard instances at index 0 and
index 2 in the default layout data so their json and html description fields
match the shortened two-line placeholder used by EventCard index 1 (i.e.,
replace the long "Ut enim ad minim veniam." text with the same truncated Lorem
ipsum string and equivalent HTML span/p tag styling used by index 1) so all
three EventCards have identical two-line default descriptions.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (49)
packages/visual-editor/src/components/testing/screenshots/NearbyLocationsSection/[mobile] default props with multiple nearby locations.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/NearbyLocationsSection/[mobile] version 10 with multiple nearby locations.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/NearbyLocationsSection/[mobile] version 36 with multiple nearby locations.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] [classic] version 50 props with constant values and image.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] [classic] version 50 with constant values and video.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] [classic] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] [compact] version 50 with constant values and image.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] [compact] version 50 with constant values and video.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] [compact] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] [immersive] version 50 with constant values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] [immersive] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] [spotlight] version 50 with constant values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] [spotlight] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] version 0 props with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] version 16 props using entity values with old CTA structure.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[desktop] version 30 props with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] [classic] version 50 props with constant values and image.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] [classic] version 50 with constant values and video.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] [classic] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] [compact] version 50 with constant values and image.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] [compact] version 50 with constant values and video.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] [compact] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] [immersive] version 50 with constant values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] [immersive] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] [spotlight] version 50 with constant values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] [spotlight] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] default props with document data.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] default props with empty document.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] version 0 props with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] version 16 props using entity values with old CTA structure.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] version 24 with constant values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[mobile] version 30 props with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] [classic] version 50 props with constant values and image.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] [classic] version 50 with constant values and video.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] [classic] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] [compact] version 50 with constant values and image.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] [compact] version 50 with constant values and video.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] [compact] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] [immersive] version 50 with constant values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] [immersive] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] [spotlight] version 50 with constant values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] [spotlight] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] default props with document data.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] default props with empty document.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] version 0 props with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] version 16 props using entity values with old CTA structure.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] version 24 with constant values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[tablet] version 30 props with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**packages/visual-editor/src/components/testing/screenshots/PromoSection/[xl] [compact] version 50 with entity values.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**
📒 Files selected for processing (1)
packages/visual-editor/src/vite-plugin/defaultLayoutData.ts
⏰ 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 (22.x)
- GitHub Check: call_unit_test / unit_tests (20.x)
- GitHub Check: call_unit_test / unit_tests (24.x)
- GitHub Check: semgrep/ci
There was a problem hiding this 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
🤖 Fix all issues with AI agents
In @packages/visual-editor/src/vite-plugin/defaultLayoutData.ts:
- Around line 3077-3078: The third EventCard (EventCard at index 2) still has
the long placeholder description in both its json and html strings while the
first two cards were shortened; update the json text field and the html span
content for EventCard index 2 to match the shortened description used by index 0
and 1 (and also fix the duplicate occurrences elsewhere), ensuring both the
serialized json string and the corresponding html string are updated
consistently.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/visual-editor/src/vite-plugin/defaultLayoutData.ts
⏰ 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 (22.x)
- GitHub Check: call_unit_test / unit_tests (24.x)
- GitHub Check: call_unit_test / unit_tests (20.x)
- GitHub Check: semgrep/ci
Tickets - [OPAQF-49](https://yext.atlassian.net/browse/OPAQF-49), [OPAQF-59](https://yext.atlassian.net/browse/OPAQF-59) - Reduced Event Section's description to 2 lines. - Updated body and heading to use proportional line-heights (1.5 for body text, 1.2 for headings) instead of calculated pixel-based values. https://github.com/user-attachments/assets/c4cce286-9b5d-4bbd-9328-1dde7ddbcf48 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tickets - OPAQF-49, OPAQF-59
Screen.Recording.2026-01-06.at.2.03.00.AM.mov