25 lines
1.5 KiB
Markdown
25 lines
1.5 KiB
Markdown
## 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.
|