search

HealthCatalyst / Fabric.Cashmere

Health Catalyst’s comprehensive design system.
http://cashmere.healthcatalyst.net
Apache License 2.0
66 stars 76 forks source link

Day of the week picker #673

Open jacquie opened 5 years ago

jacquie commented 5 years ago

In Leading Wisely we currently have two needs for, and completely different implementations of a 'Day of the week Picker': reportday notificationday

Both can select multiple days. With the second one you can hold the shift key down and drag across to select/deselect a range of days.

Neither is currently an actual component - just a collection of buttons, so it would be great to have a standard component, that will probably end up not looking like either of these options!

andrew-frueh commented 5 years ago

I'm wondering if this could be an addition to the Datepicker rather than a new component. We've got a year and month selector built in when the user clicks on the month selector in the top left (see attached). I think we could use the same styling to select a week. Probably would need to be something added to the datepicker config. And I'm thinking we could generalize it such that a dev could say select='day' (default) or select='month', select='week'. And that will adjust the display and return value accordingly. What do you think @benjanderson?

screen shot 2019-02-01 at 4 13 43 pm
benjanderson commented 5 years ago

The select='month' you are referring to is implemented here in materials website https://material.angular.io/components/datepicker/overview#watching-the-views-for-changes-on-selected-years-and-months.

If you play around with that demo you can also navigate to different years. In the control, there is also a ton of code to properly handle dates. This feels a little too complex to add on something that is allowing you to select one of seven options, which isn't even a proper date. Day of the week doesn't have to be internationalized and local formatting, nor does it have to take into account switching months or years. I think adding this capability is forcing the datepicker into something it isn't. You would have to make too many caveats.

I do think you could use the same design pattern. Adding a directive on the input that has a button that pops up to choose the day of week would be very straight forward. I would be happy to go over the design of the datepicker and how it works if you would like.

andrew-frueh commented 5 years ago

hmmmm...you make a good point Ben. I suppose that selecting a set of 1-7 elements could just as easily be achieved with a list of checkboxes (see attached). @jacquie - I probably don't have a full understanding of all the design factors on this. Any additional functionality needed on this component that a checkbox list wouldn't provide?

screen shot 2019-02-04 at 2 52 16 pm
jacquie commented 5 years ago

Our day of week pickers are just to choose what days of the week reports and notifications are to be sent. In both our implementations the user can see at a glance which days they have picked or not and it is a single click to select unselect a day. With notifications there can be a list of people to send the notification to and this control forms part of the line of data for each person.

andrew-frueh commented 2 years ago

Well @jacquie now three years after you posted this request, I think it's actually getting its due. @cikeddy has a Vitalware design that was in need of a component exactly like you outlined here. So Cass and I discussed getting this on her to-do list, but maybe its something the two of you can collaborate on?

jacquie commented 2 years ago

Cool! Looks like we still need this. I will have to see when I can work on this but happy to collaborate with @cikeddy when the time comes.

cikeddy commented 1 year ago

Call this component "dayofweekPicker". For date of the month, try to incorporate on the datepicker page