QuickFilterDropdown violates headless architecture with hardcoded styles

[ryanrozich]

Problem

QuickFilterDropdown component has CSS module styles (QuickFilterDropdown.module.css) which violates the headless component architecture principle. Headless components should have NO default styles.

Current Issues

1. Component has 643 lines of CSS with hardcoded colors and styles
2. Dark mode only works with prefers-color-scheme: dark media query, not class-based dark mode
3. Users cannot fully customize the component appearance without fighting specificity wars

Files Affected

• src/components/QuickFilterDropdown/QuickFilterDropdown.module.css (should be removed)
• src/components/QuickFilterDropdown/index.tsx (should remove all style imports and className applications)

Proposed Solution

1. Remove ALL CSS from the component
2. Accept render props or className props for each element
3. Provide example styles in the demo/documentation
4. Let users have full control over styling

Temporary Workaround

Created src/demo/styles/quick-filter-overrides.css with !important rules to fix dark theme hover states in the demo.

Related

• PR fix: remove global button hover rule causing white backgrounds in dark theme #95 (fixing hover states)
• Core principle: Components must be headless

[ryanrozich]

This issue has been resolved by PR #102 (Release v0.2.0-rc3). The QuickFilterDropdown component has been completely rewritten using the headless UI pattern, eliminating all architecture violations.

The new implementation properly separates logic from presentation and follows the established headless component patterns.

See HEADLESS_RC3_MIGRATION_PLAN.md for details.