69 lines
2.6 KiB
Markdown
69 lines
2.6 KiB
Markdown
# Themed Status Dropdown Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** Replace the native status `<select>` in the delivery filters with a themed dropdown that matches the app styling and does not expose browser-default chrome.
|
|
|
|
**Architecture:** Keep the change local to the existing filters component so behavior stays the same while the rendering shifts from a native form control to an app-styled button plus floating menu. Reuse the existing filter state and active-chip logic so downstream list filtering does not change.
|
|
|
|
**Tech Stack:** React 18, Vitest, Tailwind utility classes with CSS variables.
|
|
|
|
---
|
|
|
|
## File Structure
|
|
|
|
- Modify: `src/components/orders/OrderFilters.jsx`
|
|
Responsible for rendering the search field and the themed status dropdown, including open/close behavior and option selection.
|
|
|
|
- Modify: `src/components/orders/OrderFilters.test.jsx`
|
|
Server-rendered tests for the new dropdown markup and the existing active-chip behavior.
|
|
|
|
## Chunk 1: Themed Dropdown Rendering
|
|
|
|
### Task 1: Replace the Native `<select>` With a Custom Dropdown
|
|
|
|
**Files:**
|
|
- Modify: `src/components/orders/OrderFilters.jsx`
|
|
|
|
- [ ] **Step 1: Replace the status `<select>` with a button-triggered dropdown**
|
|
|
|
Use the existing `statusOptions` array and `filters.displayStatus` state, but render a button that opens a floating menu of options instead of the browser's native select chrome.
|
|
|
|
- [ ] **Step 2: Keep the current filter semantics unchanged**
|
|
|
|
Selecting an option must still call `setFilters((current) => ({ ...current, displayStatus: value }))`.
|
|
|
|
- [ ] **Step 3: Keep the component visually aligned with the app theme**
|
|
|
|
Use the same rounded borders, surface/background colors, accent border on focus/open, and muted text used elsewhere in the dashboard.
|
|
|
|
### Task 2: Update the Component Test
|
|
|
|
**Files:**
|
|
- Modify: `src/components/orders/OrderFilters.test.jsx`
|
|
|
|
- [ ] **Step 1: Update the expectation that currently checks for `<select>`**
|
|
|
|
Assert that the markup no longer contains a native `select` element.
|
|
|
|
- [ ] **Step 2: Add a markup assertion for the custom trigger**
|
|
|
|
Verify that the closed state still renders the selected label and the status control remains present.
|
|
|
|
- [ ] **Step 3: Run the focused test**
|
|
|
|
Run: `npm test -- --run src/components/orders/OrderFilters.test.jsx`
|
|
|
|
Expected: PASS.
|
|
|
|
### Task 3: Build Verification
|
|
|
|
**Files:**
|
|
- None
|
|
|
|
- [ ] **Step 1: Run the production build**
|
|
|
|
Run: `npm run build`
|
|
|
|
Expected: PASS.
|