docker-service-discovery/openspec/changes/update-dropdown-style-for-shadcn/design.md

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-ui library, 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.js will be updated to use this new Dropdown component.

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.