RTL Preview Panel

About this block

RTL Preview Panel puts the same payment methods screen side by side in two reading directions. The left card renders in English with dir set to ltr, the right card in Arabic with dir set to rtl, so the panel actually mirrors: the header chevron flips, the rows realign to the right edge, and the primary button label swaps to Arabic. Below the pair a bidi checklist runs five checks, from chevron mirroring to digit direction to where the truncation ellipsis lands, each marked Pass or an issue count.

A single MockScreen component takes a dir prop and a rows array, so both cards share one layout and only the direction and copy differ. The checks array carries a pass or issue status with an optional count, and the footer ties the checklist to the build, the RTL build ships once every check passes.

When to use

Reach for this block when you add a right to left locale and need to prove the layout mirrors before you ship it. Point each MockScreen at a real screen in your app and drive the checklist from your bidi lint rules rather than a static list.

A natural flow around it on an Application Pro page:

Before

• Locale preview card
• Translation progress card

After

• String editor panel
• Settings shell

What you can display

One strong use is the right to left readiness review for a new locale. Other preview panel shapes:

• Single screen focus. One mirrored card at full width for a detailed walk through of a hard layout.
• Three locale row. English beside Arabic and Hebrew when more than one RTL locale is in scope.
• Failures only checklist. The checks filtered to open issues so the fix list is all that remains.

Tip: test the mirror on a real screen with digits and Latin product names, those are the strings that break when the direction flips.