Skip to content

Fix dir css rule issues in BlazorUI (#13566) - #13772

Merged
msynk merged 3 commits into
developfrom
msynk/13566-blazorui-dir-css-func-issues
Oct 12, 2026
Merged

msynk merged 3 commits into
developfrom
msynk/13566-blazorui-dir-css-func-issues

Conversation

@msynk

@msynk msynk commented Oct 11, 2026 •

Copy link
Copy Markdown
Member

closes #13566

Summary by CodeRabbit

  • Bug Fixes
    • Improved right-to-left (RTL) display across grids, rich text editors, timelines, cards, collapsible panels, modals, tooltips, overlays, charts, sliders, notifications, and loading indicators.
    • Improved RTL compatibility in browsers that do not support direction-aware CSS selectors, including icon orientation, positioning, gradients, and animations.
    • RTL styling now responds to explicit component direction as well as inherited page direction, while keeping nested components’ direction handling properly scoped.

@msynk
msynk requested a review from yasmoradi as a code owner October 11, 2026 11:25
@coderabbitai

coderabbitai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 42 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 4 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Repository UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 8c505945-3dcb-4bd0-b8a1-e0e3b9dbb625

📥 Commits

Reviewing files that changed from the base of the PR and between e09d4d2 and f208776.


📒 Files selected for processing (29)
  • src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BitChart.scss
  • src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.scss
  • src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Notifications/Message/BitMessage.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitEllipsisLoading.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitRollingSquareLoading.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/Panel/BitPanel.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/Notifications/SnackBar/BitSnackBarStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Progress/Loading/BitLoadingStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Card/BitCardStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Collapse/BitCollapseStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelParamsTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Overlay/BitOverlayStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/SourceFiles.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/SourceFilesTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentDirFallbackTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentStatePaintTests.cs
  • src/BlazorUI/Tests/Performance/Bit.BlazorUI.Tests.Performance.TestHost/Components/Pages/BitDirFallback.razor
  • src/BlazorUI/Tests/Performance/Bit.BlazorUI.Tests.Performance/BitDirFallbackBrowserTests.cs

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: 219b8046-8fc4-415a-a28c-922d0c2ec7d2


📥 Commits

Reviewing files that changed from the base of the PR and between e09d4d2 and f208776.



📒 Files selected for processing (29)
  • src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BitChart.scss
  • src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.scss
  • src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Notifications/Message/BitMessage.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitEllipsisLoading.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/BitRollingSquareLoading.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/Panel/BitPanel.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/Notifications/SnackBar/BitSnackBarStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Progress/Loading/BitLoadingStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Card/BitCardStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Collapse/BitCollapseStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Modal/BitModalStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Panel/BitPanelParamsTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Overlay/BitOverlayStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/SourceFiles.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/SourceFilesTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentDirFallbackTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentStatePaintTests.cs
  • src/BlazorUI/Tests/Performance/Bit.BlazorUI.Tests.Performance.TestHost/Components/Pages/BitDirFallback.razor
  • src/BlazorUI/Tests/Performance/Bit.BlazorUI.Tests.Performance/BitDirFallbackBrowserTests.cs


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




Walkthrough

Component styles add or update .bit-rtl selector paths for RTL behavior. A stylesheet test checks fallback coverage across component stylesheets. Browser regression tests compare component styles with and without :dir() support.

Changes

RTL direction fallbacks

Layer / File(s) Summary
Component RTL selectors
src/BlazorUI/Bit.BlazorUI.Extras/Components/{Chart,DataGrid,RichTextEditor}/*, src/BlazorUI/Bit.BlazorUI/Components/{Inputs/Slider,Lists/Timeline,Notifications/{Message,SnackBar},Progress/Loading,Surfaces/{Card,Collapse,Modal,Panel,Tooltip},Utilities/Overlay}/*
Component styles combine .bit-rtl and :dir(rtl) matches or add guarded class fallbacks. The rules cover directional glyphs and icons, layout and animation direction, masks, and physical positioning.
Stylesheet fallback validation
src/BlazorUI/Bit.BlazorUI/CLAUDE.md, src/BlazorUI/Tests/Bit.BlazorUI.Tests/SourceFiles.cs, src/BlazorUI/Tests/Bit.BlazorUI.Tests/SourceFilesTests.cs, src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/*, src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/{Notifications/SnackBar,Progress/Loading,Surfaces/{Card,Collapse,Modal,Panel},Utilities/Overlay}/*
Shared SCSS helpers collect declarations and resolve nested selectors. A stylesheet test checks selector fallbacks and support guards. Existing stylesheet tests check updated selector forms, and CLAUDE.md documents the fallback rules.
Browser direction regression probes
src/BlazorUI/Tests/Performance/Bit.BlazorUI.Tests.Performance.TestHost/Components/Pages/BitDirFallback.razor, src/BlazorUI/Tests/Performance/Bit.BlazorUI.Tests.Performance/BitDirFallbackBrowserTests.cs
The regression page renders component probes for explicit, inherited, and nested directions. Browser tests compare computed styles with :dir() support and with simulated unsupported-selector handling.

Priority: ➖ Normal

Estimated code review effort: 4 (Complex) | ~35 minutes

Change: Bug fix · Severity of issue fixed: Medium

Sequence Diagram(s)

sequenceDiagram
  participant BrowserTest
  participant RegressionPage
  participant BrowserStyles
  BrowserTest->>RegressionPage: Open directionality probes
  RegressionPage->>BrowserStyles: Render component styles
  BrowserTest->>BrowserStyles: Read computed styles
  BrowserTest->>BrowserStyles: Simulate missing :dir() support
  BrowserTest->>BrowserStyles: Read fallback styles
Loading

Merge Risk: ⚪ Minimal · up to f2087

No actionable merge-blocking issue is established. The opt-in browser tests have not been reported as run, so rendered fallback behavior still needs normal validation.

Pre-merge checks | Passed 4 | Failed 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 34.04% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 47 functions across 12 files. (17 skipped… Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly and concisely describes the main change: fixing direction-related CSS rules in BlazorUI.
Linked Issues check Passed Issue #13566 has active coding requirements. The reviewed head adds forgiving .bit-rtl and :dir(rtl) selectors or scoped fallback rules for the affected RTL styles. BitBreadcrumb.scss uses the r…
Out of Scope Changes check Passed The additional stylesheet changes address the same #13566 requirement for RTL rules that would otherwise fail without :dir(). The SCSS parser helpers, documentation, unit tests, performance page, an…


Full details: Docstring Coverage

Explanation

Docstring coverage is 34.04% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 47 functions across 12 files. (17 skipped: 17 unsupported.)




✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Commit to this branch
  • Create a new PR







🧪 Generate unit tests (beta)
  • 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

A rabbit checks each arrow’s turn,
Where RTL styles twist and spin.
If :dir() fades, class rules stay,
The probes still chart the rendered way.
The stylesheet guards the path,
And bunnies hop through CSS math!

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

@coderabbitai

coderabbitai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

@msynk I will redo the full review of all changes in this PR.

✅ Action performed

Full review finished.

…into msynk/13566-blazorui-dir-css-func-issues
@msynk

msynk commented Oct 11, 2026

Copy link
Copy Markdown
Member Author

@coderabbitai full-review

@coderabbitai

coderabbitai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

@msynk I will redo the full review of all changes in this PR.

⚠️ Action not completed

Review rate limited.


Your included review limit is currently reached under our Fair Usage Limits Policy. This review may still proceed through usage-based billing if eligible. Your next included review will be available in 43 minutes.

@msynk
msynk merged commit 8876007 into develop Oct 12, 2026
8 checks passed
@msynk
msynk deleted the msynk/13566-blazorui-dir-css-func-issues branch October 12, 2026 06:05
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.

:dir(rtl) rules have no .bit-rtl fallback, so RTL styling is lost on engines without :dir()

1 participant