Skip to content

[SSF-196] update date picker to use chakra#160

Open
amywng wants to merge 4 commits intomainfrom
acw/SSF-196-pantry-orders-date-picker
Open

[SSF-196] update date picker to use chakra#160
amywng wants to merge 4 commits intomainfrom
acw/SSF-196-pantry-orders-date-picker

Conversation

@amywng
Copy link
Copy Markdown
Member

@amywng amywng commented Apr 20, 2026

ℹ️ Issue

Closes SSF-196

📝 Description

✔️ Verification

frontend verification
Screenshot 2026-04-19 at 10 34 04 PM

Copy link
Copy Markdown
Collaborator

@sam-schu sam-schu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seeing a really weird thing on this branch (confirmed main is fine) where whenever I click any of the links in any of the tables on any of the pages (to open a modal / etc.) and then close it, I can no longer click anything on the page without refreshing. guessing this must've somehow been caused by the chakra update (sorry)... could you look into this?

@dburkhart07 dburkhart07 self-requested a review April 22, 2026 22:52
@amywng
Copy link
Copy Markdown
Member Author

amywng commented Apr 23, 2026

tbh i tried everything and the only way seems to be either setting modal={false} for all the Dialog's (which I think causes more impact than the solution I ended up with) or just manually resetting the html tags

@amywng amywng requested a review from sam-schu April 23, 2026 01:27
Copy link
Copy Markdown
Collaborator

@sam-schu sam-schu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice if you could click anywhere in the date received input box and it would open up the date picker, rather than turning into a very confusing numeric input.

very annoying with chakra, I trust there's no better way to fix that. chakra update very ssf 🙃

Comment thread apps/frontend/src/hooks/modalBodyCleanup.ts
Copy link
Copy Markdown

@dburkhart07 dburkhart07 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

few small things 🐶 ⏲️ 🔒 👎

resetForm();
onSuccess();
onClose();
} catch (err) {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we set an alert message rather than removing this?

onChange={(e) => setDateReceived(e.target.value)}
value={dateReceived}
/>
<DatePicker.Root
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not quite sure which component you would change, but can we make the arrows actually match the Figma: https://www.figma.com/design/brc5luMhizIFp893XIutYe/SP26---SSF-Designs?node-id=1891-28804&m=dev

or confirm with priya that these are good?


const handleSubmit = async () => {
try {
if (new Date(dateReceived) < new Date(orderCreatedAt)) {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dont think we need this anymore. with the calendar, its not possible choose an earlier date with the min attribute.

const today = new Date();
today.setHours(0, 0, 0, 0);

if (new Date(dateReceived) > today) {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dont think we need this either


// DatePicker component props
export interface DatePickerRootProps extends ComponentPropsLenientChildren {
min?: any;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we change these to CalendarDate types instead of any?

min={parseDate(minDate)}
max={parseDate(today)}
value={dateReceived ? [parseDate(dateReceived)] : []}
onValueChange={({ value }) => {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this be neutral 700 font weight 600, like it is in the figma?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants