hackforla / hackforla/311-data

DEV - Update Datepicker: Start Date, End Date, Remove Chips

Open
#1,868 18 comments 0 reactions 1 assignee Claimed by @DrAcula27 View on GitHub
Complexity: Medium p-feature: Map p-feature: Search/Filter Modal ready for dev lead Role: Frontend size: 3pt
Dominant language
JavaScript
Stars
73
Forks
74
PR merge metrics
No merged PRs in 30d

Description

### Dependency
- [x] #1891
- [x] #1892

### Overview

We need to update the DatePicker component to utilize two different fields for Start Date and End Date, as well as remove the pre-defined date chips. This will reduce user confusion around how to complete their date range selection.

### Action Items

#### Before getting started...
- [x] ⚠️ I acknowledge that we are not implementing the pre-selected date chips in the spec ⚠️
- see Resource, `Screenshot: Date Chips In Spec, Do Not Implement`

#### Updating the date picker form fields and dropdowns...
- [x] Modify the DateSelector component to replace the pre-selected date chips with the ReactDayPicker modal
- [x] Remove the `` component within `SelectorBox.Collapse`, replace with ``
- [x] Remove the separator div
- [x] Modify the DatePicker component to have two new fields, StartDate and EndDate
- [x] Update the Calendar icon to use the new SVG (see references)
- [x] Move the Calendar icon to the same form field as StartDate
- [x] Modify `renderSelectedDays()` to populate these two fields, rather than populating the spans
- [x] Extra Credit: write in a comment how you might write tests for this user flow
- [x] Modify border styles on focus
- [x] border size is 2px
- [x] border color is SecondaryFocus
- [x] Modify text color styles...
- [x] White (`#FFFFFF`) when a date is provided (pls confirm w/ design)
- [x] TextSecondaryLight when a date is not provided
- [x] Modify ReactDayPicker...
- [x] previous and next arrows should be PrimaryFocus from `theme/colors.js`
- [x] Selected Start Day styles are modified...
- [x] background color will be SecondaryFocus
- [x] text color will be TextPrimaryDark
- [x] border is removed
- [x] Selected range (without start and end dates) styles are modified...
- [x] background color will be PrimaryLight
- [x] Selected End Day styles are modified...
- [x] background color will be PrimaryLight
- [x] border color is SecondaryFocus
- [x] border size should be `1px`
- [x] text color should be TextSecondaryLight
- [x] Extra Credit: find a way to standardize styles within this file, try to reduce usage of magic numbers, but without adding unnecessary indirection
- [x] Ensure functionality matches the specification, document how you would test the interaction
- [x] ReactDayPicker should highlight the StartDate/EndDate form field when selecting a new start date/end date (respectively)
- [x] Clicking the StartDate/EndDate should open the ReactDayPicker dropdown
- [x] The ReactDayPicker dropdown should close once both StartDate and EndDate have been selected
- [ ] Optional: Consider refactoring components to use more sensible names and/or organization
- [ ] Suggestion: combine DateSelector with DatePicker component, named DateSelectionForm
- [ ] Suggestion: rename ReactDayPicker to DayPickerContainer
- [ ] Extra Credit: make a ticket(s) to do the following...
- [ ] ensure colors are being chosen from our theme file, everywhere in the app
- [ ] consider adopting Tailwind CSS, or some other way of moving our theme data out of bundled JS files

### Resources/Instructions

Calendar Icon SVG

```html

```


Screenshot: Date Chips In Spec, Do Not Implement

⚠️ We are not adding the chips shown below. Please disregard area marked by the red box ⚠️

Image


Screenshot: Figma Section at a Glance

Date picker components with no parent components

Image

Date picker components within the Search and Filters modal

Image


#### Hand Off Materials
- Figma Section Name: [Search/Filter Modal #1600 - Final](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=11301-3834&node-type=section&t=nNeI8Sv2DemjiFeB-0)
- Interactive Prototype [Figma file](https://www.figma.com/file/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?type=design&node-id=11301-3834&mode=design&t=kQYC8cDa7D3k7ADY-0)
- please refer to the 'Allison J' page and the wireframes under 'INTERACTIVE PROTOTYPE - 2.27.24'
- Popover Message [Figma file](https://www.figma.com/file/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?type=design&node-id=11219-3360&mode=design&t=kQYC8cDa7D3k7ADY-0) - refer to the 'Anna K' page and the 'Popover' section
- Design issue for reference: https://github.com/hackforla/311-data/issues/1600

Screenshot before proposed changes

![Screen Shot](https://github.com/user-attachments/assets/991818cf-c71b-4e8a-b951-d1c96c7ca65b)

Screenshot after proposed changes

![Screen Shot](https://github.com/user-attachments/assets/44278d63-2b48-463c-8311-844cfde00464)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.