This repository was archived by the owner on Mar 25, 2026. It is now read-only.
feat: v2.0 Headless refactor - Remove all default styles#100
Closed
ryanrozich wants to merge 14 commits intomainfrom
Closed
feat: v2.0 Headless refactor - Remove all default styles#100ryanrozich wants to merge 14 commits intomainfrom
ryanrozich wants to merge 14 commits intomainfrom
Conversation
- Convert DateFilter to headless compound component pattern - Convert ActiveFilters to headless compound component pattern - Convert QuickFilterDropdown to headless compound component pattern - Remove all CSS from component library (zero CSS shipped) - Move all styles to demo app (headless-components.css) - Add data-* attributes for state-based styling - Maintain full backward compatibility with default structures - Enable complete customization via compound components BREAKING CHANGE: Components no longer ship with any CSS. Users must provide their own styles or use the reference styles from the demo app. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
github-actions
bot
added
enhancement
|
🚀 Demo Preview Ready! Preview URL: https://demo.rozich.net/ag-grid-react-components-pr-100/ This preview will be available for testing until the PR is merged or closed. |
…ality - Created SavedViewsManager as a fully headless compound component - Implemented Save/Load/Export/Import functionality for filter views - Added CategorySelector with portal-based dropdown and inline category creation - Fixed z-index layering issues using React Portals - Added comprehensive E2E tests for all components - Added icons to Export/Import buttons in demo - Fixed event delegation for custom styled action buttons - Added SavedViewsManager to both Client-Side and Server-Side demos - Implemented proper AG Grid API integration with getSortModel workaround - Added demo styles using data attributes for headless pattern - Created comprehensive test suite with all tests passing Key features: - Complete filter state management (filters, column state, sort) - Category-based organization of saved views - Export all views to JSON file - Import views from JSON with merge logic - Set default views that apply on mount - Maximum view limit with validation - Proper localStorage persistence - TypeScript strict mode compliance 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Added 5 default categories (General, Reports, Analysis, Team Views, Personal) - This fixes the Save button being disabled in the dialog - Ensures users can save views immediately without creating categories first 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Fixed imports in index.ts, SavePresetModal, and ManagePresetsModal - All imports now point to CategorySelector/index instead of CategorySelector.tsx - This fixes the 404 error preventing the demo from loading 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Fixed 'Can apply a saved view' test by updating selector to wait for demo load - Fixed 'Export and import functionality' test by simplifying panel interaction - All 11 SavedViewsManager tests now passing - All 7 basic headless components tests passing - Cleaned up debug test files and screenshots Tests are now fully functional and validate: - Save/Load functionality - Export/Import functionality - Category management with inline creation - Default view persistence - Proper headless component structure 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Added comprehensive CSS styling for CategorySelector in SavedViewsManager.css - Styled input field with proper padding, borders, and focus states - Added dropdown styling with shadows and proper positioning - Styled 'Create new category' option with blue color and + icon - Added styles for create form, buttons, and error messages - Fixed server-side demo layout issue - Moved results count and loading indicator out of toolbar - Placed them in a separate section between filters and grid - Prevents UI elements from jumping around - Export button correctly disabled when no views (expected behavior) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add missing useMemo import to SavedViewsManager - Fix demo page conditional logic (was showing "Page not found" for demo) - Import components from sharedGridConfig in working-demo for cell renderers - Enable avatar renderer for both client and server side demos - Reduce CategorySelector dropdown gap from 4px to 2px for better positioning - Remove default categories - only show categories from existing saved views All avatars now render correctly on both client and server side demos. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
…server loading UX - Add disabled state handling in Actions component event delegation - Support aria-disabled attribute and disabled class checking - Update demo buttons to use aria-disabled styling - Improve server-side loading state to show dashes in stats instead of skeleton loaders - Add subtle "Updating..." overlay on stats during loading - Make stats values show as grayed out when loading The export button now properly appears disabled when there are no saved views. Server-side loading no longer breaks up the UI between filter pills and data grid. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove the results count display (e.g., "10,000 results") from ServerSideDemo - Grid container now appears directly after Active Filters section - Loading state already shows dashes in stats cards as requested - Dropdown styling is consistent (different colors indicate active filter state) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Rename "Preset filters" to "My Views" in demos to better indicate user-saved views - Create ViewDropdownLoader interface for extensible view loading - Add SavedViewOption type supporting both filters-only and full-grid-state saves - Implement LocalStorageLoader for browser-based persistence - Implement PresetLoader for built-in/developer-defined views - Support for categories, metadata, default views, and import/export This architecture allows developers to implement custom loaders (e.g., server-side storage) while providing sensible defaults for local storage and preset management. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Implement ViewManagementMenu component with three-dots trigger - Add comprehensive ViewManagementModal for managing saved views - Support inline editing, category changes, and delete confirmation - Use React Portals for proper z-index management - Add CSS styling for both components with proper focus states - Fix CSS linting issues by using standard box-shadow properties Phase 3 and 4 implementation complete. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
…management - Create SavedViewsDropdown component that combines QuickFilterDropdown with view management - Implement SaveViewModal for saving new views with filters or full grid state - Add support for extensible ViewDropdownLoader interface - Integrate ViewManagementMenu and ViewManagementModal into single component - Replace separate components in ServerSideDemo with unified SavedViewsDropdown - Support local storage persistence with LocalStorageLoader - Add CSS styling for new components - Fix TypeScript lint issues with proper type guards Phase 5 implementation complete - all view management functionality now integrated. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove complex category grouping from dropdown options - Show all saved views directly in the dropdown with clear indicators - Add icons to show default views (⭐) and categorized views (📁) - Remove separate SavedViewsManager button from demo - Remove duplicate ViewManagementMenu from demo - All save/manage functionality now integrated in SavedViewsDropdown's three-dots menu The My Views dropdown now works just like the presets dropdown, but loads its options from localStorage instead of bundled presets.
…ped saved views BREAKING CHANGE: Components now require @headlessui/react peer dependency - Complete headless architecture with zero hardcoded styling - 78% code reduction using @headlessui/react for CategorySelector, SaveViewModal, ViewManagementMenu - Enhanced DateFilter with proper styling and data attributes - Grouped saved views by category with visual hierarchy - Improved accessibility and keyboard navigation - Comprehensive documentation updates - Added GridResetButton component and utilities 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Owner
Author
|
This PR has been superseded by #102 (Release v0.2.0-rc3), which implements the complete headless architecture based on a stable foundation. RC3 provides a cleaner implementation without the infinite loop issues. See HEADLESS_RC3_MIGRATION_PLAN.md for details. |
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Fixes #97
Summary
This PR begins the v2.0 headless refactor by removing all default styles from components and making them truly headless.
Changes Made
Components Still Needing Refactor
Breaking Changes
This is a MAJOR breaking change requiring v2.0.0 release. All components will be unstyled by default.
TODO
Related Issues