Fix dir css rule issues in BlazorUI (#13566)

[msynk]

closes #13566

Summary by CodeRabbit

• Bug Fixes
  • Improved right-to-left (RTL) display across grids, rich text editors, timelines, cards, collapsible panels, modals, tooltips, and overlays.
  • Added compatibility for browsers that do not support direction-aware CSS selectors, helping preserve RTL icon orientation, positioning, gradients, and animations.
  • RTL styling now also applies when direction is set explicitly on a component.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 77e0764c-d32a-49a0-8b30-1f1a403e6d63

---

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 129b9929-b1d1-4fc7-a250-f012eb6b3348

---

---

📥 Commits

Reviewing files that changed from the base of the PR and between 3cc9051 and 16a5a9b.

---

---

📒 Files selected for processing (13)

• src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.scss
• src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.scss
• src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss
• src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.scss
• src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Collapse/BitCollapse.scss
• src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.scss
• src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Tooltip/BitTooltip.scss
• src/BlazorUI/Bit.BlazorUI/Components/Utilities/Overlay/BitOverlay.scss
• src/BlazorUI/CLAUDE.md
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Card/BitCardStylesheetTests.cs
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/SourceFiles.cs
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentDirFallbackTests.cs
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentStatePaintTests.cs

---

---

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

---

---

Walkthrough

Component styles add or update .bit-rtl rules for RTL behavior. A stylesheet test checks :dir() fallback coverage across component stylesheets. Shared SCSS selector helpers are also used by an existing test.

Changes

RTL direction fallbacks

Layer / File(s)	Summary
Component RTL styling src/BlazorUI/Bit.BlazorUI.Extras/Components/{DataGrid,RichTextEditor}/*, src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/*, src/BlazorUI/Bit.BlazorUI/Components/Surfaces/{Card,Collapse,Modal,Tooltip}/*, src/BlazorUI/Bit.BlazorUI/Components/Utilities/Overlay/*	Component styles add .bit-rtl rules for directional glyphs, toolbar icons, timeline connectors, skeleton animation, collapse masks, modal alignment, tooltip direction, and overlay positioning. Existing :dir(rtl) rules remain in several stylesheets.
Selector helpers and fallback checks src/BlazorUI/Tests/Bit.BlazorUI.Tests/SourceFiles.cs, src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/*, src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Card/*, src/BlazorUI/CLAUDE.md	SourceFiles adds nested-selector resolution helpers, which an existing test now uses. A new stylesheet test checks :dir() selector lists, support guards, and matching RTL fallbacks. The card stylesheet test checks fallback scope and placement. CLAUDE.md documents RTL stylesheet guidance and the test’s exceptions.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 16a5a

This change adds explicit-RTL styling fallbacks for engines without :dir() support and a test guarding the convention. No concrete merge-blocking risk was found.

Pre-merge checks | 4 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 61.11% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 18 functions across 4 files. (9 skipped: …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly identifies the main change: fixing :dir() CSS rule issues in BlazorUI. It is concise and relevant to the stylesheet fallbacks, documentation, and regression tests.
Linked Issues check		Issue #13566 has active coding requirements. The reviewed head provides .bit-rtl fallbacks for the affected RTL rules. BitTimeline.scss adds the class-based fallback in this pull request. The othe…
Out of Scope Changes check		The changed stylesheets address the same issue as #13566. The DataGrid, RichTextEditor, Card, Collapse, Modal, Tooltip, Overlay, and related RTL changes add fallbacks for other library :dir() rules.…

---

---

Full details: Docstring Coverage

Explanation

Docstring coverage is 61.11% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 18 functions across 4 files. (9 skipped: 9 unsupported.)

---

---

---

✨ Finishing Touches 💡 2

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

---

---

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

---

🛠️ Fix failing CI checks 💡

• Commit to this branch
• Create a new PR

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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

---

_{A rabbit checks the styles at night
.bit-rtl keeps each arrow right
The toolbar flips, the wave turns round
The selectors pass their test run sound
Then hops away with ears upright}

_{Comment @coderabbitai help to get the list of available commands.}