fix: Dashboard design mode — non-modal drawer, property panel layout, preview click-to-select - #807
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…-through
- SheetContent: add hideOverlay prop to conditionally skip overlay
- DesignDrawer: use modal={false} + hideOverlay for non-blocking interaction
- DashboardEditor: property panel renders above widget grid (flex-col layout)
- DashboardEditor: property panel uses full width (removed fixed w-72)
- Add DashboardDesignInteraction tests (7 tests)
- Add DashboardEditor.propertyPanelLayout tests (4 tests)
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Fix dashboard design mode attribute panel interaction issues
fix: Dashboard design mode — non-modal drawer, property panel layout, preview click-to-select
Feb 23, 2026
Collaborator
|
@copilot 仔细审查确认是否已经完成了任务中的所有要求 |
Contributor
Author
Verified all issue requirements against the code:
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes dashboard design mode UX issues by implementing a non-modal drawer and reorganizing the property panel layout. The fixes address three root causes: the Sheet overlay blocking clicks on preview widgets, the property panel being invisible in the narrow drawer due to horizontal layout constraints, and incomplete property panel integration.
Changes:
- Added
hideOverlayprop to SheetContent to conditionally skip rendering the backdrop overlay - Updated DesignDrawer to use
modal={false}andhideOverlayfor non-blocking interaction - Reorganized DashboardEditor to render the property panel above the widget grid in vertical layout
- Added 11 comprehensive tests covering the non-modal drawer interaction and property panel layout
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/ui/sheet.tsx | Added hideOverlay prop to conditionally skip overlay rendering |
| apps/console/src/components/DesignDrawer.tsx | Enabled non-modal behavior with modal={false} and hideOverlay |
| packages/plugin-designer/src/DashboardEditor.tsx | Moved property panel above widget grid, removed fixed width, changed to vertical layout |
| apps/console/src/tests/DashboardDesignInteraction.test.tsx | Added 7 integration tests for drawer interaction and click-to-select |
| packages/plugin-designer/src/tests/DashboardEditor.propertyPanelLayout.test.tsx | Added 4 tests verifying property panel DOM order and layout |
| ROADMAP.md | Documented Phase 7 implementation with all completed tasks |
Comment on lines
60
to
+72
| interface SheetContentProps | ||
| extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, | ||
| VariantProps<typeof sheetVariants> {} | ||
| VariantProps<typeof sheetVariants> { | ||
| /** When true, the backdrop overlay is not rendered (useful for non-modal drawers) */ | ||
| hideOverlay?: boolean; | ||
| } | ||
|
|
||
| const SheetContent = React.forwardRef< | ||
| React.ElementRef<typeof SheetPrimitive.Content>, | ||
| SheetContentProps | ||
| >(({ side = "right", className, children, ...props }, ref) => ( | ||
| >(({ side = "right", className, children, hideOverlay, ...props }, ref) => ( | ||
| <SheetPortal> | ||
| <SheetOverlay /> | ||
| {!hideOverlay && <SheetOverlay />} |
There was a problem hiding this comment.
Direct modification of sheet.tsx violates the "No-Touch" Zone rule (Rule #7) for Shadcn components. This file is tracked in shadcn-components.json (line 188) and can be overwritten by sync scripts (shadcn-sync.js).
According to the coding guidelines, files in packages/components/src/ui/ are protected and should not be modified directly. Instead, you should:
- Create a custom wrapper in packages/components/src/custom/ (e.g., sheet-custom.tsx)
- Import the primitive Sheet components from @/ui/sheet
- Wrap SheetContent and add the hideOverlay prop logic there
- Export the custom components from the wrapper
- Update imports in DesignDrawer.tsx to use the custom wrapper
This approach ensures that future shadcn-sync.js runs won't overwrite your changes.
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
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.
Dashboard design mode was non-functional: the Sheet overlay blocked all clicks on preview widgets, and the property panel was invisible in the narrow drawer due to
sm:flex-rowlayout fighting with the 540px container.Root causes & fixes
hideOverlayprop toSheetContent. DesignDrawer now usesmodal={false}+hideOverlayso the preview area stays interactive while the drawer is open.Property panel hidden off-screen — DashboardEditor used
sm:flex-rowwhich placed the 288px (w-72) property panel side-by-side with the widget grid inside a ~500px usable drawer width. Changed toflex-colwith property panel rendered above the widget grid, full-width.ROADMAP.md — Updated with Phase 7 entry.
Test coverage
11 new tests across two files:
DashboardDesignInteraction.test.tsx— 7 integration tests (drawer open, preview click → editor sync, selection switch, deselect, close clears state)DashboardEditor.propertyPanelLayout.test.tsx— 4 tests (DOM order, parent relationship, flex-col layout, no fixed width)All 389 dashboard-related tests and 668 console tests pass.
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.