[Patch Change AdvanceFilters to use sheet instead of in-line display#8
Open
[Patch Change AdvanceFilters to use sheet instead of in-line display#8
Conversation
- Add radix-ui dependency to package.json and refresh pnpm-lock.yaml with Radix packages/resolutions. Introduce a new UI component at src/components/ui/sheet.tsx and apply related adjustments to vite.config.ts.
- Replace the inline AdvancedFilters panel with a left-side Sheet in InventoryGrid to provide a slide-over advanced filters UI (includes SheetHeader, Title and Description). Clean up imports (consolidate react imports) and move AdvancedFilters into SheetContent with updated sizing and styles. - Adjust AdvancedFilters layout: simplify container classes, reduce grid column complexity and tighten vertical spacing. Add a gridClassName prop to ItemTypesSelector (and thread it through where needed) so the item-type grid columns can be customized (defaults preserve existing responsive behavior). These changes improve layout/spacing and make the advanced filters more usable as a side panel.
✅ Deploy Preview for limedrop ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This pull request replaces an inline Activity wrapper with a new Sheet modal component for displaying advanced filters in the inventory grid. The Sheet component provides a drawer-style UI that slides in from the left side, improving the user experience and layout for filter options.
Changes:
- Added a new Sheet UI component based on Radix UI Dialog primitives for modal drawer functionality
- Migrated AdvancedFilters from Activity wrapper to Sheet component in InventoryGrid
- Enhanced FilterFields with gridClassName prop for flexible grid layouts
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ui/sheet.tsx | New Sheet component implementation using Radix UI Dialog primitives with header, footer, overlay, and content sub-components |
| src/components/InventoryGrid.tsx | Replaced Activity wrapper with Sheet component for advanced filters, adding header, title, and description |
| src/components/FilterFields.tsx | Added gridClassName prop to ItemTypesSelector for customizable grid column configuration |
| src/components/AdvancedFilters.tsx | Simplified layout from complex responsive grid to 2-column grid and updated spacing |
| package.json | Added radix-ui package dependency |
| vite.config.ts | Configured dev server to bind to all network interfaces (0.0.0.0) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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.
This pull request introduces a new UI component for advanced filters using a sheet modal, improves the flexibility and layout of filter fields, and updates dependencies to support these changes. The most significant improvements are the addition of the sheet component, integration of the sheet for advanced filters, and enhanced customization for filter grids.
UI Component Addition and Integration:
Sheetcomponent based on Radix UI insrc/components/ui/sheet.tsxto provide a flexible modal drawer with header, footer, title, description, and close button support.Activitywrapper with the newSheetcomponent for advanced filters inInventoryGrid, including structured header and description, improving usability and appearance. [1] [2]Filter Layout and Customization Enhancements:
AdvancedFilterslayout to use simpler grid and spacing, making it easier to customize and more responsive. [1] [2]gridClassNameprop toItemTypesSelectorfor flexible grid column configuration, and passed this prop fromAdvancedFilters. [1] [2] [3] [4]Dependency and Configuration Updates:
radix-uitopackage.jsonto support the new sheet component.host: "0.0.0.0").