GovAlta / ui-components

ui-components contains the code you need to start building a user interface for Government of Alberta platforms and services.
Apache License 2.0
14 stars 24 forks source link

New Component: Dedicated GoA Time Field/Picker & Combined Date/Time Picker #1513

Open jim-muirhead opened 7 months ago

jim-muirhead commented 7 months ago

Is your feature request related to a problem? Please describe

We have several forms on the APC service that required the entry of a date and time for a particular event or deadline. Currently we store both the date & time as a single datapoint in our database as per our Dev team's preference. The browser native versions of a combined Date & Time input control vary widely between OS and Browser versions, making it difficult to create the best UX across all OS and Browser combinations. We'd like to adopt the new Date Picker control, but would have to change a bunch of data-related stuff to use separate Date Picker and Time Picker controls. And, of course, even if we used separate Date Picker and Time Picker controls, we wouldn't be able to have a consistent experience across these two separate controls without a GoA Time Picker that is similar to the Date Picker. Ideally we would also have a combined GoA Date & Time Picker control.

Describe the solution you'd like

You can review a design we've worked up for a standalone Time Field/Picker control and a combined Date/Time Picker control that puts the existing GoA Date Picker together with our suggested Time Field/Picker control. Here are links to the designs in Figma:

Provide evidence this is a needed component

During our recent Early Adopters testing program, we received feedback on both the difficulty in using some of the browser-native Time input fields.

Describe alternatives you've considered

We are currently using the control which uses whatever the native browser date picker is.

image

Do you have anything already created for this that we can use?

yes

Are you currently using this proposal inside your own service

no

Are you able to assist to bring the feature to reality?

yes

Additional context

No response

ArakTaiRoth commented 1 month ago

@Spark450 Create a story in Design