fix: button icons render on wrong side for rtl journeys

[jianwei1]

Summary by CodeRabbit

• New Features

  • Button now adapts for right-to-left (RTL) languages, automatically adjusting icon positions in viewer contexts for improved localization.

• Tests

  • Added RTL test coverage to verify icon swapping in viewer variants and stable positions in admin/editor variants.
  • Test data expanded to include language metadata across journey mocks to validate localization scenarios.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[linear]

NES-1224 Button Icons render on wrong side for RTL journeys

[coderabbitai]

Walkthrough

Detects journey RTL from journey.language and swaps Button icons for non-admin variants; updates Button tests and multiple test mocks to include a language object and add RTL-specific assertions.

Changes

Cohort / File(s)	Summary
Button component logic libs/journeys/ui/src/components/Button/Button.tsx	Import getJourneyRTL, derive rtl from journey, compute shouldSwapIcons = variant !== 'admin' && rtl, and render using leadingIcon/trailingIcon so icons swap in RTL for non-admin variants.
Button unit tests libs/journeys/ui/src/components/Button/Button.spec.tsx	Add language object to journey mocks; add RTL tests verifying icon swap in journey-viewer and no-swap in editor/admin variants; extend customization tests to use language-aware journeys.
Editor test mocks apps/journeys-admin/src/components/Editor/Slider/Content/Canvas/InlineEditWrapper/ButtonEdit/ButtonEdit.spec.tsx	Extend mockJourneyWithCustomization and mockTemplateJourney with language objects (id, bcp47, iso3, name) to match new journey shape in tests.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: add edit details menu item #6350: Adds and propagates a new Journey.language field into mutations/props and test mocks — closely related to language additions here.
• fix: refactor CreateJourneyButton to use new journey duplication and… #6813: Touches Journey.language and updates test fixtures/types — overlaps with the mock/type changes in this PR.
• fix: original language remains after translating journey #8399: Modifies Button.tsx handling of startIcon/endIcon — potentially overlaps with the RTL-driven icon swap logic introduced here.

Suggested reviewers

• edmonday
• kiran-redhat
• Ur-imazing

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing button icons rendering on the wrong side for RTL journeys, which is directly supported by the code changes showing RTL detection and icon swapping logic.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ 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 jianweichong/nes-1224-button-icons-render-on-wrong-side-for-rtl-journeys

---

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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 30efbc9

Command	Status	Duration	Result
nx run resources-e2e:e2e	✅ Succeeded	12s	View ↗
nx run journeys-e2e:e2e	✅ Succeeded	24s	View ↗
nx run watch-e2e:e2e	✅ Succeeded	22s	View ↗
nx run videos-admin-e2e:e2e	✅ Succeeded	6s	View ↗
nx run journeys-admin-e2e:e2e	✅ Succeeded	36s	View ↗
nx run-many --target=vercel-alias --projects=jo...	✅ Succeeded	2s	View ↗
nx run-many --target=upload-sourcemaps --projec...	✅ Succeeded	12s	View ↗
nx run-many --target=deploy --projects=journeys...	✅ Succeeded	2m 42s	View ↗
Additional runs (12)	✅ Succeeded	...	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-22 01:52:45 UTC

[github-actions]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
journeys	✅ Ready	journeys preview	Thu Jan 22 14:42:33 NZDT 2026

[github-actions]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
videos-admin	✅ Ready	videos-admin preview	Thu Jan 22 14:41:20 NZDT 2026

[github-actions]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
resources	✅ Ready	resources preview	Thu Jan 22 14:42:05 NZDT 2026

[github-actions]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
watch	✅ Ready	watch preview	Thu Jan 22 14:41:39 NZDT 2026

[github-actions]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
journeys-admin	✅ Ready	journeys-admin preview	Thu Jan 22 14:44:16 NZDT 2026