Skip to content

[WC-3522] fix RTL label alignment for control-label/checkbox/radio - #326

Open
yordan-st wants to merge 1 commit into
mainfrom
fix/WC-3522_rtl-label-alignment-arabic
Open

[WC-3522] fix RTL label alignment for control-label/checkbox/radio#326
yordan-st wants to merge 1 commit into
mainfrom
fix/WC-3522_rtl-label-alignment-arabic

Conversation

@yordan-st

Copy link
Copy Markdown
Contributor

Summary

  • Labels misaligned in RTL (Arabic) — regression, previously fixed in Atlas Core 3.18.0.
  • Root cause: WC-2936's fix (removed text-align: left on .control-label) was silently reverted by a later, unrelated "form edit styling fix" commit. Checkbox/radio label gutters never had RTL support after the Atlas 4 rewrite dropped legacy bootstrap-rtl handling.
  • Switched to logical CSS properties (text-align: start, margin-inline-start, padding-inline-end) in _input.scss, _check-box.scss, _radio-button.scss so RTL works without separate [dir=rtl] overrides.

Test plan

  • Verified via headless computed-style check (compiled CSS + dir="rtl" fixture): .control-label text-align resolves to logical start, checkbox/radio label gutter moves from margin-left to margin-right under RTL.
  • Manual check in Studio Pro with Arabic locale on a form with labels + checkboxes + radio buttons.
  • Confirm no visual regression in LTR (English) — logical properties should be no-ops there.

Ticket: WC-3522

Previous fix was reverted by a later change. Switched to logical
properties so RTL works without separate [dir=rtl] overrides.
@yordan-st
yordan-st marked this pull request as ready for review August 11, 2026 13:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants