1.8 KiB
1.8 KiB
Context
The current dropdown in FilterBox.js is a basic HTML <select> element. To align with the shadcn/ui aesthetic, we need a more flexible and styleable component. The shadcn/ui Dropdown Menu is built on top of Radix UI's Dropdown Menu primitive, which provides accessibility and interaction features.
Goals / Non-Goals
Goals:
- Replace the native
<select>dropdown with a custom component that visually and functionally mimics the shadcn/ui Dropdown Menu. - Ensure the new component is accessible and reusable.
Non-Goals:
- Implement every single feature of the shadcn/ui Dropdown Menu. We will only implement the features currently required by the
FilterBox. - Create a full component library. The focus is solely on the dropdown.
Decisions
- Component Library: We will not install the entire
shadcn-uilibrary, as that would be overkill. Instead, we will create a new React component that replicates the required styles. - Styling: We will use CSS modules to encapsulate the styles for the new dropdown component, inspired by the styling of shadcn/ui. This avoids conflicts with existing styles.
- Implementation: A new component,
Dropdown.js, will be created. It will manage its own state (e.g., open/closed, selected value).FilterBox.jswill be updated to use this newDropdowncomponent.
Risks / Trade-offs
- [Risk] Creating a custom component takes more effort than using a pre-built library. → Mitigation: The required dropdown functionality is simple, and a custom component gives us full control over the implementation and avoids unnecessary dependencies.
- [Trade-off] We are not using the exact shadcn/ui library, so we will have to manually update the component if the shadcn/ui design evolves. → Mitigation: The design is for a simple dropdown, which is unlikely to change significantly.