Improve TimePicker component

[WalkingPizza]

What does it do?

With this PR, the TimePicker component no longer shows a huge list of times formatted as hh:mm, but instead shows two columns, one containing the available hours, another containing the available minutes.

Why is it needed?

Picking times in the admin panel takes a lot of time because of the length of the list, with this PR, picking times should become much faster.

How to test it?

Spin up the Storybook env and look at the TimePicker component.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
design-system	✅ Ready (Inspect)	Visit Preview	Jun 2, 2022 at 9:45PM (UTC)
design-system-website	✅ Ready (Inspect)	Visit Preview	Jun 2, 2022 at 9:45PM (UTC)

[maevalienard]

Hello 👋 Thanks for the proposal. I checked around with several people and have let them tested the timepicker that we currently have and the one suggested here. It seems that, in majority they prefer using the one that we currently have. I'd say the main painpoint for them is to understand what's going one with the two sided dropdown, and also the fact that they prefer to scroll once than twice :)

I would say the main painpoint of this component is not to be able to type in it rather than scrolling in the dropdown. If we could type in, we eventually wouldn't have to infinite scroll :)

(cc @gu-stav)

[WalkingPizza]

Kind of a bummer to hear that, but if you think the existing TimePicker is better, I'll accept that and move on.

I agree with the fact that the Select should be writable so that people can jump straight to the option they're seeking, but I don't think that's enough of a change to make the TimePicker really competitive, especially when the step is set to one second.

Anyway, I don't mean to fight – just wanted to let you know my opinion as a software engineer and Strapi user!

[gu-stav]

@WalkingPizza We briefly discussed another PR from a user today, which would introduce an interval selection for the timepicker: https://github.com/strapi/strapi/pull/13597

I'm wondering: do you think this would improve your problem a bit? Do you have any other default values which you'd like to add? Currently we do have [1, 5, 10, 15, 30, 60].

[WalkingPizza]

@WalkingPizza We briefly discussed another PR from a user today, which would introduce an interval selection for the timepicker: https://github.com/strapi/strapi/pull/13597

I'm wondering: do you think this would improve your problem a bit? Do you have any other default values which you'd like to add? Currently we do have [1, 5, 10, 15, 30, 60].

Hey @gu-stav, that'll definitely be a good starting point for a more functional timepicker!

I think the default values are good too, I can't really picture someone wanting any other interval, plus having 1 in there guarantees a certain degree of granularity.

Looking forward to the PR being merged and to the day when the timepicker will be searchable too, which I'm sure we'll be very soon! 🙌

[joshuaellis]

Hey everyone we're gonna be making some improvements on this component in the near future so im gonna close this PR. I think it'll use an upcoming primitive we're building for comboboxes...

Thanks to all your work @WalkingPizza – sorry this one didn't quite work out.