Add ProModal component (#9503)#12420
Open
msynk wants to merge 1 commit into
Open
Conversation
WalkthroughThis PR introduces a new ChangesBitProModal Component
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs`:
- Around line 23-26: The XML doc for the Blocking parameter is incorrect: it
currently says “Whether the Modal can be light dismissed…”, but Blocking
actually prevents light-dismiss when true (overlay click handler returns early
when ModalParameters.Blocking is true). Update the summary for the Blocking
property in BitProModal (and the duplicated summaries in BitProModalDemo and any
BitModal references) to state that when true the modal cannot be light-dismissed
by clicking the overlay; when false overlay clicks allow dismissal. Ensure the
wording clearly indicates the boolean semantics (true = prevents light-dismiss,
false = allows it).
In `@src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss`:
- Line 1: In BitProModal.scss update the `@import` to omit the .scss extension
(change the import of 'functions.scss' to 'functions') to satisfy the stylelint
rule scss/load-partial-extension; locate the `@import` line in BitProModal.scss
that references '../../../Bit.BlazorUI/Styles/functions.scss' and remove the
'.scss' suffix (or alternatively add/configure a stylelint suppression/baseline
for this rule if you intend to keep extensions across Extras files).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 839c5e64-71a6-48d0-8212-86f5b4be13b0
📒 Files selected for processing (10)
src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razorsrc/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cssrc/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scsssrc/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModalClassStyles.cssrc/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-components.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProModal/BitProModalDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs
Comment on lines
+23
to
+26
| /// <summary> | ||
| /// Whether the Modal can be light dismissed by clicking outside the Modal (on the overlay). | ||
| /// </summary> | ||
| [Parameter] public bool Blocking { get; set; } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Locate BitModal's Blocking parameter and its summary
fd -t f 'BitModal.razor.cs' | xargs rg -nP -B3 'public bool Blocking'Repository: bitfoundation/bitplatform
Length of output: 266
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 1) Inspect BitModal's Blocking usage
fd -t f 'BitModal.razor.cs' | head -n 5 | while read -r f; do
echo "=== $f: Blocking usages ==="
rg -n --hidden -S 'Blocking' "$f" || true
done
# 2) Show overlay/dismiss related code paths in BitModal
fd -t f 'BitModal.razor.cs' | head -n 5 | while read -r f; do
echo "=== $f: likely dismiss/overlay click ==="
rg -n --hidden -S '(overlay|light|dismiss|click|Modeless|modeless)' "$f" || true
done
# 3) Inspect ProModal docs around Line 129 ("Blocking is ignored") and where Modeless/Blocking are applied
fd -t f 'BitProModal.razor.cs' | head -n 5 | while read -r f; do
echo "=== $f: Modeless/Blocking docs ==="
rg -n --hidden -S 'Modeless|Blocking is ignored|Blocking' "$f" || true
doneRepository: bitfoundation/bitplatform
Length of output: 2159
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs"
nl -ba "$file" | sed -n '200,270p'Repository: bitfoundation/bitplatform
Length of output: 112
🏁 Script executed:
#!/bin/bash
set -euo pipefail
bitmodal="src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs"
promodal="src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs"
echo "=== BitModal docs (top) ==="
cat -n "$bitmodal" | sed -n '20,130p'
echo "=== BitModal Blocking gate (dismiss/overlay) ==="
cat -n "$bitmodal" | sed -n '200,270p'
echo "=== BitProModal docs (Blocking/Modeless) ==="
cat -n "$promodal" | sed -n '1,170p'Repository: bitfoundation/bitplatform
Length of output: 14109
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Look for the duplicated summary wording in the demo
fd -t f 'BitProModalDemo.razor.cs' | xargs -r rg -n 'Blocking|light dismissed|overlay' || true
# Find other occurrences of the same Blocking summary text
fd -t f | xargs -r rg -n 'Whether the Modal can be light dismissed by clicking outside' || trueRepository: bitfoundation/bitplatform
Length of output: 2318
Fix Blocking docs to match behavior (it prevents light-dismiss)
BitModal’s overlay click handler returns immediately when ModalParameters.Blocking is true, so overlay clicking won’t trigger dismissal; the current summary (“Whether the Modal can be light dismissed…”) is misleading. The same wording is duplicated in BitProModal and BitProModalDemo.
📝 Suggested wording
- /// <summary>
- /// Whether the Modal can be light dismissed by clicking outside the Modal (on the overlay).
- /// </summary>
+ /// <summary>
+ /// When enabled, prevents the Modal from being light dismissed by clicking outside the Modal (on the overlay).
+ /// </summary>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| /// <summary> | |
| /// Whether the Modal can be light dismissed by clicking outside the Modal (on the overlay). | |
| /// </summary> | |
| [Parameter] public bool Blocking { get; set; } | |
| /// <summary> | |
| /// When enabled, prevents the Modal from being light dismissed by clicking outside the Modal (on the overlay). | |
| /// </summary> | |
| [Parameter] public bool Blocking { get; set; } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.razor.cs`
around lines 23 - 26, The XML doc for the Blocking parameter is incorrect: it
currently says “Whether the Modal can be light dismissed…”, but Blocking
actually prevents light-dismiss when true (overlay click handler returns early
when ModalParameters.Blocking is true). Update the summary for the Blocking
property in BitProModal (and the duplicated summaries in BitProModalDemo and any
BitModal references) to state that when true the modal cannot be light-dismissed
by clicking the overlay; when false overlay clicks allow dismissal. Ensure the
wording clearly indicates the boolean semantics (true = prevents light-dismiss,
false = allows it).
| @@ -0,0 +1,77 @@ | |||
| @import '../../../Bit.BlazorUI/Styles/functions.scss'; | |||
There was a problem hiding this comment.
Stylelint flags the .scss extension in @import.
scss/load-partial-extension reports this import. Note the rest of the Extras stylesheets (e.g. extra-components.scss) also use the extension, so this matches existing convention — either drop the extension here to satisfy the linter or confirm the rule is suppressed/baselined for these files before relying on the existing convention.
🎨 Option: drop extension to satisfy stylelint
-@import '../../../Bit.BlazorUI/Styles/functions.scss';
+@import '../../../Bit.BlazorUI/Styles/functions';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| @import '../../../Bit.BlazorUI/Styles/functions.scss'; | |
| `@import` '../../../Bit.BlazorUI/Styles/functions'; |
🧰 Tools
🪛 Stylelint (17.12.0)
[error] 1-1: Unexpected extension ".scss" in @import (scss/load-partial-extension)
(scss/load-partial-extension)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/BlazorUI/Bit.BlazorUI.Extras/Components/ProModal/BitProModal.scss` at
line 1, In BitProModal.scss update the `@import` to omit the .scss extension
(change the import of 'functions.scss' to 'functions') to satisfy the stylelint
rule scss/load-partial-extension; locate the `@import` line in BitProModal.scss
that references '../../../Bit.BlazorUI/Styles/functions.scss' and remove the
'.scss' suffix (or alternatively add/configure a stylelint suppression/baseline
for this rule if you intend to keep extensions across Extras files).
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
1 participant
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.
closes #9503
Summary by CodeRabbit
ProModalcomponent with advanced configuration options including positioning, sizing modes (full-width, full-height, full-size), draggable support, header/footer customization, scroll behavior control, overlay blocking, and dismissal callbacks.