search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.52k stars 2.87k forks source link

Style our date picker #5710

Closed flodnv closed 2 years ago

flodnv commented 3 years ago

As per this Slack thread, we would like to style our date picker so it matches better our UI / brand.

We first need to decide what we want:

cc @iwiznia @shawnborton @kidroca @johnmlee101 @tgolen

MelvinBot commented 3 years ago

Triggered auto assignment to @sonialiap (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

parasharrajat commented 3 years ago

Building our own is surely not a good option. There are so many mature libs and they provide sufficient customization options. So my vote goes to 1.

shawnborton commented 3 years ago

I'm cool using an existing library for this.

sonialiap commented 3 years ago

Since this is still currently in discussion, going to unassign myself. Once solution is agreed upon please update the top post and re-apply the triage label

MelvinBot commented 3 years ago

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

tgolen commented 3 years ago

Building our own is surely not a good option

It's actually one of the best options because it gives us absolute control, we can add only the features we need, there is no cruft for features we won't ever use, we don't need to rely on community updates, or packages being abandoned, etc.

The concept of a date picker isn't that complex and I think building our own would be hugely beneficial.

parasharrajat commented 3 years ago

Hmm. That makes a good point but

The concept of a date picker isn't that complex

I will still prefer a built one as this is not something I would invest time in. It does not come under business logic for me. Another point is if there is going to be only one variant of the picker, then we don't need much control over the code.

tgolen commented 3 years ago

I will still prefer a built one as this is not something I would invest time in

Yep, that's understandable and a place that it's easy to find yourself in. Someday, I can tell you the story of https://github.com/Expensify/expensify-common/blob/master/lib/components/form/element/combobox.js and how amazing it was for us to bite-the-bullet and build our own combo box, despite there being thousands of pre-built ones to choose from (tldr; we achieved orders of magnitude better performance than anything available).

johnmlee101 commented 3 years ago

I think if we had a very limited set of resources to toss at this, then using an existing library would be preferable. However, since we have a lot of hands on deck, and the time to wait for our own implementation to be done well, I'm for building an in-house version 💪

(just As long as we never build out our own street address validator or timezone logic... 😂 )

parasharrajat commented 3 years ago

I agree with @johnmlee101 comment. If we are not tight on resources so yup that option makes sense. It is true custom will be performant.

kidroca commented 3 years ago

Do we really have a need of some special functionality that requires going "custom code" here?

As a browser user, when I input dates I would either paste a date like 12/31/2021, input one with the keyboard or select one from a calendar popup. There are lightweight tried and tested web datepickers out there that support all of this and would allow us to brand a datepicker with just some css styles applied to it They have keyboard navigation support (arrows, tabs), accessibility support (a11y), and localisation support They deal with common problems as first day of the week, presenting the end of last month and the start of the new month in a calendar popup as well as highlighting today, a holiday and a ton of other stuff like giving you full control for rendering each date cell, week labels and such

And we're only discussing web/desktop here - we're already using community datepicker library on the native side - are we going to reimplement that as well? If the react-native pickers (spinner/calendar popup) used on mobile suite the needs for the Expensify App, I don't see why we should build something custom just for web

I also don't see the need to code yet another datepicker for react-web - we might as well support a community project

kidroca commented 3 years ago

we would like to style our date picker so it matches better our UI / brand.

If we just after styles, IMO we should take the simplest approach - a library that allows for the needed customisations Why don't we spent some time reviewing some candidates and go custom if nothing is deemed suitable?

shawnborton commented 3 years ago

Going to unassign myself, but let me know if there is anything design-related I can help out with here.

MelvinBot commented 3 years ago

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!