feat(rtl): migrate Messaging + AI to logical properties - #380
Open
garrity-miepub wants to merge 1 commit into
Open
feat(rtl): migrate Messaging + AI to logical properties#380garrity-miepub wants to merge 1 commit into
garrity-miepub wants to merge 1 commit into
Conversation
Batch 4 of #319. 40 physical-class swaps across 12 files via scripts/rtl-codemod.mjs, plus 3 manual sites: - MessageBubble read-receipt avatar stack: rtl:space-x-reverse - AIChatTrigger.position: top/bottom-start/end aliases (CardBadge convention) - AIChatModal.position: bottom-start/bottom-end aliases; center unchanged Components: MessageBubble/List/Thread/Composer, ConversationHeader, AttachmentPicker, AIChatModal, Reconciliation, VisitScribe, VoiceManager, VoiceSetup, OzwellSettingsMenu. Safelist: 10 new logical classes in both tailwind presets. Ratchet baseline tightened 482 -> 442 matches (116 -> 104 files). Verified: typecheck, lint, 560/560 tests, pnpm build, Storybook LTR-unchanged + RTL spot-checks (bubble tails, composer, corner pins).
Contributor
There was a problem hiding this comment.
Pull request overview
Migrates Messaging and AI component families from physical-direction Tailwind utilities (left/right/ml/mr/pl/pr/border-l/rounded-br…) to logical equivalents (start/end/ms/me/ps/pe/border-s/rounded-ee…) to ensure correct mirroring under dir="rtl" and to tighten the RTL scan ratchet.
Changes:
- Replaced physical-direction layout/spacing/alignment utilities with logical counterparts across Messaging + AI components.
- Extended AI chat trigger/modal positioning APIs to accept
*-start/*-endaliases while keeping existing*-left/*-rightvalues supported. - Updated Tailwind safelists and tightened
scripts/rtl-baseline.jsonto reflect the reduced set of physical-direction matches.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/tailwind-preset.ts | Safelists newly used logical utilities/variants for the Messaging + AI RTL migration batch. |
| src/tailwind-preset.cjs | Mirrors the safelist additions for the CJS preset export. |
| src/components/Messaging/MessageThread.tsx | Converts right-* and border-r usages to logical end-* / border-e. |
| src/components/Messaging/MessageList.tsx | Updates bubble rounding and fixed-position controls to logical equivalents. |
| src/components/Messaging/MessageComposer.tsx | Migrates padding/borders/alignment to logical utilities and updates absolute positioning to end-*. |
| src/components/Messaging/MessageBubble.tsx | Converts bubble alignment/rounding/text alignment to logical utilities; adds RTL-safe avatar overlap handling. |
| src/components/Messaging/ConversationHeader.tsx | Converts offsets/alignment/absolute positioning to logical utilities. |
| src/components/Messaging/AttachmentPicker.tsx | Converts absolute positioning/inset usage from left/right to start/end. |
| src/components/AI/Reconciliation.tsx | Converts inline spacing from ml-* to ms-*. |
| src/components/AI/HeyOzwell/VoiceSetup.tsx | Converts absolute positioning from left-* to start-*. |
| src/components/AI/HeyOzwell/VoiceManager.tsx | Converts text-left alignment to text-start. |
| src/components/AI/HeyOzwell/VisitScribe.tsx | Converts mr-* spacing to me-* for RTL correctness. |
| src/components/AI/HeyOzwell/OzwellSettingsMenu.tsx | Converts item alignment from text-left to text-start. |
| src/components/AI/AIChatModal.tsx | Updates trigger/modal positioning to use logical start/end classes and adds *-start/*-end prop aliases. |
| scripts/rtl-baseline.json | Tightens the RTL scan baseline by removing cleaned-up Messaging + AI files. |
Suppressed comments (1)
src/components/AI/AIChatModal.tsx:111
- The JSDoc says only
start/endaliases are direction-aware, butbottom-left/bottom-rightare also treated as logical aliases (they map tostart/endclasses). The comment should reflect that the whole position API mirrors in RTL and explain how to opt into fixed physical positioning if needed.
/** Position of the modal. `start`/`end` aliases are direction-aware (RTL). */
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| badge?: number; | ||
| /** Position of the button */ | ||
| position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'; | ||
| /** Position of the button. `start`/`end` aliases are direction-aware (RTL). */ |
Deploying ui with
|
| Latest commit: |
a0bf464
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://28124541.ui-6d0.pages.dev |
| Branch Preview URL: | https://rtl-messaging-ai.ui-6d0.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Batch 4 of #319 — migrates the Messaging and AI component families from physical direction classes (
left/right/ml/mr/pl/pr/border-l/rounded-br…) to logical equivalents (start/end/ms/me/ps/pe/border-s/rounded-ee…) so they mirror correctly underdir="rtl".40 codemod swaps across 12 files (via
scripts/rtl-codemod.mjs), plus 3 manual sites:-space-x-1+rtl:space-x-reversepositionprop: physical names now map to logical classes and gaintop/bottom-start/endaliases (same convention asCardBadge.position/Sheet.side)positionprop: gainsbottom-start/bottom-endaliases;centerunchanged (symmetric)No breaking changes — all existing prop values keep working.
Files
Verification
pnpm typecheck,pnpm lintpnpm build— packaging cleanNotes