Task: Implement Find Properties filter option for property market values

[hannahvy]

Describe the task

Currently, there is not an option for users to filter vacant properties by estimated market value. We will implement a filter option in which users can 1) input their own custom value for minimum and maximum entry fields and/or 2) select from a dropdown of provided market values for the minimum and maximum entry fields.

Acceptance Criteria

• Users can input custom values
• Can select from a dropdown of pre-defined market values
• Can clear the entry field by clicking "Clear"
• Can confirm their selections by clicking "Done"

Additional context

• Figma link

[Amberroseweeks]

@bacitracin quick question about the input field, would we need a visual label here? Would the "Market Value" act as the label or do you think it would be beneficial to include a visual label for the min value and max value input fields? Maybe just a floating label can work. For example, this NEXTUI input: https://nextui.org/docs/components/input#usage

[bacitracin]

@Amberroseweeks Good question! A visible label is definitely necessary here for Min Value & Max Value. Once you pick a value the Min Value/ Max Value text disappears. It being min/max from left to right seems obvious to us but adding the label will help with cognitive load, and if screenreader or zoomtext users get disoriented.

Ideally the label would be outside of the input and not move around, but if you use a floating label and 1) it's always visible 2) sounds decent on a screenreader it should be fine. In the first example on that page it reads out as "Email email edit your email edit text email" which you'd want to avoid.