Make prompt modal draggable in Boilerplate (v) #10974
Conversation
WalkthroughThe changes update the Prompt modal component to support drag functionality by making the modal draggable via its header, refactor its markup for a simpler structure, and adjust the associated SCSS styles to match the new structure and enable header-based dragging. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PromptService
participant PromptModal
User->>PromptService: Show(prompt)
PromptService->>PromptModal: Open modal (Draggable, DragElementSelector=".header-stack")
User->>PromptModal: Drag header area
PromptModal->>PromptModal: Move modal accordingly
Assessment against linked issues
Poem
✨ Finishing Touches
🧪 Generate Unit Tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🧹 Nitpick comments (2)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Common/Prompt.razor.scss (1)
14-17: Padding duplicated between.header-stack& modal containerThe modal framework already adds 1 rem padding around the dialog. Adding the same padding here can make the header appear visually thicker than designs suggest. Consider reducing it to
.5remor removing it and relying on the built-in padding if consistency with other dialogs is required.src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Common/Prompt.razor (1)
4-6: Consider addingrole="dialog"&aria-labelledbyfor accessibilityWhile
BitModalServicehandles focus trapping, the semantic role is currently on the generated overlay, not on this inner<section>. Explicitly marking the main container helps screen-readers and improves testability.-<section> +<section role="dialog" aria-labelledby="prompt-title">Also add
Id="prompt-title"to the<BitText>element.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge Base: Disabled due to Reviews > Disable Knowledge Base setting
📒 Files selected for processing (3)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Common/Prompt.razor(2 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Common/Prompt.razor.scss(1 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/PromptService.cs(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (2)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/PromptService.cs (1)
23-25: Verify.header-stackselector resolves inside the modal root
DragElementSelectorexpects a selector that matches an element inside the rendered modal content.
Please double-check that:
.header-stackis rendered once per modal instance (otherwise simultaneous drags may interfere).- No global element shares the same class, to avoid the drag handle leaking outside the dialog.
If either scenario is possible, prepend a unique parent id (e.g.,
#bit-modal-@Id .header-stack) or switch to an element id to scope the selector tightly.src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Common/Prompt.razor.scss (1)
8-11:lt-smmixin may not exist in older breakpoint helpersThe project previously relied on
lt-md; changing the breakpoint tolt-smassumes that the corresponding Sass mixin is defined in_media-queries.scss.
Please verify the mixin exists in all downstream templates to avoid a Sass compile error.
...plate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Common/Prompt.razor.scss
Show resolved
Hide resolved
...oilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Common/Prompt.razor
Show resolved
Hide resolved
1 participant
closes #10972
Summary by CodeRabbit
New Features
Style
Refactor