angular/components

feat(material/timepicker): Implement a visual picker

angelaki opened this issue · 2 comments

angelaki commented

Feature Description

I was quite happy when I saw that finally a time-picker is joining the Angular Components team (#29806). But after checking it now I'm a bit disappointed, it actually only is a dropdown. I expected it more to align to the Material Design Guide (https://m3.material.io/components/time-pickers/overview, eventough @crisbeto already implemented a nice component once).

Are there plans on supporting a visual input in the future? I still need to go with 3rd party components right now. Haven't found an issue for it, so sorry if this was requested already.

Use Case

Allow the user to pick a time - easy as that.

crisbeto commented

We don't have plans at the moment to implement the dial design from the Material spec. There's an explanation in the PR around why we went with the dropdown design.

angelaki commented

Ok, I see. So I guess this can be closed? Imho there could have been a build-in implementation where the behavior can be picked (similar to calendars touchUi property). Don't get me wrong, don't want to annoy you, but just in my opinion:

  • This design is primarily geared towards mobile users on Android. It would look out of place in the desktop-focused enterprise UIs that a lot of Angular developers build.
    • Dropdown on Desktop, dial on mobile (and I don't see any [well implemented] web app as desktop-focused. Should always focus both)
  • The time dial UI is complicated and can be overwhelming, especially in the 24h variant.
    • There are lots of implementations solving this issue (including your own) with an inner circle
  • The accessibility pattern is unclear, users may have to fall back to using the inputs.
    • Sure, they can! Put in numbers or use the dial - easy as that
  • It's unclear how the time selection would work on non-Westernized locales whose time formatting isn't some variation of HH:MM.
    • Ok, I'm in. But yeah, no dial in this case
  • The time dial requires very precise movements if the user wants to select a specific time between others (e.g. 6:52). This can be unusable for users with some disabilities.
    • Don't get me wrong, but a dropdown with 1 minute interval disables every user
  • The non-dial functionality (inputs in a dropdown) don't add much to the user experience.
    • No user should get forced to dial, yeah. But switching the behavior via property should fit every use-case

In my opinion a single column dropdown for timepick is not making work easier at all. Still love your effort, so don't get me wrong! I'm an Angular lover since the early years 👍