updated

openspec/changes/refactor-dropdown-with-checkboxes/design.md

@@ -0,0 +1,24 @@
+## Context
+
+The existing `Dropdown` component is a simple, single-select dropdown. The styling is not well-defined, leading to visual inconsistencies. The user wants to be able to select multiple items from the dropdown and have a more polished UI.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Refactor the `Dropdown` component to support multi-selection with checkboxes.
+- Fix the styling issues, including text size and adding a clear boundary to the dropdown.
+- The refactored component should be reusable.
+
+**Non-Goals:**
+- This refactor will not introduce any new third-party libraries. We will use existing CSS and React capabilities.
+- We will not be adding complex features like search or filtering within the dropdown itself.
+
+## Decisions
+
+- **State Management:** The `Dropdown` component will manage its own open/closed state. The selected values will be managed by the parent component (`FilterBox`) to allow for greater flexibility.
+- **Styling:** We will use CSS modules to ensure the styles are scoped to the component. We will define clear classes for the container, header, list, items, and checkboxes.
+- **Component API:** The `Dropdown` component will accept an `options` array, a `selectedValues` array, and an `onSelect` function as props.
+
+## Risks / Trade-offs
+
+- **[Risk]** A complete refactor could introduce new bugs. → **Mitigation:** We will build the new component in isolation first, and then integrate it into `FilterBox`. The user has also requested to skip tests for now, which increases the risk. We will rely on manual testing.